This is part of a series of examples that describe the basic operation of the D3.js force layout. Eventually they may end up in a blog post that wraps everything together. If you missed the beginning of the series, here’s a link to first example.
Before digging into the properties and options of the force layout, it’s helpful to understand how the layout works more generally. And although there’s some serious mathematics going on under the hood, the principle is pretty simple: The layout moves the graph nodes around a little bit at a time. Eventually (usually) the nodes settle into a comfortable location and the layout stops.
This example shows that process in action by duplicating the previous example. Instead of showing only the final result, however, it shows the intermediate steps along the way. You can either advance the layout one iteration at a time manually, or you can play the entire layout in slow motion. The buttons to control the animation are in the upper left.
Beginning with the next example, the series will take a closer look at exactly how the force layout does its magic.