Author manuscript, published in "IEEE Vis Week (2012)"

Temporal Navigation in Dynamic Networks

Benjamin Bach∗ Emmanuel Pietriga† Jean-Daniel Fekete‡
INRIA INRIA & INRIA Chile ( CIRIC ) INRIA

A BSTRACT
We present GraphDiaries, an interface for temporal navigation in
dynamic networks with changing topology. Navigation in time is
necessary for the exploration of single network states at different
points in time and to explore higher level changes over periods of
time. GraphDiaries enhances conventional node link diagrams with
staged animated transitions between any time steps and small multi-
ples organized along a timeline, as well as different layout adaption
techniques. GraphDiaries is designed as an extension to other graph
visualization systems and is independent from particular layout al-
Figure 1: Staged transition on a query. From left to right: initial state,
gorithms and other visualization techniques.
element removal (red), layout change, element addition (blue) and
Index Terms: H.5.2 [Information Systems]: Information Inter- final state.
faces and Presentation—User Interfaces;

1 I NTRODUCTION all changes between them. Solutions that directly show differences
hal-00781503, version 1 - 27 Jan 2013

between graphs [11] are limited either in the number of graphs they
A major aspect of dynamic networks is their changing topology as
compare or do increase, rather than decrease, visual complexity of
vertices and edges are added and removed over time. To under-
the visualization.
stand low-level changes between individual time steps which may
be expressions of higher-level changes, such as the emergence of 2 D ESIGNING S TAGED T RANSITIONS
clusters or the repetitive behavior of connectivity, effective naviga-
tion in time and appropriate visual feedback is required. This paper In addition to common design goals for animated transitions such
addresses the issue of temporal navigation in dynamic networks by as smoothness, aesthetic criteria and intuitiveness [9], we designed
describing approriate navigation techniques in time and proposing our staged transitions with the following goals in mind.
staged transitions with change highlighting between arbitrary time Staging transitions allows the user to focus on different parts of
steps. Both are presented as parts of an interface named GraphDi- the transition separately and prevents her from being overloaded
aries that integrates additional features such as layout adaption and with information shown at the same time. Node link diagrams are
dynamic node queries. highly complex, when large and dense. Three low-level changes
Animation is a common means to convey changes in a user in- between two time steps which can be shown in different stages are:
terface [12, 7]. Staged animations for graphs are described by element addition, element change and element removal.
Friedrich and Eades [10]. They first remove graph elements, trans- Controllability is about adjusting animation speed, freely “mov-
form the entire graph so that nodes are as close to their new position ing” within the transition, interrupting it at any time and adapting
as possible (scale, rotate, and translate the layout), move each node how the information is shown.
individually to its new position, and finally show new elements. Visualization independence is required to integrate the transi-
While appearing nodes grow or fade in and vanishing nodes shrink tions into existing node-link diagram visualizations. Hence, it must
or fade out, links are not animated. Although node movements can not interfere with the visual encoding of the network (shape, color
be tracked, it is difficult to track many changes happening to the etc..) or rely on a particular layout.
topology, especially if the network is large and the graph contains Transitions consist of 3 stages: 1) Remove Elements - nodes and
unconnected components. Layout stabilization is another major edges which are to be removed are first highlighted with red halos,
problem when visualizing dynamic graphs [6]. Our transitions aim and then faded out (300ms), 2) Transform Layout and Elements -
to bridge the gap between different layouts eventually supporting color, shape and position of surviving nodes are animated using a
local optimized layouts instead of global consensus layouts. slow-in/slow-out animation (600ms). 3) Add Elements - new nodes
In contrast to other approaches to visualizing dynamic networks and edges are faded in, accompanied by blue halos vanishing after
such as Small multiples [8, 4] aggregation into a single image [5] the elements have appeared (300ms). We opted for a fairly long du-
and 3D representation of the graph time cube [3], animations allow ration of 1.2 seconds because each step conveys a lot of information
to give a very detailed view of any time step and embody differ- that must be understood by the user. Existing animations between
ence/change visualization in the transition itself. A common way network states do not emphasize changes explicitly, their duration
to move between time steps is to use a time range slider with dis- can be shorter. Users can manually stop the animation or disable
crete marks [2, 1]. However, navigation remains rather linear in animated transitions on demand.
time and comparison between arbitrary time steps requires to replay
3 T EMPORAL N AVIGATION
∗ e-mail: [email protected] Staged transitions are designed to convey changes between any two
† e-mail:[email protected] time steps. Now we define methods for inter (across different time
‡ e-mail:[email protected] steps) and intra time steps navigation (within a transition).
Inter Time Step Navigation — Using the left/right arrow keys
allows navigation between adjacent time steps. Clicking on a
thumbnail in the timeline directly moves to the associated time step.
All these interactions trigger a staged transition.
 below the main time line in order to create customized timelines
by taking only specific time steps into account for navigation and
difference highlighting.

5 E VALUATION
We conducted a controlled experiment, comparing our staged an-
imated transitions and temporal navigation (ST) to existing solu-
tions: no animated transitions (NA), and a simple non-staged ani-
mation without change highlighting between time steps (SA). An-
imations were not possible between non-adjacent time steps. We
asked 18 participants (within-subject design) to perform three high-
level tasks upon the observation of changes in cluster size (When is
cluster C largest? How does the size of cluster C behaves over
time? and Which cluster changes the most over time?). Each
participant spent approximately one hour on the experiment. We
Figure 2: GraphDiaries interface: a) graph view with colored node
measured time and error, and asked participants to rank the tech-
queries, b) timeline, c) layout stabilization slider, d) navigation history,
niques according to their preferences. Results suggest significant
e) query panel, f) settings for difference visibility, and g) time control
panel.
benefits for staged transitions in terms of error rate (ST=11.6%,
SA=18.3%, NA=31.6%) without a significant increase in comple-
tion time (ST=20.3s, SA=19.3s, NA=18.4s). Most participants pre-
ferred the transitions and extended navigation techniques: ST was
Intra Time Step Navigation — We provide four options to con- ranked as best by 80% of the participants, while NA was ranked last
trol the duration of, and the position within, a single transition so by 72% of them.
that users can adapt it to the current task, either overview, track-
hal-00781503, version 1 - 27 Jan 2013

ing or searching for a particular event related to a graph entity. a) 6 C ONCLUSIONS

Pressing and holding the left mouse button on a thumbnail, or press-
ing and holding an arrow key runs the full, staged transition (Run We described GraphDiaries, a system for effective temporal navi-
to completion). b) Releasing the button or key during the transi- gation in dynamic networks and described staged transitions with
tion interrupts the transition and plays the remaining stages quickly change highlighting between time steps. Change highlighting em-
(200ms), and in parallel (Interrupt and finish). c) Clicking on a phasizes changes and makes it easier to focus on types of changes
thumbnail or quickly hitting an arrow key jumps to the final step as well as areas of change. Although GraphDiaries is independent
without any animation (Skip animations). This can be useful when from any particular layout algorithm, tests with more than 2000
browsing through time steps where the details of changes that occur nodes and 4500 edges show that layout stabilization is crucial, es-
are of lesser importance, as observed in a pilot study. d) While all pecially if user-driven adaption is requried.
the previous methods mentioned are based on fixed durations, con- R EFERENCES
trolling the pace with a time slider can be much more effective in
exploring transitions (Interact). Between each time step, the time [1] J. Ahn, M. Taieb-Maimon, A. Sopan, C. Plaisant, and B. Shneiderman.
slider shows three colored regions which represent the three stages Temporal Visualization of Social Network Dynamics: Prototypes for
of the transition (Figure 2-b). Nation of Neighbors. In LLCS, pages 309–316, 2011.
[2] M. Bastian, S. Heymann, and M. Jacomy. Gephi: An open source
4 U SER I NTERFACE software for exploring and manipulating networks. In Proc. ICWSM,
2009.
GraphDiaries is a set of components built in a consistent manner to [3] U. Brandes and S. R. Corman. Visual unrolling of network evolu-
effectively support time navigation. It consists of six complemen- tion and the analysis of dynamic discourse. Information Visualization,
tary components (Figure 2). The Graph View (a) shows the net- 2(1):40–50, Mar. 2003.
work as a node-link diagram, at the time step currently selected in [4] M. Burch, C. Vehlow, F. Beck, S. Diehl, and D. Weiskopf. Paral-
the Timeline (b). The Timeline shows small multiples correspond- lel edge splatting for scalable dynamic graph visualization. TVCG,
ing to time steps; it is used for temporal navigation by clicking the 17(12):2344 –2353, dec. 2011.
thumbnails or dragging the slider. The Layout Slider (c) allows to [5] C. Collberg, S. Kobourov, J. Nagra, J. Pitts, and K. Wampler. A system
adjust the stabilization of the layout between a globally optimized for graph-based visualization of the evolution of software. In Proc.
layout and optimal layout per time step. The History Panel (d) SoftVis, SoftVis ’03, pages 77–86. ACM, 2003.
provides a list of recently-visited time steps in reverse chronolog- [6] S. Diehl and C. Görg. Graphs, they are changing - dynamic graph
ical order, and the Query Panel (e) allows to manage groups of drawing for a sequence of graphs. In M. Goodrich and S.G.Kobourov,
nodes for tracking over time. When grouped in a query, nodes are editors, LNCS, volume 2528, pages 23–31. Springer, 2002.
highlighted by a convex polygon (Figure 1). Queries can be refined [7] P. Eades and M. L. Huang. Navigating clustered graphs using force-
at any point in time and are considered a flexible means to track directed methods. Graph Algorithms and Applications, 4(3):157–181,
2000.
clusters and subgraphs. The Time Control Panel (g) provides ad-
[8] M. Farrugia, N. Hurley, and Q. Aaron. Exploring temporal ego net-
ditional temporal navigation features, such as looped animations,
works using small multiples and tree-ring layouts. In Proc. ACHI,
speed adaption and temporal aggregation along common time units.
pages 23–28, 2011.
Changing temporal granularity updates the thumbnails on the time- [9] C. Friedrich and P. Eades. The Marey Graph Animation Tool Demo.
line and triggers an animation to adapt the graph view (Figure 2-g). In J. Marks, editor, Proc. Graph Drawing, volume 1984 of Lecture
Each thumbnail in the Timeline panel shows the network at its Notes in Computer Science, pages 95–107. Springer, 2001.
associated time step overlaid with a difference highlighting that re- [10] C. Friedrich and P. Eades. Graph drawing in motion. Graph Algo-
veals differences from the previous time step. Consistent with the rithms and Applications, 6(3):353–370, 2002.
transitions, removed elements are colored red, new ones blue and [11] M. Hascoët and P. Dragicevic. Interactive Graph Matching and Visual
the remainder gray. Checkboxes in the control panel (Figure 2-f) Comparison of Graphs and Clustered Craphs. In Proc. AVI, 2012.
allow to specify the type of change visible in order to focus on spe- [12] J. Heer and G. Robertson. Animated transitions in statistical data
cific types of changes. Thumbnails can be dragged to other tracks graphics. TVCG, 13:1240–1247, November 2007.