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.
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:
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
Everything you need to start designing your best graph visualization application.
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:
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.
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.
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.
