D3.js Quick Start Guide

Specifying how the simulation affects visual elements

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 ...