Sequential layout: The best way to handle tiered data

Layouts are the rules which govern where nodes are placed on the screen, and they are a crucial tool in graph visualization. That’s why we’re continually finding ways to better this functionality to visualize your data in an uncluttered, clear and visually appealing way. Released in KeyLines 3.8, sequential layout is the latest of seven layouts in the KeyLines toolkit to bolster your network visualization arsenal.

Sequential layout representing IT network dependencies — A sequential layout of part of an IT network dependency graph

The sequential layout is designed to display data that contains a clear sequence of distinct levels of nodes. It’s good for visualizing data in scenarios where items can be placed in tiers, such as IT infrastructure or management structures, as well as situations where information flows from one level to another, such as financial relationships and blockchains.

In this blog post, we’ll look at a few of the challenges that this kind of layout brings, and explain how we’ve solved them.

Limitations of tree-like layouts

Readers who are familiar with KeyLines will know we already have a hierarchy layout which is often used to display tiered data like management structures. Why is sequential layout different?

The hierarchy layout is designed to work with tree-like datasets, where the number of nodes increases as you ‘flow’ down the tree, resulting in a diverging, branching structure.

A ‘good’ hierarchy layout — The hierarchy layout in KeyLines, showing the branching structure of tree-like data.

However, hierarchy layout is not so good when the data is not tree-like. Below is the same dataset of IT dependencies you saw at the top of this blog. It’s not a tree – it can converge or diverge as you flow from one level to the next. You can see that the hierarchy layout results in crossed links and a poor use of chart space, with some unsightly long links.

Hierarchy layout (left) compared to the sequential layout (right). — Hierarchy layout (left) compared to the sequential layout (right) on the same dataset. Notice that the sequential layout makes better use of the chart space, and minimizes overlapping links.

Let’s look at these challenges – minimizing link crossings, reducing the length of links, and positioning nodes to make better use of chart space – in more detail.

Minimizing link crossings

The most common scenario is that links connect nodes between levels. The sequential layout handles these links in two stages:

First, it places each node at the average position of its neighbors in adjacent levels.
Second, it swaps nodes in each level to reduce the number of link crossings.

In some cases, your data may have links between non-adjacent nodes in the same level, a potentially confusing picture as links may pass behind nodes. In this situation, the sequential layout will enter a third stage, curving the link (‘offsetting’) so that it doesn’t draw behind the nodes, as shown in the example below. The layout chooses whether to offset the link above or below the nodes so as to minimize crossovers.

Offsetting links between nodes in the same level to minimize crossed links — The orange links connect nodes in the same level. The sequential layout applies offsets to some of them, to make a clearer chart.

Positioning of nodes and reducing link length

Once you’ve ordered the nodes in their levels, there is still some freedom to adjust the positioning of nodes to get a visually pleasing result. The spacing option affects how the nodes are distributed within each level and gives very different visual effects. There are three sequential layout spacing options to choose from:

The ‘auto’ option is the most intelligent option. It automatically positions nodes relative to each other based on the links between them, and subject to the link crossing minimization calculation. This helps shorten link lengths while making good use of of the view area. If there are multiple connected components (groups of nodes that are isolated from the rest of the network) they can be nested together to fit nicely into the available space.

Sequential layout with spacing option ‘auto’. If you look closely there are actually two separate ‘components’ to this graph which have been nested together.

The ‘equal’ option positions the nodes at regular intervals to give the chart lots of symmetry. It’s great for conveying a sense of the relative sizes of each level.

Sequential layout with spacing option ‘equal’.

The ‘stretched’ option spaces nodes in each level so that they spread across the entire available width. This is the spacing used in the IT network example at the start of this blog post. It creates a highly organized look which works well for networks with a lot of diagrammatic structure.

Sequential layout with spacing option ‘stretched’.

How can I call sequential layout in my KeyLines app?

Despite its complexity, sequential layout is simple to call from a KeyLines application. Once you have loaded your data, and assigned levels to each node, just call
chart.layout(‘sequential’, {level: ‘levelProp’, spacing: ‘stretched’}). The levelProp string refers to the name of a property on your nodes which contains the level information.

You can pass additional options into this function to customize details of the layout and the transition to it. For example, the spacing option, the layout orientation (down, right, up or left) and the transition animation.