This is part one of two blog posts on visualization techniques for temporal graph data. Here’s part 2.
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.
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:
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.
A possibly more sophisticated option is to create time slices of the network and present them all together, with nodes connected across the slices:
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.
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.
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.
After much debate, design and development, we settled on a hybrid approach combining small multiples, animation, histograms and a time slider:
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:
It’s fully integrated with a network chart and uses an automated layout (‘tweak’) to animate data evolution, to the desired degree of granularity:
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.
Read more blog posts about KeyLines.