Sequential layout: The best way to handle tiered data

Graph 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. Sequential layout is the latest of the seven layouts our products support 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. It’s also perfect for situations where information flows from one level to another, such as financial relationships and blockchains.

It takes multiple components into account and minimizes link crossings. Custom spacing between levels makes efficient use of the available screen space while using curved links instantly changes the appearance of the chart.

Sequential layout with curved links
Using curved links instantly changes the appearance of the chart.

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.

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’
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 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. You can use the path option (direct, horizontal or vertical) to change the shape of links in a sequential layout. Setting it to horizontal or vertical makes the links follow a curve.

Try it yourself

Ready to give sequential layout a try? Sign up for a free trial here.

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 2020.