Faster, smarter, adaptive organic layout

The fundamental aim of graph visualization is to help users understand their connected data and find actionable insight. It’s the most effective way to bring your data to life, revealing patterns and connections that’d be difficult to find in millions of rows of raw data.

At the heart of graph visualization is an efficient layout that untangles complex networks fast.

In this blog post, I take a look at what makes the updated organic layout in our toolkits the most powerful, high performing layout yet. I also look at what’s new in the latest KeyLines, ReGraph and KronoGraph toolkit releases.

Example of using organic layout to make sense of a social network of email addresses
Organic layout arranges nodes in a way that makes networks easy to understand. Even if you’re unfamiliar with the context, you immediately spot clear connections between key people.

Choosing the right layout for your data

A poor layout keeps patterns and relationships hidden from all but the most persistent user. But a good layout allows even the most inexperienced user to tell a story about their data before they start their detailed analysis. That story will most likely evolve as they deepen their exploration, but knowing where to start saves time and makes their job much easier.

In our toolkit technology we’ve designed a range of layouts, each one designed to highlight different aspects of your data.

Users commonly ask “which layout is right for my data?” Every layout has been developed with quality and performance in mind, so which one should you choose?

The answer is (almost always) organic layout.

Try organic layout in our graph visualization toolkits

Sign up for a free trial

Why choose organic layout?

Organic layout provides great layout quality and high performance. In some visualization apps there’s often a trade-off between the two: you get an intuitive arrangement but it takes forever to load, or you get a fast display but the layout makes little rational sense.

We’ve spent years developing an option that delivers on both counts.

Example of organic layout performance in ReGraph, showing 20,000 items loaded and laid out in less than seven seconds.
Organic layout delivers on quality and performance, no matter how large your network

Let’s take a closer look at what organic layout has to offer.

High quality visualizations guaranteed

Organic layout is force-directed, so physical forces determine where nodes are positioned relative to each other. There’s also a clever packing algorithm that arranges multiple components in a circular pattern with the largest ones in the center, giving a more natural organic feel (hence the name!).

We’ve optimized these behaviors to give the best possible results and make sure users can identify patterns more easily.

It’s important to see the full picture, so we’ve reduced the risk of overlapping chart items to make sure every element is easy to spot. Too much whitespace can be distracting, so we’ve minimized this to give a compact network view. There’s also clear distance between different connected components, making sure separate clusters stand out.

The result is a layout that not only looks great, but also reveals the underlying structure of the data.

Organic layout reveals the big picture by neatly positioning nodes and clusters to make every item clearly visible
Organic layout reveals the big picture by neatly positioning nodes and clusters to make every item clearly visible

Our best performance yet

Benchmark tests show that organic layout is typically 5-10 times faster than our standard layout, with the largest performance improvements seen in networks of 1,000+ nodes and links.

Of course, even with superior performance, large networks can take a little time to load. When that happens, it’s best UX practice to make users aware that something’s happening under the hood. That’s why organic layout now has added support for incremental progress event reporting.

Give users an indication of how much of their layout process is complete with a preloader or progress bar

Using a preloader or progress bar helps to manage user expectations. No matter how short the wait time, by indicating how much of the layout process is complete, you’re effectively reducing uncertainty and increasing trust in your application.

Adapting to changes the smart way

One of the (many) challenges with graph visualization is keeping track of your data as you update the network.

Every time you interact with the chart – filtering data, resizing nodes or running time bar animations – node position changes are inevitable. So what’s the best way to handle that?

One approach is simply to rerun the layout every time a change is made. This delivers a great result and is useful during the early stages of analysis where each re-run may present a slightly different perspective of the data. But it creates a lot of extra movement of chart items. If users have already established a network shape they want to work with, it may cause them to lose their mental map of the data. Re-establishing that context is time consuming and makes interpreting the data harder.

Rerunning a layout when something in the network changes may cause users to lose their mental map of the data

Our solution to this is to rely on built-in adaptive behaviors. We’ve worked hard at optimizing these in our organic layout, making sure movements in the graph are minimal whenever a change is made. These incremental iterations are subtle but effective: the layout adapts intuitively to accommodate chart updates so it’s easier for users to keep track of their data.

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

Get started with graph visualization

High-quality layouts are just one of the reasons why building an application with our KeyLines or ReGraph graph visualization toolkits is the right choice.

Don’t just take our word for it – sign up for an evaluation and start exploring your connected data.


Latest product updates

Here’s an overview of the new and exciting developments in our data visualization toolkits.

KeyLines 6.4

  • As mentioned earlier, we’ve added support for incremental progress events in organic layout, so you can provide user feedback when running massive layouts. We’ve also updated the Visualizing Big Data demo so you can see the progress bar in action.
  • As it’s our recommended option, you’ll see organic layout in many more of our demos on the KeyLines SDK, including Filtering and kCores, Ransomware Attacks, Time Periods and every database integration demo.
  • KeyLines now automatically detects right-to-left text content. Even the most complex bi-directional strings are rendered correctly in both WebGL and Canvas modes without you having to think about it.

Coming soon: ReGraph 3.1

  • ReGraph will export high-resolution images to SVG and PNG (to 16k). Users get crisp images – even when zoomed in – maintaining the detail of their charts. To see this in action, there’ll be a new Export story.
  • Adaptive behavior means organic layout will automatically adapt to resized items in addition to new or removed ones. It keeps movement to a minimum and preserves the position of existing items relative to one another. You’ll see these improvements in the updated Social Network analysis showcase demo.

KronoGraph 1.3

  • KronoGraph, our timeline visualization toolkit, now prevents users from zooming to regions of the timeline with no data, or zooming out so far that it’s hard to get back to where they came from. It avoids users getting into disorienting states.
  • We’ve updated the Phone Calls showcase demo with custom interactions. It also now includes a scale wrapping option for advanced pattern of life analysis.
KronoGraph quickly reveals how patterns of activity evolve, and makes it easier to identify groups and behaviors
KronoGraph quickly reveals how patterns of activity evolve, and makes it easier to identify groups and behaviors

More from our blog

Visit our blog

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 2021.
Read our Privacy Policy.