Adaptive layouts to make your app amazing

23rd June, 2020

Have you ever built a graph visualization that loaded perfectly, but as soon as you added more data it just wasn’t the same? It’s frustrating to watch your graph switch from clear and insightful to something unrecognizable.

Wouldn’t it be great if the chart ‘just knew’ where the new data should go? If it could run just enough of a layout to stop items overlapping, without moving things so much that you lose your train of thought?

Adaptive layouts are the answer.

Getting chart movement ‘just right’

In a recent blog post about state-driven applications, I recommended starting with a small amount of data in your visualization and then bringing more in as you explore the chart. We call this the ‘local’ approach, in contrast to the ‘global’ approach where we start with an overview and filter downwards.

One challenge of the local approach is that the data already loaded into your chart may not move to accommodate the new additions. This can cause ugly and confusing overlaps.

In this chart of live Twitter data, we added details related to #Boston. The existing nodes didn’t move out of the way, causing a tangled and overlapping mess.
In this chart of live Twitter data, we added details related to #Boston. The existing nodes didn’t move out of the way, causing a tangled and overlapping mess.

On the other hand, running a full layout can make your data move too much, holding up your investigation as you try to regain the lost context.

Here the chart moves too much, particularly since we’re only adding a single node and link. A full layout of the whole graph is certainly not necessary here.

We need a happy medium between these two.

Automatic graph layouts are complex and finely-tuned algorithms. They run thousands of calculations to simulate different physical forces and resolve the most logical and clear layout of your data. Is it even possible to find a middle-ground between no layout and a full layout?

We believe there is. We’ve designed the right solution with adaptive layouts.

Adaptive graph layouts

Our ReGraph and KeyLines graph visualization toolkits provide adaptive versions of all our automatic graph layouts.

They follow graph visualization best practice by reducing link and node overlap, without completely rearranging the chart. Instead, new items are discretely slotted into existing whitespace, gently repelling other network components. The result is a visualization experience that’s smooth and easy to follow – the perfect way to incrementally explore your graphs.

Adaptive graph layouts add new items in a way that’s logical and easy to follow.

The camera operator

All this talk of adaptive layouts is great, but what happens when your users are focused on a particular part of the graph? We should adjust their view to show exactly what’s happening each time new data is added, without adjusting the camera position so much as to throw them off.

Our solution is to automatically zoom and pan outwards. We do this slowly, and only enough to reveal the newly-added data.

As the user requests the connections of a particular node, the chart is zoomed and panned automatically to show the new data.

Putting it all together

The end result is a powerful, intuitive layout. The chart adapts nicely to new data, and the view changes are carefully choreographed so you always see the latest changes.

This behavior comes ready to go out of the box with our toolkits. There are no extra settings required, just throw your data at ReGraph or KeyLines and get started finding insight.

Want to try it for yourself?

If you’d like to see the power of adaptive layouts, and all the other graph visualization and analysis functionality in our toolkits, request a free trial to get started.

More from our blog

Visit our blog