Why a force-directed layout is so powerful for graph visualization

Customers and users love our organic layout because it’s our most powerful force-directed layout yet.

It’s one of a range of automated layouts in our graph visualization toolkits, each one designed with a specific data type and user need in mind.

Every layout detangles complex networks quickly to produce clear, beautiful visualizations. What’s less obvious is the number of complex calculations that go on under the hood to position every node in the right place.

Let’s take a closer look at what makes a force-directed layout so effective, and why organic layout is always your best choice.

How does a force-directed layout work?

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

  • Repulsion
  • Springs
  • 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 until the nodes settle in a stable configuration. It happens fast, so this animation shows us repeatedly rerunning the organic layout to give you some idea about performance.

Rerunning the organic layout to change the shape of the network and to demonstrate the force-directed model

What’s the value of a force-directed layout?

When you’re dealing with huge, complex networks of connected data, you need a layout that can reveal the underlying structure of every connected component. The force-directed approach clearly identifies connected subnetworks and positions them carefully, making it far easier to compare clusters of nodes in different parts of the network.

A force-directed layout minimizes overlaps in the graph, evenly distributes nodes and links, and organizes items so that links are of a similar length. It is clear, reliable and makes a good all-rounder for any type or size of dataset, because the focus is on finding patterns and symmetries.

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 organic 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:

Visualization of social network analysis including singleton nodes
An organic network layout with singletons arranged at the right edge

Notice how multiple components are arranged in a circular pattern with larger components at the center, giving the layout a more natural ‘organic’ feel.

The ultimate guide to graph visualization

The ultimate guide to graph visualization

Everything you need to start designing your best graph visualization application.

Download the guide

Why have a static force-directed layout?

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

We think this is frustrating for users because they have to wait for a layout to stop before they can inspect the network. It’s also not great for motion sickness sufferers.

How does organic layout deal with dynamic networks?

The organic layout can adapt automatically to items added, changed or removed from the chart. It uses less energy than a full layout, so nodes move as much as they need to and no more.

The result means it’s easier to spot network changes over time without users losing their mental map of where nodes exist:

Organic layout’s adaptive behaviors mean the chart moves just enough to accommodate changes

What about performance?

Optimal performance has driven every aspect of organic layout development. It’s around 5-10 times faster than our standard layout, with the most impressive performance improvements for visualizations featuring over 1,000 nodes and links.

Typically, you’d need to run your layout on a back-end to get this level of performance. Our toolkits make it an attractive, interactive front-end feature.

Running the organic layout algorithm reveals the structure of the data fast
Running the organic layout algorithm reveals the structure of the data fast

Visualize your own connected data

Next time, we’ll take a closer look at the other automatic graph layouts that help make our graph visualization toolkits so powerful.

If you have connected data and would like to visualize it for yourself – try KeyLines and ReGraph.

You can register for a free trial, or get in touch for a personalized demo.

A screen showing a hybrid graph and timeline visualization created using ReGraph and KronoGraph
FREE: Start your trial today

Visualize your data! Request full access to our SDKs, demos and live-coding playgrounds.


This post was originally published some time ago. It’s still popular, so we’ve updated the content to keep it useful and relevant.

How can we help you?

Request trial

Ready to start?

Request a free trial

Learn more

Want to learn more?

Read our white papers


Looking for success stories?

Browse our case studies

Registered in England and Wales with Company Number 07625370 | VAT Number 113 1740 61
6-8 Hills Road, Cambridge, CB2 1JP. All material © Cambridge Intelligence 2024.
Read our Privacy Policy.