Force Directed Layouts

Select a button to run a layout:


This simple visualization uses JavaScript to run a force directed layout on items that are connected in a network, based on the Fruchterman-Reingold algorithm:

Fruchterman-Reingold algorithm

In this simplified approach all the ‘nodes’ in the network exert a repulsive force on all other nodes, while there is an attractive force between nodes that are ‘linked’. On each iteration of the canvas draw, the nodes start to move into an equilibrium position, whereby the forces pulling and pushing against them are equal.

The algorithm uses a mysterious ‘k’ value, which affects the forces in play, but is a factor of the available space for the layout to draw. A higher ‘k’ value will allow longer ‘links’ to be drawn between nodes, while a smaller value will see a higher attractive force between nodes.

The higher the number of iterations, the more likely the layout will reach an equilibrium.