Methods for visualizing dynamic networks

10th February, 2015

This is part one of two blog posts on visualization techniques for temporal graph data. Here’s part 2.


The challenge of visualizing the evolution of connected data through time has kept academics and data scientists busy for years. Finding a way to convey the added complexity of a temporal element without overwhelming the end user with it is not easy.

Whilst building the KeyLines Time Bar – our component for visualizing dynamic networks – we spent a great deal of time appraising the existing temporal visualization options available.

In this blog post, we’ve collated some of the most popular ways of visualizing dynamic graphs through time. Next week, we’ll share some of the more creative and unusual options.

Approach 1: Small Multiples

This is a common way to represent the evolution of a network. It generally involves taking snapshots of the network at different points in time, and comparing them side-by-side:

small multiples time visualization
Small multiples time visualization – Rufiange, 2013

The small multiples approach can be enhanced with some animation (like a flick-book) and using visual effects to highlight nodes and links joining or leaving the network.

This example shows new chart entities in green and expiring ones in red. Nonetheless, it feels more like a ‘spot the difference’ puzzle than intuitive network visualization. The time taken to cross-reference between versions, and the lack of granularity, limits its effectiveness.

Approach 2: Time slices

A possibly more sophisticated option is to create time slices of the network and present them all together, with nodes connected across the slices:

Time slices visualization
Time slices visualization – Federico, 2011

This way is easier to track the progress of individual nodes, but… We’re back to 3D networks. Oh dear.

The topologies become very distorted in this view, making wider trends almost impossible to find. This example also uses labeling, which goes some way to improving the readability, but not much.

Approach 3: GraphDiaries

Graph diaries – Bach, 2013

This approach stands out by having the catchiest name, but is otherwise quite challenging. It uses color-coding to represent appearing and disappearing nodes. The approach definitely gets bonus points by keeping time and network both in a single view – something we were keen to do with the KeyLines Time Bar.

Approach 4: Time Slider

Time slider visualization
Time slider visualization – Ahn, 2010

This is one of the most advanced approaches we found. It combines a time slider, histogram and color-coding. The color of the histogram bars corresponds with the colors on the network chart (red bar refers to red nodes, etc) and the user can navigate through time with a slider along the bottom of the screen.

There are several elements of this design that are highly intuitive: The node-link network, the histogram with time slider. Also, the user can observe network changes without having to cross-reference between different screens.

Our Approach?

After much debate, design and development, we settled on a hybrid approach combining small multiples, animation, histograms and a time slider:

The KeyLines timebar

We think we landed on a design that is clear, clean and intuitive. Network and sub-network trends can be viewed in a single component, with simple controls for filtering and navigation:

Time bar controls
Time bar controls

It’s fully integrated with a network chart and uses an automated layout (‘tweak’) to animate data evolution, to the desired degree of granularity:

Watching the evolution of networks through time
Watching the evolution of networks through time

The Time Bar left beta testing at the end of 2014, and is already being used in production by a number of KeyLines customers. If you have any feedback on the design, or would like to give it a try for yourself, get in touch – we’d love to hear from you.

Subscribe to our newsletter

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