KeyLines FAQ: Force-directed layouts

23rd June, 2015

time bar networkOf all the graph layouts in the KeyLines toolkit, the Standard Layout is possibly the most important, and underrated.

It’s a simple yet effective bit of functionality: a force-directed layout designed to detangle the network and produce a clear, aesthetically pleasing visualization.

It is versatile too – regardless of the source of the data in your chart, a standard layout will bring some clarity. More often than not, applying a standard layout is the first action taken by a user faced with a new dataset.

The forces of force-directed layouts

There are three physical forces involved in positioning the nodes and links in a standard layout:

  1. Repulsion
  2. Springs
  3. Network energy

In the model, nodes are treated like charged particles that produce a repulsive force that moves them apart.

This force is inversely proportional to the square of the distance between them – so if they are close together, the force moves them apart strongly, but if they are far apart then it only has a weak effect.

Next, the springs ‘pull’ the nodes closer. Each spring has a certain natural length (controlled by the tightness layout option). If the spring is ‘stretched’, it will pull the node closer to the link end. If the spring is loose, the node is pushed away from the link end.

Finally, we add some energy to the system by setting each node to move in a random direction.

The layout simulates this system for a short while, gradually reducing the energy until a mechanical equilibrium is reached (i.e. the nodes settle in a stable configuration).

Of course, this happens very quickly:


standard layout 1

What about singleton nodes?

Good question. Singleton nodes have repulsive force and energy, but no springs – so surely they simply fly from the chart?

The KeyLines standard layout algorithm considers each group of disconnected nodes separately and runs the algorithm on each group in isolation. A separate “packing” algorithm then takes all the disconnected groups and packs them together on the chart so that they fit reasonably closely without leaving large gaps between them.

Which is why you might see charts like this:

Standard layout with singletonsWhy have a static force-directed layout?

Some force-directed algorithms do not reduce the system energy as quickly as KeyLines. The result is a ‘floating’ network of nodes and links.

In our view, this is frustrating (waiting for a layout to stop before inspecting the network) and can induce seasickness.

How does it deal with dynamic networks?

The KeyLines Tweak layout is the dynamic variation of the standard layout. It uses the same force-directed model, but with less energy in the system.

The result is an equilibrium is reached more quickly and the node positions can be adjusted in a more incremental way:


The nodes don’t tend to move far from their original position, making the network’s evolving structure easier to track.

Visualize your own connected data!

If you have connected data and would like to visualize it for yourself – give it a go!

You can register for a free trial, or get in touch for a personalized demo of the KeyLines network visualization toolkit,

More from our blog

Visit our blog