Skip to content

Instantly share code, notes, and snippets.

@fogonwater

fogonwater/.block

Last active November 29, 2017 18:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fogonwater/74a50ec5ff2c5d5641c6d48c2f0926a9 to your computer and use it in GitHub Desktop.
Save fogonwater/74a50ec5ff2c5d5641c6d48c2f0926a9 to your computer and use it in GitHub Desktop.
Download ZIP
slowly drifting off
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { background-color: #2F243A; margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
// Feel free to change or delete any of the code you see in this editor!
var tot_points = 3500,
sub_points = 1420,
width = 960,
height = 500,
svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height),
data = [];
var nodes = d3.range(tot_points).map(function(d, i) {
return {
r: Math.random() * 5,
color: i < sub_points ? '#FDECEF' : '#9D6381'
}
})
var simulation = d3.forceSimulation(nodes)
.velocityDecay(0.22)
.force("x", d3.forceX().strength(0.02))
.force("y", d3.forceY().strength(0.02))
.force("collide", d3.forceCollide().radius(function(d) { return d.r + 1; }).iterations(2))
.force('center', d3.forceCenter(width / 2, height / 2))
.on("tick", ticked);
function ticked() {
var u = svg
.selectAll('circle')
.data(nodes)
u.enter()
.append('circle')
.attr('r', function(d) {
return d.r
})
.merge(u)
.attr('cx', function(d) {return d.x})
.attr('cy', function(d) {return d.y})
.style('fill', function(d) {return d.color})
u.exit().remove()
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment