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 the previous example didn’t look very impressive, that’s probably because it wasn’t. Why bother to use a force layout just to place two circles a specific distance apart? Here’s the payoff, though. With nearly the exact same code we can see what a more complex graph looks like.
There are plenty of ways to improve this graph (most of which we’ll cover in additional examples), but already it’s getting easy to see how the nodes are connected to each other. That’s the essence of a force-directed graph.
The series continues in the next example which peels the curtain back a little to show the steps that the layout takes to reach it’s final state.