At this point, our visualization still looks the same, as indicated by the following screenshot:
Let's make our simulation affect the circles/lines that we created, as follows:
- The simulation runs ticks, which run very quickly. Think of this a series of steps that happen very quickly, like the ticking of a stopwatch, but faster.
- Each time a new tick occurs, you can update the visual elements. This allows our simulation to animate.
- D3 will calculate and tack positional data onto our regular data, so that we can make use of it.
Add the following to the bottom of app.js:
d3.forceSimulation()
.nodes(nodesData)
.on("tick", function(){
nodes.attr("cx", function(datum) {return datum.x;})
.attr("cy", function(datum) {return datum.y;});
links.attr("x1...