Skip to content

Instantly share code, notes, and snippets.

@HarryStevens
Last active Nov 4, 2018
Embed
What would you like to do?
Force Update Pattern
license: gpl-3.0
<html>
<head>
</head>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/jeezy@1.11.2/lib/jeezy.min.js"></script>
<script>
var alphabet = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
var width = window.innerWidth,
height = window.innerHeight;
var nodes = randomizeData();
var simulation = d3.forceSimulation(nodes)
.force("charge", d3.forceManyBody().strength(-150))
.force("forceX", d3.forceX().strength(.1))
.force("forceY", d3.forceY().strength(.1))
.force("center", d3.forceCenter())
.alphaTarget(1)
.on("tick", ticked);
var svg = d3.select("body").append("svg").attr("width", width).attr("height", height)
g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"),
node = g.append("g").attr("stroke", "#fff").attr("stroke-width", 1.5).selectAll(".node");
d3.interval(function(){
restart(randomizeData())
}, 2000);
function restart(nodes) {
// transition
var t = d3.transition()
.duration(750);
// Apply the general update pattern to the nodes.
node = node.data(nodes, function(d) { return d.name;});
node.exit()
.style("fill", "#b26745")
.transition(t)
.attr("r", 1e-6)
.remove();
node
.transition(t)
.style("fill", "#3a403d")
.attr("r", function(d){ return d.size; });
node = node.enter().append("circle")
.style("fill", "#45b29d")
.attr("r", function(d){ return d.size })
.merge(node);
// Update and restart the simulation.
simulation.nodes(nodes)
.force("collide", d3.forceCollide().strength(1).radius(function(d){ return d.size + 10; }).iterations(1));
}
function ticked() {
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
}
function randomizeData(){
var d0 = jz.arr.shuffle(alphabet),
d1 = [],
d2 = [];
for (var i = 0; i < jz.num.randBetween(1, alphabet.length); i++){
d1.push(d0[i]);
}
d1.forEach(function(d){
d2.push({name: d, size: jz.num.randBetween(0, 50)})
});
return d2;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment