The challenge of time-based data visualization has kept academics and data scientists busy for years.
We’ve covered why you should visualize networks before. But how do you give users the ability to filter and summarize time-based connected data without overwhelming them? What’s the clearest, most intuitive way to reveal how events unfold? What if the time element holds the insight that unlocks everything else?
This blog post explores some of the most popular ways of visualizing dynamic networks through time. We’ll see how the time bar evolved, and what makes it so effective.
We’ll also introduce the next generation in dynamic visualization: KronoGraph, the toolkit for building fully-interactive timelines directly from your data.
Have you tried our data visualization toolkits yet?
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:
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. It feels more like a ‘spot the difference’ puzzle than intuitive network visualization. The time it takes to cross-reference between versions, and the lack of granularity, limits its effectiveness.
Approach 2: Time slices
A more sophisticated option is to create time slices of the network and present them all together, with nodes connected across the slices:
This way makes it 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
This approach stands out by having the catchiest name, but is otherwise quite challenging. It uses color-coding to represent nodes as they appear and disappear. The approach definitely gets bonus points for keeping time and network both in a single view – something we were keen to do with the time bar.
Approach 4: Time Slider
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 navigates through time with a slider along the bottom of the screen.
There are elements of this design that are highly intuitive: the node-link network, and 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, area plots, histograms and a time slider.
We think we landed on a design that is clear, clean and intuitive. Users can view network and sub-network trends in a single component, with simple controls for filtering and navigation:
Stacked bars in your time bar’s histogram show how different types of activity evolve, while area plots give a more fluid display of what’s happening in the network:
The time bar is fully integrated with the network chart. Users can explore chart items and watch the time bar update, or filter events in the time bar to drive changes in the chart. There are also animation controls to reveal data evolution.
A new era in visualizing time-based data: KronoGraph
We’ve seen how the time bar gives users a powerful way to filter and summarize the time-based data in their networks. It’s one of the key features of our graph visualization toolkits.
We also recognized the need to give investigators a new way of understanding how events unfold over time, so we created KronoGraph. It’s a toolkit for building fully-interactive timeline visualizations directly from your data.
Timelines transition smoothly and look good at every scale – from a single event to an aggregated heatmap view of thousands.
You can even integrate it with ReGraph and KeyLines to explore your graph data in a completely new way.
Need to visualize dynamic networks?
Want to discover how our toolkits can help your users understand their dynamic networks better? Request a free trial
This post was originally published some time ago. It’s still popular, so we’ve updated it with fresh content to keep it useful and relevant.