Introducing the powerful organic graph layout

22nd October, 2018

Performance & quality: the best of both worlds.

If you want graph visualizations that are insightful and beautifully presented, you have to rely on layouts. It doesn’t matter if your dataset is large or small, contains hierarchies or networks of clusters. You want a layout option that’s going to do the best job of arranging items automatically, so you can spot patterns quickly.

When you’re applying layouts in other front-end visualization applications, there’s always a trade off between speed and quality.

A force-directed layout may look great, but you have to wait for the algorithm to work out when it’s reached the ‘ideal’ result and stop iterating. Apply the layout to significant data volumes and it’ll take even longer.

Alternatively, you may get fast browser-based layout performance, but the end result is ugly and unhelpful. Bad layouts fail to untangle networks if there’s limited time, so you’re left with a confusing visualization that offers little insight:

Bad layouts do a poor job of revealing structures and insight
Bad layouts do a poor job of revealing structures and insight

KeyLines already provides a range of powerful force-directed layouts to suit every data scenario. In KeyLines 4.6 we launched the organic layout – our solution to the ‘speed v quality’ layout issue. It’s great for any network type and is a particularly good choice for larger datasets.

This blog post takes a closer look at our newest addition to the KeyLines layouts family. It shows how the organic layout delivers on performance and quality, so you get the best of both worlds.

Identify underlying structures more easily

Let’s start by comparing the organic layout with KeyLines’ default standard layout.

The standard layout gives you a clear pattern of nodes. You can see how consistent link lengths give a concise and compact structure, making it a great choice when you’re trying to fit your visualization onto a small screen:

The standard layout provides an easy-to-understand chart
The standard layout provides an easy-to-understand chart

When we apply the organic layout to this simple dataset, the difference is subtle but effective. Notice how certain links are elongated to highlight different parts of the network:

The organic layout spreads connected components apart to highlight clusters
The organic layout spreads connected components apart to highlight clusters

As with any force-directed approach, the organic layout identifies connected subnetworks and uses three physical forces – repulsion, springs and network energy – to spread nodes apart and stretch out links to form a tree-like structure.

These longer links are incredibly valuable when you’re working with larger, more complex networks. They make it easier to identify the underlying structure of each connected component, and compare large concentrations of items in different areas of the network. The organic layout visualization is more spread out compared with the standard layout, but you get greater insight in return.

The organic layout’s tree-like structure includes longer links
The organic layout’s tree-like structure includes longer links

There’s another clever algorithm going on under the hood: packing.

The organic layout’s packing algorithm

Packing handles networks containing groups of disconnected nodes. It arranges multiple components in a circular pattern with larger components in the center, giving a more natural, organic feel to your data.

The circular pattern surrounds larger components in the organic layout
The circular pattern surrounds larger components in the organic layout

Let’s see how increased visualization quality doesn’t mean having to compromise on layout speed.

Faster graph visualization layout performance

The KeyLines development team carried out rigorous testing of the new organic layout. They found that it performs five to six times faster than the standard layout, making it a particularly good choice for handling large networks.

You’d usually have to rely on your back-end integration to achieve speeds like this. Delivering it as a front-end interaction in KeyLines gives you far greater control and flexibility.

Our performance demo – one of over 80 available on the KeyLines SDK site to showcase visualization features – runs the organic layout. You can use it to generate your own sample of thousands of items, then see how fast KeyLines rearranges them into a more useful, useable format.

The organic layout arranging 2,000 nodes and 2,000 links in under four seconds
The organic layout arranging 2,000 nodes and 2,000 links in under four seconds

Ready to get started?

We’ve got big plans to improve the organic layout. It’s currently an alpha feature, which means it’s been fully tested but is still in its development phase. We’d love you to play around with it and tell us what you think.

Want to try our new layout and benefit from high quality and performance? Contact us to request a free KeyLines trial.

Subscribe to our newsletter

Get occasional data visualization updates, stories and best practice tips by email