TSINGHUA SCIENCE AND TECHNOLOGY

ISSNll1007-0214ll01/12llpp1-16
Volume 17, Number 4, August 2012

Simple Algorithms for Network Visualization: A Tutorial∗

Michael J. McGuffin∗∗

Department of Software and IT Engineering, École de technologie supérieure, Montréal, H3C 1K3, Canada

Abstract: The graph drawing and information visualization communities have developed many sophisticated tech-
niques for visualizing network data, often involving complicated algorithms that are difficult for the uninitiated to
learn. This article is intended for beginners who are interested in programming their own network visualizations, or
for those curious about some of the basic mechanics of graph visualization. Four easy-to-program network layout
techniques are discussed, with details given for implementing each one: force-directed node-link diagrams, arc
diagrams, adjacency matrices, and circular layouts. A Java applet demonstrating these layouts, with open source
code, is available at http://www.michaelmcguffin.com/research/simpleNetVis/. The end of this article also briefly
surveys research topics in graph visualization, pointing readers to references for further reading.

Key words: network visualization; graph visualization; graph drawing; node-link diagram; force-directed layout; arc
diagram; adjacency matrix; circular layout; tutorial

may wish to implement their own network visualiza-

Introduction tions. This may be to implement a visualization on a
new computing platform, or to integrate a visualization
Networks are increasingly encountered in numer- within a larger software application. It may also be to
ous fields of study. A wide variety of situations learn the details of network visualizations, possibly as
can be modelled using networks (i.e., graphs), and the first step of a research project. Finally, certain visu-
many data sets are most naturally interpreted and de- alization techniques, such as adjacency matrix visual-
picted as networks. Comprehensive surveys of tech- ization, are poorly supported by existing packages, but
niques for network visualization are available[1, 2] , and may be implemented from the ground up in new soft-
an entire discipline called graph drawing has ma- ware.
tured, with its own annual conference and associated For those wishing to implement their own visualiza-
surveys[3, 4] . Several feature-rich software packages tions, the breadth of existing surveys of techniques[1–4] ,
for network visualization are freely available, including covering hundreds of references, may be daunting. Fur-
Tulip [5, 6] (http://www.tulip-software.org/), Graphviz thermore, most graph drawing algorithms that compute
(http://www.graphviz.org/), Gephi (http://gephi.org/), the positions of nodes in a visualization are non-trivial
Pajek [7] (http://pajek.imfm.si/), and Cytoscape [8] to implement, and some require that multiple papers be
(http://www.cytoscape.org/). studied before the details of a single algorithm are un-
Despite the availability of such software, researchers, derstood.
students, and others who are competent at programming Fortunately, there are some basic network visualiza-
Received: ; Accepted:
tion algorithms that are easy to understand and imple-
∗ Supported by the Natural Sciences and Engineering Re- ment. This article discusses such algorithms, and gives
search Council of Canada sufficient detail for a competent programmer to imple-
∗∗ To whom correspondence should be addressed. ment them. Contrary to current textbooks on visual-
E-mail: michael.mcguffin@etsmtl.ca Tel: +1-514-685-6514 ization, this article presents a synthesis of matrix and
2 Tsinghua Science and Technology, August 2012, 17(4): 000-000

non-matrix approaches for visualizing networks, show- The most common graphical representation of a net-
ing how they can be combined, and how an ordering al- work is a node-link diagram, where each node is shown
gorithm (the barycenter heuristic) can be used for both. as a point, circle, polygon, or some other small graph-
After presenting simple algorithms for computing ical object, and each edge is shown as a line segment
different graph layouts, Section 6 presents simple met- or curve connecting two nodes. Many sophisticated al-
rics for network analysis. Finally, Section 7 surveys re- gorithms exist for computing the positions of nodes and
search topics in graph visualization with references to edges in such diagrams, such as the Sugiyama-Tagawa-
examples in the literature, to serve as launching points Toda algorithm [9] , which positions nodes on the levels
for researchers and students. of a hierarchical layout. We will instead consider a class
of algorithms based on force-directed layout [10, 11] for
1 Force-Directed Layout of Node-Link Dia- positioning the nodes. We imagine the nodes as physi-
grams cal particles that are initialized with random positions,
but are gradually displaced under the effect of various
forces, until they arrive at a final position. The forces
are defined by the chosen algorithm, and typically seek
to position adjacent nodes near each other, but not too
near.
Specifically, imagine that we simulate two forces:
a repulsive force between all pairs of nodes, and a
spring force between all pairs of adjacent nodes. Let
d be the current distance between two nodes, and de-
fine the repulsive force between them to be Fr = Kr /d 2
(a definition inspired by inverse-square laws such as
Coulomb’s law), where Kr is some constant. If the
nodes are adjacent, let the spring force between them be
Fs = Ks (d − L) (inspired by Hooke’s law), where Ks is
the spring constant and L is the rest length of the spring
(i.e., the length “preferred” by the edge, ignoring the
repulsive force).
To implement this force-directed layout, assume that
the nodes are stored in an array nodes[], where each
element of the array contains a position x, y and the net
force force_x, force_y acting on the node. The
forces are simulated in a loop that computes the net
Fig. 1 Force-directed node-link diagrams of a 43-node, 80-
forces at each time step and updates the positions of
edge network. Top: a low spring constant makes the edges
more flexible. Bottom: a high spring constant makes them
the nodes, hopefully until the layout converges to some
more stiff. usefully distributed positions. Fig. 1 shows the results
of many iterations of such a loop. The inner body of the
We use the term network as a synonym for graph, which simulation loop could be implemented like this:
can be defined as an ordered pair (N, E) of a set N of
1 L = ... // spring rest length
nodes and a set E of edges. In an undirected graph, 2 K_r = ... // repulsive force constant
each edge is an unordered pair of nodes, i.e., E ⊆ 3 K_s = ... // spring constant
4 delta_t = ... // time step
{{x, y}|x, y ∈ N}. Two nodes n1 , n2 ∈ N are adjacent if 5
and only if there exists an edge {n1 , n2 } ∈ E, in which 6 N = nodes.length
7
case n1 and n2 are neighbors. The degree of a node is
8 // initialize net forces
the number of neighbors it has. In a directed graph, 9 for i = 0 to N-1
each edge is an ordered pair, i.e., E ⊆ {(x, y)|x, y ∈ N}, 10 nodes[i].force_x = 0
11 nodes[i].force_y = 0
and the edge (x, y) is distinct from the edge (y, x). We 12
will be concerned primarily with undirected graphs. 13 // repulsion between all pairs
 Michael J. McGufffin: Simple Algorithms for Network Visualization: A Tutorial 3

14 for i1 = 0 to N-2 37.

15 node1 = nodes[i1]
The computation of the repulsive and spring forces
16 for i2 = i1+1 to N-1
17 node2 = nodes[i2] is inspired by physical forces (Coulomb’s law and
18 dx = node2.x - node1.x Hooke’s law). However, for simplicity we do not store
19 dy = node2.y - node1.y
20 if dx != 0 or dy != 0
a velocity for each node, and the forces serve only to
21 distanceSquared = dx*dx + dy*dy update the positions of nodes (lines 50-61) in a quasi-
22 distance = sqrt( distanceSquared )
physical manner, without acceleration.
23 force = K_r / distanceSquared
24 fx = force * dx / distance If the time step delta_t (used at lines 53, 54) is too
25 fy = force * dy / distance small, many iterations will be needed to converge. On
26 node1.force_x = node1.force_x - fx
27 node1.force_y = node1.force_y - fy
the other hand, if the time step is too large, or if the net
28 node2.force_x = node2.force_x + fx forces generated are too large, the positions of nodes
29 node2.force_y = node2.force_y + fy
may oscillate and never converge. Line 56 imposes a
30
31 // spring force between adjacent pairs limit on such movement. As a minor optimization, line
32 for i1 = 0 to N-1 56 compares squares (i.e., displacementSquared
33 node1 = nodes[i1]
34 for j = 0 to node1.neighbors.length-1
> MAX_DISPLACEMENT_SQUARED rather than
35 i2 = node1.neighbors[j] displacement > MAX_DISPLACEMENT), to avoid
36 node2 = nodes[i2]
the cost of computing a square root (unless the if
37 if i1 < i2
38 dx = node2.x - node1.x succeeds).
39 dy = node2.y - node1.y A minor improvement to the above pseudocode
40 if dx != 0 or dy != 0
41 distance = sqrt( dx*dx + dy*dy )
would be to detect if the distance between two nodes
42 force = K_s * ( distance - L ) is zero (by adding an else clause to the if statement
43 fx = force * dx / distance
at line 20), and in that case to generate a small force
44 fy = force * dy / distance
45 node1.force_x = node1.force_x + fx between the two nodes in some random direction, to
46 node1.force_y = node1.force_y + fy push them apart. Without this, if the two nodes happen
47 node2.force_x = node2.force_x - fx
48 node2.force_y = node2.force_y - fy
to have the same neighbors, they may remain forever
49 “stuck” to each other.
50 // update positions
A user might interact with a force-directed layout by
51 for i = 0 to N-1
52 node = nodes[i] selecting and moving nodes with their mouse, or by us-
53 dx = delta_t * node.force_x ing sliders to interactively adjust the values of L, K_r,
54 dy = delta_t * node.force_y
55 displacementSquared = dx*dx + dy*dy
K_s, or delta_t. It is not necessarily useful, how-
56 if ( displacementSquared ever, to allow the user to adjust K_r and K_s indepen-
> MAX_DISPLACEMENT_SQUARED )
dently. There are infinitely many pairs of (Kr , Ks ) val-
57 s = sqrt( MAX_DISPLACEMENT_SQUARED
/ displacementSquared ) ues that cause the layout to converge to the same final
58 dx = dx * s “shape” (i.e., the same angles between edges, differing
59 dy = dy * s
60 node.x = node.x + dx
only in edge lengths). A simpler user interface would
61 node.y = node.y + dy allow the user to change a single parameter correspond-
ing to a kind of ratio of the strength of the two forces.
Lines 8 through 61 would be inside a loop that repeats Taking Kr /Ks as this ratio is not ideal, however, because
hundreds or thousands of times, causing the nodes to such a ratio is not dimensionless, and the final shape of
move toward their final positions. the layout will depend on both Kr /Ks and L.
In the repulsive computation step (lines 13-29), we Fortunately, we can rewrite the force equations as
need to visit every pair of nodes once. Note, however, Fr = Kr /d 2 = Kr′ /(d/L)2 , and Fs = Ks (d − L) = Ks′ (d −
that the pair of nodes corresponding to i1=3, i2=7 L)/L, yielding the constants Kr′ and Ks′ both in force
would be the same as that corresponding to i1=7, units. Then, the ratio R = Kr′ /Ks′ = Kr /(Ks L3 ) is dimen-
i2=3. Hence, to avoid visiting the same pairs twice, sionless, and can be controlled by the user with a single
line 16 begins iterating at i2=i1+1 rather than i2=0, slider as a way of controlling the final shape of the lay-
to ensure i1 < i2. out. This final shape will depend only on R and be inde-
Similarly, in the spring force step (lines 31-48), we pendent of L, which can also be controlled by the user to
avoid visiting the same adjacent pairs twice with line change the scale of the layout. So, given any values for
4 Tsinghua Science and Technology, August 2012, 17(4): 000-000

R (chosen by the user), L (possibly also chosen by the

user), and Kr (having some hardcoded value), the soft-
ware could compute Ks = Kr /(RL3 ) and simulate the
forces using the updated constants to converge to a new
layout. Fig. 1, top and bottom, show the result of a high
and low R value, respectively. (For concreteness, Fig. 1,
top, was produced with L = 50, K_r = 6250, K_s = 1,
delta_t = 0.04, R = 0.05.)
Many variations on the forces used in the layout are
possible. For example, rather than an inverse-square re-
pulsion Fr = Kr /d 2 , we could define Fr = Kr /d p with a
variable exponent p. It could also be interesting to ex-
periment with a tangential force that pushes apart the
neighbors of each node n, to distribute them evenly
around n (compare this idea to [12] ). As another ex-
ample, Noack[13] proposes a model depending on the
degree of the nodes: nodes with high degree repel other
nodes more strongly, helping to spread apart clusters of
nodes.
In the pseudocode above, the computation of repul-
sive forces is a bottleneck, since it requires O(N 2 ) time, Fig. 2 Force-directed node-link diagram of a random 50-
where N is the number of nodes. This bottleneck can node, 200-edge graph.
be eliminated by various means. For example, we
could eliminate the repulsive force, and instead simu-
late springs of length L between all adjacent nodes, as picting networks that address these problems.
well as springs of length 2L between all nodes that are
2 Arc Diagrams and Barycenter Ordering
two edges apart, and possibly springs of length 3L be-
tween nodes that are three edges apart, etc., up to some It is sometimes useful to layout the nodes of a network
limit. (This is closely related to the approach of Ka- along a straight line, in what might be called lineariza-
mada and Kawai[14] and Gansner et al.[15] .) The extra tion. With such a layout, edges can be drawn as circular
springs would help to spread apart the network, as did arcs (Figure 3), yielding an arc diagram. This layout
the original repulsive forces. As long as the number of leaves much room to the right of the nodes, useful for
edges is not too high, and there aren’t too many springs, long labels or other information to show for each node.
the computation time may be much less than O(N 2 ). The nodes may also be sorted in different ways.
Also, in the above pseudocode, it is unclear how to Arc diagrams were independently discovered and
choose the best value for delta_t. The GEM[16] al- proposed by Wattenberg [17] as a way of visual-
gorithm speeds up convergence by decreasing a “tem- izing repeating substrings within a string of data,
perature” parameter as the layout progresses, allowing such as repeating phrases within a piece of music
nodes to move larger distances earlier in the process, (http://www.bewitched.com/song.html). However, as
and then constraining their movements progressively to- with several other visualization techniques, an earlier
ward the end. example can be found in a single figure of Bertin’s work
Fig. 2 shows a force-directed layout generated for a [18] , that shows a network with nodes on a linear layout

relatively small random graph. As can be seen, the mul- and edges drawn as 180-degree arcs. (Interestingly, in
tiple crossings of edges can make it unclear when cer- Wattenberg’s work, the thickness of arcs is varied, to
tain edges pass close to a node or are connected to a show the length of substrings.)
node. Also, in such layouts where the nodes are rather It is important that the arcs in the diagram all cover
closely packed, there isn’t much room left to display the same angle, such as 180 degrees. This way, an arc
labels or other information associated with each node. between nodes n1 and n2 will extend outward by a dis-
The following sections present alternative ways of de- tance proportional to the distance between n1 and n2 ,
 Michael J. McGufffin: Simple Algorithms for Network Visualization: A Tutorial 5

might be sorted alphabetically, or by size, time, etc.,

helping the user to analyze the network. Furthermore,
every node has a degree, as well as additional metrics
that can be computed (later we discuss how to compute
the clustering coefficient and coreness of each node),
and any of these might be used to sort the nodes within
the linear ordering of an arc diagram.
We might also order the nodes to reduce the length
of the arcs, making the topology of the network eas-
ier to understand. There are many algorithms for com-
puting such an ordering (see Liiv [19] and section 4.2
of Henry [20] ), however, we will discuss an easy-to-
program technique called the barycenter heuristic [9, 21] .
The barycenter heuristic is an iterative technique where
we compute the average position (or “barycenter”) of
the neighbors of each node, and then sort the nodes by
this average position, and then repeat. Intuitively, this
Fig. 3 Arc diagrams of a 43-node, 80-edge network. Left:
with a random ordering and 180-degree arcs. Middle: after should move nodes closer to their neighbors, making
applying the barycenter heuristic to order the nodes. Right: the arcs shorter.
after changing the angles of the arcs to 100 degrees. To implement a reordering algorithm, one approach
might be to reorder the elements of the nodes[] ar-
ray used in the previous section. However, this may
making it easier to disambiguate the arcs. However, it
not be convenient because the edges from nodes to
is not necessary that the arcs cover a 180 degree angle.
their neighbors are typically stored as pointers, refer-
Figure 3, right, shows an arc diagram where all arcs
ences, or indices (in the previous section, indices within
cover 100 degrees.
nodes[].neighbors[]), and these would need to
To program a subroutine that draws an arc covering
be updated if the nodes are relocated in memory. Fur-
angle θ connecting points A = (x, y1 ) and B = (x, y2 ),
thermore, if each element of the nodes[] array con-
we need to find the center C of the arc. Figure 4 shows
tains additional data (like a name, color, or other meta-
a right triangle connecting A, C, and the midpoint be-
data for the node), then reordering the array might in-
tween A and B. The length of one side of the triangle is
volve moving a lot of data around the memory.
d = |y1 − y2 |/2, and we also have tan θ /2 = d/e, hence
Instead, we will assume that the nodes[] array
C = (x + e, (y1 + y2 )/2) where e = d/(tan θ /2).
is fixed, and use a second data structure to store
the current ordering of nodes to use for the arc di-
agram. Let this second data structure be an array
orderedNodes[], having one element for each
node. We will use the term index to refer to a node’s
fixed location within nodes[], and position to refer to
the node’s current location within orderedNodes[].
Each element of orderedNodes[] will store
an index and an average. For example,
if orderedNodes[3].index == 7, then
orderedNodes[3] corresponds to nodes[7],
Fig. 4 An arc covering angle θ , with center C. and nodes[7] is to be displayed at position 3 in
the arc diagram. To find the index corresponding to
The nodes within an arc diagram might be sorted in a given position, we can simply perform a look-up in
various ways. For example, if each node has an asso- orderedNodes[]. To perform an inverse look-up,
ciated label, and represents an object with a size, time- we define a function that computes the position p of a
stamp, or other attribute, the nodes in the arc diagram node given its index i:
6 Tsinghua Science and Technology, August 2012, 17(4): 000-000

function positionOfNode( i ) implementation of sort (such as qsort in C, or

for p = 0 to N-1
Arrays.sort() in Java) that uses a client-defined
if orderedNodes[p].index == i
return p comparator to determine which of a pair of array el-
ements should appear before the other. In our case,
Note that this function performs a linear-time search. our comparator should of course compare the values
A slightly more complicated, but much faster, imple- of average for any two given elements to determine
mentation would cache the positions within the ele- their order.
ments of nodes[] and lazily update them: The linear arrangement of nodes in an arc diagram
function positionOfNode( i ) has many advantages. As already mentioned, there is
if orderedNodes[ nodes[i].position ].index != i
// The cached position is not valid.
room to the right of each node for a long text label, if
// Update ALL the cached positions desired. The space to the right of nodes can also be used
// so they will be valid next time.
to display small graphics, such as line charts for each
for p = 0 to N-1
nodes[ orderedNodes[p].index ].position = p node, possibly to show a quantity associated with the
return nodes[i].position node that evolves with time. TimeArcTrees [22] show
Given either implementation above of changes in a graph over time by drawing multiple arc
positionOfNode(), we can implement the diagrams, each one at a different time, with the time axis
inner body of the barycenter heuristic like this: progressing perpendicular to the layout axis of each arc
diagram. Arc diagrams can also be incorporated as an
1 // compute average position of neighbors
2 for i1 = 0 to N-1
axis within a larger graphic or visualization, as in [23] .
3 node1 = nodes[i1] Also, as mentioned, the nodes within an arc diagram
4 p1 = positionOfNode(i1) can be sorted in different ways, which can be useful
5 sum = p1
6 for j = 0 to node1.neighbors.length-1 for seeing relationships between nodes with specific at-
7 i2 = node1.neighbors[j] tribute values.
8 node2 = nodes[i2]
9 p2 = positionOfNode(i2)
Despite the advantages of arc diagrams, and the room
10 sum = sum + p2 available to draw labels beside nodes, if there are too
11 orderedNodes[p1].average = sum many edges that cross each other, it becomes difficult to
/ ( node1.neighbors.length + 1 )
12 read the edges. The next section presents an alternative
13 // sort the array according to the values of average visualization technique that eliminates edge crossings.
14 sort( orderedNodes, comparator )

Lines 1 through 14 would be inside a loop that it- 3 Adjacency Matrix Representations
erates several times, hopefully until convergence to a
near-optimal ordering. Figure 3, middle, shows an arc An adjacency matrix (Figure 5, top) contains one row
diagram after several iterations of the barycenter heuris- and one column for each node of a network. Given
tic to improve the ordering of nodes, thereby reducing two nodes i and j, the cells located at (i, j) and ( j, i)
the length of arcs with respect to Figure 3, left. in the matrix contain information about the edge(s) be-
In practice, rather than converging, the algorithm tween the two nodes. Typically, each cell contains a
sometimes enters a cycle. Thus, a limit on the num- boolean value indicating if an edge exists between the
ber of iterations should be imposed, stopping the loop two nodes. (In the figures in this article, a true boolean
if the limit is reached (one rule of thumb is to limit the value is shown as a black, filled-in cell.) If the graph
number of iterations to kN, where N is the number of is undirected, the matrix is symmetric, i.e., the two cells
nodes and k is a small positive constant). Simple ways (i, j) and ( j, i) correspond to the same edge. If the graph
to improve the algorithm would be to (1) detect if it has is directed, however, the matrix is not symmetric.
converged to an ordering that does not change with ad- Visualizing a network as a matrix has the advantage
ditional iterations, and in such a case stop the loop; (2) of eliminating all edge crossings, since the edges cor-
detect cycles, and similarly stop the loop. respond to non-overlapping cells. However, in such a
Line 14 of the pseudocode sorts the contents of visualization, the ordering of rows and columns greatly
orderedNodes[] according to a comparator influences how easy it is to interpret the matrix. Fig-
defined by the calling code. Typical program- ure 5, top, has a random ordering, whereas Figure 5,
ming environments provide an efficient O(N log N) bottom, has had its rows and columns ordered according
 Michael J. McGufffin: Simple Algorithms for Network Visualization: A Tutorial 7

to the same barycenter heuristic presented in the previ-

ous section. Interestingly, by bringing nodes “closer”
to their neighbors with the barycenter heuristic, this
pushes the edges (filled-in matrix cells) closer to the di-
agonal of the matrix, making certain patterns appear in
the positions of the cells.
Certain subgraphs (subsets of nodes and edges in
the graph) correspond to easy-to-recognize patterns in
the adjacency matrix, given an appropriate ordering of
rows and columns. Figure 6 shows that cliques (sub-
graphs with all possible edges connecting the nodes)
correspond to square “blocks” of filled-in cells along
the matrix diagonal (with only the cells on the diag-
onal not filled in, since edges do not connect a node
to itself). Furthermore, each biclique (pair of subsets
of nodes with edges connecting each node in one sub-
set with each node in the other subset) corresponds to
two filled-in rectangular blocks of cells, and each clus-
ter (subset of nodes interconnected by many edges) is
recognizable as a set of filled cells along the matrix di-
agonal. Finally, the degree of a node is shown by the
number of filled cells within the column or row corre-
sponding to the node, as shown in Figure 5 where the
degree of the highlighted node “26” is 5.
Note that the ordering in Figure 5, bottom, was gener-
ated with the barycenter heuristic, whereas that in Fig-
ure 6 was chosen manually, to make all the desired pat-
terns visible. The visibility of patterns is very sensitive
to ordering, and the barycenter heuristic does not neces-
sarily make all such patterns visible. Worse, there may
occur cases where no single ordering makes all the pat-
terns in a network visible at the same time.
Despite these problems, Ghoniem et al. [24] demon-
strated experimentally that adjacency matrices allow
certain graph analysis tasks to be performed better than
with node-link diagrams. However, they also found
that tasks related to finding paths between nodes were
more difficult with adjacency matrices. Subsequently,
Fig. 5 Adjacency matrix visualizations of a 43-node, 80- Henry and Fekete [25] and Shen and Ma [26] proposed
edge network. Top: with a random ordering of rows and visual ways to make paths within a matrix easier to
columns. Bottom: after barycenter ordering and adding arc see. Figure 5, bottom, and Figure 7, show Henry and
diagrams. The multiple arc diagrams are redundant, but re- Fekete’s approach, called MatLink: the matrix is aug-
duce the distance of eye movements from the inside of the mented with arc diagrams drawn along the edges of the
matrix to the nearest arcs.
matrix.
Henry and Fekete’s MatLink visualization also al-
lows users to select a node, and then roll their cursor
over other nodes, causing the shortest path between the
two nodes to be highlighted in response.
Like arc diagrams, adjacency matrices can have infor-
8 Tsinghua Science and Technology, August 2012, 17(4): 000-000

Fig. 6 Patterns corresponding to interesting subgraphs appear along the diagonal of an appropriately ordered adjacency ma-
trix.

mation (such as labels) drawn beside each row or col-

umn. Matrices have the added advantage of also being
able to display information related to each edge within
the cells of the matrix. For example, if the edges are
weighted, this weight can be shown in the color of the
cell. Cells can also contain small graphics or glyphs, as
in Brandes and Nick’s “gestaltmatrix” [27] where each
cell contains a glyph showing the evolution of the edge
over time.
An important disadvantage of using adjacency matri-
ces, however, is that the space they require is O(N 2 )
where N is the number of nodes, as pointed out by
Henry and Fekete [25] . We next present a technique that
allows the labels of nodes to be drawn larger than with
arc diagrams or adjacency matrices, when constrained
to a window of the same size.

4 Circular Layouts

Figures 8 and 9 depict networks by positioning nodes

on the circumference of a circle. As illustrated in Fig-
ure 8, drawing edges as curves rather than straight lines
increases the readability of the drawings. Once again,
the order chosen for the nodes greatly influences how
Fig. 7 MatLink visualization of a random 50-node, 200-
clear the visualization is. The barycenter heuristic can
edge graph, after barycenter ordering.
again be applied to this layout, with a slight modifica-
tion to account for the “wrap around” of the circular
layout.
Let C be the center of the circular layout. To draw
a curved arc between points A and B on the circumfer-
ence, we draw a circular arc that is tangent to the lines
 Michael J. McGufffin: Simple Algorithms for Network Visualization: A Tutorial 9

Fig. 9 Circular layout of a random 50-node, 200-edge

graph, after barycenter ordering.

AC and BC (Figure 10). The center C′ of the arc can be

found by finding the intersection between a line through
A that is perpendicular to AC, and a line through B that
is perpendicular to BC.

Fig. 10 A and B are two nodes connected by the arc drawn

in bold. AC and AC′ are perpendicular, as are BC and BC′ .

To correctly adapt the barycenter heuristic to this lay-

out, consider how to compute the “average position” of
the neighbors of a node. As an example, if one neigh-
Fig. 8 Circular layouts of a 43-node, 80-edge network, be- bor is positioned at an angle of 10 degrees, and an-
fore (top, and bottom left) and after (middle, and bottom other is at an angle of 350 degrees, simply taking the
right) barycenter ordering, with curved (top, and middle) numerical average yields (10 + 350)/2 = 180 degrees,
and straight (bottom) edges. whereas the intuitively correct barycenter is at 0 degrees
(or, equivalently, 360 degrees). So, to correctly compute
the barycenter, we do not compute averages of angles.
Instead, we convert each node to a unit vector in the ap-
propriate direction, add these unit vectors together, and
find the angle of the vector sum. Define the function
10 Tsinghua Science and Technology, August 2012, 17(4): 000-000

angle(p) = p*2*pi/N giving the angle of a node The first row of the table quantifies the space effi-
at position p. Then, the pseudocode for the barycenter ciency of each layout. This is done by assuming that
heuristic becomes each layout is confined to fill the same 1×1 square,
and by calculating the height of the labels on the nodes
1 // compute average position of neighbors
2 for i1 = 0 to N-1 as a function of the number N of nodes. For exam-
3 node1 = nodes[i1] ple, in a node-link diagram, if we assume the nodes
4 p1 = positionOfNode(i1)
5* sum_x = cos(angle(p1))
are distributed uniformly, then each node √ should√ be
6* sum_y = sin(angle(p1)) surrounded by an area of roughly (1/ N) × (1/ N)
7 for j = 0 to node1.neighbors.length-1 within which a label can be displayed without over-
8 i2 = node1.neighbors[j]
9 node2 = nodes[i2] lapping neighboring nodes (although such labels will,
10 p2 = positionOfNode(i2) generally, overlap edges). The height √ of such a label,
11* sum_x = sum_x + cos(angle(p2))
12* sum_y = sum_y + sin(angle(p2))
therefore, will be proportional to 1/ N. The height of
13* orderedNodes[p1].average the labels in the other layouts is always O(1/N), but
14* = angleOfVector(sum_x,sum_y) with different hidden constants. In particular, in an ad-
15
16 // sort the array according to the values of average jacency matrix, the hidden constant is k1 < 1 because
17 sort( orderedNodes, comparator ) margins must be reserved for the row and column la-
bels; and with MatLink, the hidden constant is k2 < k1
The above pseudocode is very similar to the pseu- since even larger margins must be reserved to display
docode given earlier for the barycenter heuristic. The the arcs. Thus, the columns of the above table are or-
only differences appear at lines 5-6 and 11-14, marked dered left-to-right, from best to worst space efficiency
with stars after their line numbers. Line 14 calls a func- in terms of label height.
tion angleOfVector() which simply computes the To explain the second to last row in the above table,
angle of a vector relative to the positive x axis, and can we point out that information such as edge type or edge
be implemented as: weight can be depicted in node-link diagrams and other
function angleOfVector( x, y ) non-matrix layouts by varying the color, thickness, or
hypotenuse = sqrt( x*x + y*y ) opacity of edges. However, this has a limited ability to
theta = arcsin( y / hypotenuse )
if x < 0 convey information. Matrix-based layouts, on the other
theta = pi - theta hand, can display richer information (such as a glyph)
// Now theta is in [-pi/2,3*pi/2]
if theta < 0
for each edge, because an entire cell is available for each
theta = theta + 2*pi edge.
// Now theta is in [0,2*pi] Designers may thus choose a layout from the above
return theta
table based on whatever criteria are most important to
Many improvements to the basic circular layout are them. Generally speaking, node-link diagrams may of-
proposed by Gansner and Koren [28] . In addition, Circos ten be best for showing the topology of the network in
[29] (http://circos.ca) is another visualization technique a clear and simple manner, so long as the network is
that uses a circular layout and curved arcs, though not not too dense. Matrix-based layouts are potentially best
specifically for visualizing network data. for dense networks, since they eliminate all inter-edge
occlusion. Arc diagrams may be best for integration
5 Comparison of Layout Techniques with other visual information, since they can be laid out
along a single axis of a larger diagram. Circular layouts
The following table contrasts the layout techniques ac-
may be best for making labels on the nodes larger than
cording to several criteria:
node-link circular arc adjacency is possible with arc diagrams.
diagram layout diagram matrix MatLink
√
Height of each node’s label O(1/ N) O(π /N) O(1/N) O(k1 /N) O(k2 /N)
A Java applet demonstrating these lay-
(best) (worst) outs, with open source code, is available at
Easy to perceive paths yes somewhat somewhat no somewhat
Avoids edge crossings no no no yes yes http://www.michaelmcguffin.com/research/simpleNetVis/.
Avoids ambiguity from edges no yes yes yes yes
passing close to nodes
Can depict an ordering of nodes no yes yes yes yes
Can depict information somewhat somewhat somewhat yes yes
about each edge
Node labels all have the same yes no yes yes yes
orientation, for easier reading
 Michael J. McGufffin: Simple Algorithms for Network Visualization: A Tutorial 11

6 Elementary Node Metrics “18” initially has degree 6, but it is not part of a 6-core
or even the 3-core, because its neighbors “19” through
Visualizations are often enriched by computing auto-
“22” are removed for having a degree of only 2, causing
matic analyses of the data. For example, nodes in a lay-
the degree of “18” to drop to 2 and requiring it to also
out might be colored and/or ordered according to met-
be removed and excluded from the 3-core.
rics of how important or central each node is. One such
metric is simply the degree deg(n) of the node n, i.e.,
the number of neighbors n has. Nodes with a high de-
gree can be expected to be more important. In this sec-
tion, we explain two other metrics that can be computed
rather easily for each node.
The first is the clustering coefficient of the node,
which is a measure of how interconnected the neighbors
of a node are. If a node n has k = deg(n) neighbors, then
there are up to k(k − 1)/2 edges between those neigh-
bors. The clustering coefficient of n is the fraction of
such edges actually present. A clustering coefficient of
zero means none are present (i.e., none of n’s neigh-
bors are neighbors of each other), and a coefficient of
1.0 means that n and its neighbors form a complete sub-
graph. If m is the number of edges present between the
neighbors, the clustering coefficient is m/(k(k − 1)/2),
and can be computed with the following algorithm:
function clusteringCoefficient( i )
node = nodes[i]
deg = node.neighbors.length
Fig. 11 k-core decomposition of a graph. Shaded regions
if deg == 0 show the 1-core, 2-core, 3-core, and 4-core.
return 0 // this is arbitrary
if deg == 1
return 1 // this is arbitrary We then define the coreness of a node as the highest
count = 0 // num. edges present between neighbors integer k for which it is a member of the k-core. For
for j = 0 to deg-2
i2 = node.neighbors[j]
example, the coreness of node “18” is 2, whereas the
node2 = nodes[i2] nodes “00” through “04” as well as “12” through “17”
for k = j+1 to deg-1
have a coreness of 4.
i3 = node.neighbors[k]
node3 = nodes[i3] The three metrics mentioned, degree, clustering coef-
if edgeExistsBetween(node2,node3) ficient, and coreness, are just three of the many metrics
count = count + 1
return count / (deg * (deg-1) / 2)
that have been proposed in the literature. (Another often
used metric is betweenness, which is more complicated
The last metric we discuss is related to the k-core de- to compute. An efficient algorithm for it is given by
composition of a graph [30, 31] . To obtain the k-core of Brandes[32] .) Any of these metrics can be used to clas-
a graph, we remove all nodes with degree lower than k, sify nodes within a graph, and can be indicated using
updating the degrees of remaining nodes as we remove colors, or using a numerical label beside each node, or
lower-degree nodes. Figure 11 shows an example. Be- can be used to sort the nodes within an arc diagram or
cause all nodes in that figure initially have a degree of 1 other ordered layout. We can also position nodes on a
or greater, the 1-core is the entire graph. Imagine then 2D plane by mapping one metric to the x-axis and an-
removing all nodes of degree 1 (such as nodes “41” and other metric to the y-axis. Such an approach is some-
“42”), as well as all nodes whose degree has been re- times called an attribute-driven layout, an excellent ex-
duced to 1 by the removal of other nodes (specifically, ample of which is found in GraphDice [33] , a system
node “40”). When nodes can no longer be removed, where the user may choose to map any metric or at-
we are left with the 2-core. We then remove nodes of tribute to either the x or y axes.
degree 2 to obtain the 3-core, etc. Notice that node Much more information about network analysis, es-
12 Tsinghua Science and Technology, August 2012, 17(4): 000-000

pecially analysis of social networks, can be found in approaches mix matrix and node-link representations
Wasserman and Faust [34] . [40, 41] or display variants of the standard adjacency ma-

trix [42, 43] .

7 Further Reading
7.2 Simplified Visual Representations
Readers interested in learning more are encouraged to Edge bundling has received much recent attention
consult von Landesberger et al. [2] , which is the most re- in the literature; a few examples are [28, 44–47] . Edge
cent and comprehensive survey of research on network bundling involves routing curved edges so that they
visualization. Nevertheless, in this section we provide overlap and share some of their length, to reduce vi-
a brief, and necessarily incomplete, sampling of some sual clutter. The results can be aesthetically pleasing,
interesting topics for research, at times citing examples but often introduce ambiguity, since each edge entering
of recent work. a bundle may exit in many different ways.
7.1 Alternative Layouts and Visual Representations There are also related methods for visual simplifi-
cation that do not introduce any ambiguity. These in-
We have already seen that the barycenter heuristic can
clude edge concentration [48] , edge compression [49] , the
be used to reorder arc diagrams, matrices, and circular
“tracks” in confluent drawings [50] , and power graphs
layouts. The barycenter heuristic is only one of many [51] . A key idea for many of these techniques is identi-
reordering algorithms (Liiv [19] and section 4.2 of Henry
[20] ). A comprehensive analysis and comparison of dif- fying bicliques in the graph and replacing each biclique
with a visually simpler representation.
ferent reordering algorithms, in terms of performance,
convergence, quality, etc., is still lacking in the litera- 7.3 Interaction Techniques
ture. Several rapid interaction techniques have been pro-
Another useful network layout not discussed in the posed for navigating through networks [52] or perform-
previous sections is based on concentric circles, e.g., ing other operations via popup widgets [42, 53–55] , some
where the user selects some focal node(s) for the cen- of which involve interaction using both hands simulta-
ter, and other nodes are assigned to progressively larger neously.
circles based on a breadth-first traversal. Yee et al. [35] Interaction techniques involving curved edges have
present an example of this with cleverly designed ani- also been explored, such as EdgeLens [56] , and Edge
mated transitions when the focal node changes. Plucking [57] . A survey of these and related techniques
Attribute-driven layouts position nodes based on is given in [58] .
computed metrics and/or associated attributes of the Multitouch interaction has become a popular topic
nodes. Two recent examples include [33, 36] , which in human-computer interaction, and a few multitouch
plot nodes within scatterplots and parallel coordinates. techniques for interacting with networks have been pro-
A closely-related way of visually representing a net- posed [59, 60] .
work is presented by Kairam et al. [37] , who generate To date, there is no consistent and unifying user in-
heatmaps as a function of network topology. terface that combines the best of all these interaction
Many metrics can be computed on nodes to quantify techniques.
the “importance” of different nodes. Examples of met-
7.4 Dealing with Large Networks
rics are discussed in [2, 33, 34, 36–38] . A comprehensive
survey and comparison of graph metrics is still lacking The force-directed layout paradigm presented earlier
in the literature. in this article does not scale well to large graphs. To
Hive plots [38] are an interesting variant of the linear scale better with larger graphs, a common approach is to
arc diagrams already discussed, and might inspire fur- compute a hierarchical clustering of the graph and per-
ther variants in layout. form a multilevel layout. Archambault et al.[39] briefly
Researchers have also proposed hybrid approaches. survey such techniques, and propose their own hybrid
For example, some hybrid approaches are used to ap- layout algorithm.
ply the most appropriate representation to different sub- Topological fisheye views [61] exploit hierarchical
sets of the data. TopoLayout [39] detects subgraphs with clustering to render a view of the network that de-
specific characteristics and applies an appropriate node- pends interactively on the user’s current focus: parts of
link layout algorithm to each subgraph. Other hybrid the network further from the focus are rendered more
 Michael J. McGufffin: Simple Algorithms for Network Visualization: A Tutorial 13

coarsely. ters over time (e.g., merging and splitting) [72, 73] , rather
GPU programming has been used to significantly ac- than emphasizing detailed topological information —
celerate layout computations, as described by Frishman an appropriate approach for large dynamic graphs.
and Tal [62] , allowing larger networks to be visualized. 7.8 Evaluation
It has also been proposed that, in some situations, the
Lee et al. [74] identify several tasks related to visual-
user may not be interested in seeing an overview of an
ization and analysis of graphs. Such a reference list of
entire large network. Instead, the user can be shown a
tasks can help make the design and evaluation of user
single initial node, from which the user can expand out-
interfaces more systematic.
ward, toward neighbors of interest, expanding the con-
Many perceptual questions surrounding graph visu-
text as desired [63] .
alization have been investigated, and many still remain
7.5 Graphs with Auxiliary Information to be explored. One recent example is by Holten et al.
[75] , who compared different ways of depicting directed
Graphs may be associated with additional informa-
tion that can be visualized beside, or on top of, the edges.
graph. For example, one recent approach for visual- Another recent user study [76] compared layouts of
izing subsets of nodes is given in [64] , which also sur- node-link diagrams generated algorithmically versus
veys other approaches for visualizing subsets. This is those arranged manually by users.
related to the challenge of visualizing a hypergraph, i.e.,
8 Conclusion
a graph with hyperedges that can be incident on more
than 2 nodes each. We have presented some elementary layout and analysis
7.6 Graphs from Multidimensional Data
algorithms, and given a brief sampling of research top-
ics within network visualization. Hopefully, this will
Imagine a relational data table listing sales of prod- whet the appetite of readers, encouraging them to track
ucts, with one column for the client identifier, one col- down some interesting references and try their hand at
umn for the product identifier, and other columns for programming some of the algorithms given. The graph
price, date, etc. Each row of the table corresponds to a visualization literature is already quite large and still
sale. From such a table, we might want to generate a growing, but many challenges remain, and real-world
bipartite network of links between clients and products applications are found wherever graphs can be used to
sold to them, or we might instead want to generate a net- model relationships or data.
work of clients with edges between two clients if they
bought the same product. Orion [65] and Ploceus [66] are
prototype software systems that allow such graphs to be References
easily generated from a relational database and subse- [1] Ivan Herman, Guy Melançon, and M. Scott Mar-
quently transformed. shall. Graph visualization and navigation in in-
Work in this vein can be thought of as a comple- formation visualization: A survey. IEEE Trans-
ment to attribute-driven layouts: GraphDice [33] and actions on Visualization and Computer Graphics
other attribute-driven layouts [36] display a network us- (TVCG), 6(1):24–43, 2000.
ing multidimensional visualization techniques (namely,
scatterplots and parallel coordinates), whereas Orion [2] T. von Landesberger, A. Kuijper, T. Schreck,
and Ploceus visualize multidimensional data as net- J. Kohlhammer, J. J. van Wijk, J.-D. Fekete, and
works. D. W. Fellner. Visual analysis of large graphs. In
EuroGraphics: State of the Art Report, 2010.
7.7 Dynamic Graphs
[3] Giuseppe Di Battista, Peter Eades, Roberto
Other recent work [22, 67–70] visualizes networks that
Tamassia, and Ioannis G. Tollis. Graph Draw-
change over time, using small multiples, animation, or
ing: Algorithms for the Visualization of Graphs.
by showing the differences between two instances of the
Prentice-Hall, 1999.
graph (e.g., at times t and t + 1). Some visualizations of
dynamic graphs extend the adjacency matrix to show [4] Michael Kaufmann and Dorothea Wagner, editors.
the temporal dimension [27, 71] . Others identify clusters Drawing Graphs: Methods and Models. Springer,
within the graph and show overall changes of the clus- 2001.
14 Tsinghua Science and Technology, August 2012, 17(4): 000-000

[5] David Auber. Tulip: A huge graph visualization In Proceedings of Symposium on Graph Drawing
framework, 2004. A chapter (pp. 105–126) in (GD), 2004.
Michael Jünger and Petra Mutzel, editors, Graph
[16] Arne Frick, Andreas Ludwig, and Heiko Mehldau.
Drawing Software, Springer.
A fast adaptive layout algorithm for undirected
[6] D. Auber, D. Archambault, R. Bourqui, A. Lam- graphs. In Proceedings of Symposium on Graph
bert, M. Mathiaut, P. Mary, M. Delest, J. Dubois, Drawing (GD), 1994.
and G. Melançon. The Tulip 3 framework: A scal-
[17] Martin Wattenberg. Arc diagrams: Visualizing
able software library for information visualiza-
structure in strings. In Proceedings of IEEE
tion applications based on relational data. Techni-
Symposium on Information Visualization (Info-
cal Report RR-7860, INRIA Bordeaux Sud-Ouest,
Vis), pages 110–116, 2002.
2012.
[18] Jacques Bertin. Sémiologie graphique: Les di-
[7] Vladimir Batagelj and Andrej Mrvar. Pajek – pro-
agrammes, Les réseaux, Les cartes. Éditions
gram for large network analysis. Connections,
Gauthier-Villars, Paris, 1967. (2nd edition 1973,
21(2), 1998.
English translation 1983).
[8] Paul Shannon, Andrew Markiel, Owen Ozier,
[19] Innar Liiv. Seriation and matrix reordering meth-
Nitin S. Baliga, Jonathan T. Wang, Daniel Ram-
ods: An historical overview. Statistical Analysis
age, Nada Amin, Benno Schwikowski, and Trey
and Data Mining, 3(2):70–91, April 2010.
Ideker. Cytoscape: A software environment for
integrated models of biomolecular interaction net- [20] Nathalie Henry. Exploring Social Networks with
works. Genome Research, 13:2498–2504, 2003. Matrix-based Representations. PhD thesis, Uni-
versité Paris Sud, France, and University of Syd-
[9] Kozo Sugiyama, Shojiro Tagawa, and Mitsuhiko
ney, Australia, 2008.
Toda. Methods for visual understanding of hier-
archical system structures. IEEE Transactions on [21] Erkki Mäkinen and Harri Siirtola. The barycenter
Systems, Man, and Cybernetics, SMC-11(2):109– heuristic and the reorderable matrix. Informatica,
125, February 1981. 29(3):357–363, 2005.
[10] Peter Eades. A heuristic for graph drawing. Con- [22] Martin Greilich, Michael Burch, and Stephan
gressus Numerantium, 42:149–160, 1984. Diehl. Visualizing the evolution of compound di-
graphs with TimeArcTrees. Computer Graphics
[11] Thomas M. J. Fruchterman and Edward M. Rein-
Forum, 28(3):975–982, 2009.
gold. Graph drawing by force-directed placement.
Software: Practice and Experience, 21(11):1129– [23] A. Johannes Pretorius and Jarke J. van Wijk.
1164, 1991. Visual analysis of multivariate state transition
graphs. IEEE Transactions on Visualization
[12] Chun-Cheng Lin and Hsu-Chun Yen. A new force-
and Computer Graphics (TVCG), 12(5):685–692,
directed graph drawing method based on edge-
2006.
edge repulsion. Journal of Visual Languages and
Computing, 29(1):29–42, 2012. [24] Mohammad Ghoniem, Jean-Daniel Fekete, and
Philippe Castagliola. On the readability of graphs
[13] Andreas Noack. Energy-based clustering of
using node-link and matrix-based representations:
graphs with nonuniform degrees. In Proceedings
Controlled experiment and statistical analysis. In-
of Symposium on Graph Drawing (GD), 2005.
formation Visualization, 4(2):114–135, 2005.
[14] Tomihisa Kamada and Satoru Kawai. An algo-
[25] Nathalie Henry and Jean-Daniel Fekete. MatLink:
rithm for drawing general undirected graphs. In-
Enhanced matrix visualization for analyzing so-
formation Processing Letters, 31(1):7–15, 1989.
cial networks. In Proceedings of IFIP TC13 In-
[15] Emden R. Gansner, Yehuda Koren, and Stephen ternational Conference on Human-Computer In-
North. Graph drawing by stress majorization. teraction (INTERACT), pages 288–302, 2007.
 Michael J. McGufffin: Simple Algorithms for Network Visualization: A Tutorial 15

[26] Zeqian Shen and Kwan-Liu Ma. Path visualiza- and parallel scatterplot matrix: Hybrid multidi-
tion for adjacency matrices. In Proceedings of mensional visualizations for network exploration.
Eurographics/IEEE-VGTC Symposium on Visual- IEEE Transactions on Visualization and Computer
ization (EuroVis), pages 83–90, 2007. Graphics (TVCG), 16(6):1100–1108, 2010.

[27] Ulrik Brandes and Bobo Nick. Asymmetric rela- [37] Sanjay Kairam, Diana MacLean, Manolis Savva,
tions in longitudinal social networks. IEEE Trans- and Jeffrey Heer. GraphPrism: Compact visual-
actions on Visualization and Computer Graphics ization of network structure. In Proceedings of
(TVCG), 17(12):2283–2290, 2011. ACM Advanced Visual Interfaces (AVI), 2012.
[38] Martin Krzywinski, Inanc Birol, Steven J. M.
[28] Emden Gansner and Yehuda Koren. Improved cir-
Jones, and Marco A. Marra. Hive plots – ratio-
cular layouts. In Proceedings of Symposium on
nal approach to visualizing networks. Briefings in
Graph Drawing (GD), pages 386–398, 2006.
Bioinformatics, 2011. http://www.hiveplot.com/.
[29] Martin I. Krzywinski, Jacqueline E. Schein, Inanc [39] Daniel Archambault, Tamara Munzner, and David
Birol, Joseph Connors, Randy Gascoyne, Doug Auber. TopoLayout: Multilevel graph layout
Horsman, Steven J. Jones, and Marco A. Marra. by topological features. IEEE Transactions on
Circos: An information aesthetic for comparative Visualization and Computer Graphics (TVCG),
genomics. Genome Research, 2009. 13(2):305–317, 2007.
[30] Vladimir Batagelj and Matjaž Zaveršnik. An O(m) [40] Nathalie Henry, Jean-Daniel Fekete, and
algorithm for cores decomposition of networks, Michael J. McGuffin. NodeTrix: A hybrid
2003. http://arxiv.org/abs/cs/0310049v1. visualization of social networks. IEEE Transac-
tions on Visualization and Computer Graphics
[31] Ignacio Alvarez-Hamelin, Luca Dall’Asta, (TVCG), 13(6):1302–1309, 2007.
Alain Barrat, and Alessandro Vespignani.
k-core decomposition: a tool for the vi- [41] Sébastien Rufiange, Michael J. McGuffin, and
sualization of large scale networks, 2005. Christopher P. Fuhrman. TreeMatrix: A hybrid
http://arxiv.org/abs/cs/0504107v2. visualization of compound graphs. Computer
Graphics Forum, 31(1):89–101, 2012.
[32] Ulrik Brandes. A faster algorithm for between-
[42] Anastasia Bezerianos, Pierre Dragicevic, Jean-
ness centrality. Journal of Mathematical Sociol-
Daniel Fekete, Juhee Bae, and Ben Watson. Ge-
ogy, 25(2):163–177, 2001.
neaQuilts: A system for exploring large genealo-
[33] Anastasia Bezerianos, Fanny Chevalier, Pierre gies. IEEE Transactions on Visualization and
Dragicevic, Niklas Elmqvist, and Jean-Daniel Computer Graphics (TVCG), 16(6):1073–1081,
Fekete. GraphDice: A system for exploring mul- 2010.
tivariate social networks. Computer Graphics Fo- [43] Juhee Bae and Benjamin A. Watson. Developing
rum, 29(3):863–872, 2010. and evaluating quilts for the depiction of large lay-
ered graphs. IEEE Transactions on Visualization
[34] Stanley Wasserman and Katherine Faust. Social
and Computer Graphics (TVCG), 17(12):2268–
Network Analysis. Cambridge University Press,
2275, 2011.
1994.
[44] Danny Holten. Hierarchical edge bundles: Visual-
[35] Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, ization of adjacency relations in hierarchical data.
and Marti Hearst. Animated exploration of dy- IEEE Transactions on Visualization and Computer
namic graphs with radial layout. In Proceedings Graphics (TVCG), 12(5):741–748, 2006.
of IEEE Symposium on Information Visualization
(InfoVis), pages 43–50, 2001. [45] Danny Holten and Jarke J. van Wijk. Force-
directed edge bundling for graph visualiza-
[36] Christophe Viau, Michael J. McGuffin, Yves tion. Computer Graphics Forum (EuroVis 2009),
Chiricota, and Igor Jurisica. The FlowVizMenu 28(3):983–990, 2009.
16 Tsinghua Science and Technology, August 2012, 17(4): 000-000

[46] Sergey Pupyrev, Lev Nachmanson, and Michael [55] Michael J. McGuffin and Igor Jurisica. Inter-
Kaufmann. Improving layered graph layouts with action techniques for selecting and manipulating
edge bundling. In International Symposium on subgraphs in network visualizations. IEEE Trans-
Graph Drawing (GD), 2010. actions on Visualization and Computer Graphics
(TVCG), 15(6):937–944, 2009.
[47] Ozan Ersoy, Christophe Hurter, Fernando V.
Paulovich, Gabriel Cantareira, and Alexandru [56] Nelson Wong, Sheelagh Carpendale, and Saul
Telea. Skeleton-based edge bundling for graph vi- Greenberg. EdgeLens: An interactive method for
sualization. IEEE Transactions on Visualization managing edge congestion in graphs. In Proceed-
and Computer Graphics (TVCG), 17(12):2364– ings of IEEE Symposium on Information Visual-
2373, 2011. ization (InfoVis), pages 51–58, 2003.
[48] Frances J. Newbery. Edge concentration: A
[57] Nelson Wong and Sheelagh Carpendale. Sup-
method for clustering directed graphs. In Proceed-
porting interactive graph exploration using edge
ings International Workshop on Software Config-
plucking. In Proceedings of Visualization and
uration Management (SCM), pages 76–85, 1989.
Data Analysis (VDA), 2007.
[49] Frank van Ham, Martin Wattenberg, and Fer-
nanda B. Viégas. Mapping text with phrase nets. [58] Nathalie Henry Riche, Tim Dwyer, Bongshin Lee,
IEEE Transactions on Visualization and Computer and Sheelagh Carpendale. Exploring the design
Graphics (TVCG), 15(6):1169–1176, 2009. space of interactive link curvature in network dia-
grams. In Proceedings of ACM Advanced Visual
[50] Matthew Dickerson, David Eppstein, Michael T. Interfaces (AVI), 2012.
Goodrich, and Jeremy Yu Meng. Confluent draw-
ings: Visualizing non-planar diagrams in a planar [59] Mathias Frisch, Jens Heydekorn, and Raimund
way. In International Symposium on Graph Draw- Dachselt. Investigating multi-touch and pen ges-
ing (GD), 2003. tures for diagram editing on interactive surfaces.
In Proceedings of ACM International Conference
[51] Loı̈c Royer, Matthias Reimann, Bill Andreopou-
on Interactive Tabletops and Surfaces (ITS), 2009.
los, and Michael Schroeder. Unraveling protein
networks with power graph analysis. PLoS Com- [60] Sebastian Schmidt, Miguel A. Nacenta, Raimund
putational Biology, 4(7), 2008. Dachselt, and Sheelagh Carpendale. A set of
[52] Tomer Moscovich, Fanny Chevalier, Nathalie multi-touch graph interaction techniques. In Pro-
Henry, Emmanuel Pietriga, and Jean-Daniel ceedings of ACM International Conference on In-
Fekete. Topology-aware navigation in large net- teractive Tabletops and Surfaces (ITS), 2010.
works. In Proceedings of ACM Conference on Hu-
[61] Emden R. Gansner, Yehuda Koren, and Stephen C.
man Factors in Computing Systems (CHI), 2009.
North. Topological fisheye views for visualizing
[53] Michel Beaudouin-Lafon, Wendy E. Mackay, large graphs. IEEE Transactions on Visualization
Peter Andersen, Paul Janecek, Mads Jensen, and Computer Graphics (TVCG), 11(4):457–468,
Michael Lassen, Kasper Lund, Kjeld Mortensen, 2005.
Stephanie Munck, Anne Ratzer, Katrine Ravn,
Søren Christensen, and Kurt Jensen. CPN/Tools: [62] Yaniv Frishman and Ayellet Tal. Multi-level
A post-WIMP interface for editing and simulating graph layout on the GPU. IEEE Transactions
coloured petri nets. In Proc. International Con- on Visualization and Computer Graphics (TVCG),
ference on Application and Theory of Petri Nets 13(6):1310–1319, 2007.
(ICATPN), pages 71–80, 2001.
[63] Frank van Ham and Adam Perer. “search,
[54] Michael J. McGuffin and Ravin Balakrishnan. In- show context, expand on demand”: Supporting
teractive visualization of genealogical graphs. In large graph exploration with degree-of-interest.
Proceedings of IEEE Symposium on Information IEEE Transactions on Visualization and Computer
Visualization (InfoVis), pages 17–24, 2005. Graphics (TVCG), 15(6):953–960, 2009.
 Michael J. McGufffin: Simple Algorithms for Network Visualization: A Tutorial 17

[64] Basak Alper, Nathalie Henry Riche, Gonzalo Computer Graphics (TVCG), 17(12):2334–2343,
Ramos, and Mary Czerwinski. Design study 2011.
of LineSets, a novel set visualization technique.
[71] Ji Soo Yi, Niklas Elmqvist, and Seungyoon Lee.
IEEE Transactions on Visualization and Computer
TimeMatrix: Analyzing temporal social networks
Graphics (TVCG), 17(12):2259–2267, 2011.
using interactive matrix-based visualizations. In-
[65] Jeffrey Heer and Adam Perer. Orion: A sys- ternational Journal of Human-Computer Interac-
tem for modeling, transformation and visualiza- tion, 26:1031–1051, 2010.
tion of multidimensional heterogeneous networks.
[72] Martin Rosvall and Carl T. Bergstrom. Mapping
In Proceedings of IEEE Visual Analytics Science
change in large networks. PLoS ONE, 5(1), 2010.
and Technology (VAST), 2011.
[73] Khairi Reda, Chayant Tantipathananandh, An-
[66] Zhicheng Liu, Shamkant B. Navathe, and John T. drew Johnson, Jason Leigh, and Tanya Berger-
Stasko. Network-based visual analysis of tabular Wolf. Visualizing the evolution of community
data. In Proceedings of IEEE Visual Analytics Sci- structures in dynamic social networks. Computer
ence and Technology (VAST), 2011. Graphics Forum, 30(3):1061–1070, 2011.
[67] Daniel Archambault, Helen C. Purchase, and [74] Bongshin Lee, Catherine Plaisant, Cynthia Sims
Bruno Pinaud. Difference map readability for dy- Parr, Jean-Daniel Fekete, and Nathalie Henry.
namic graphs. In Proceedings of Symposium on Task taxonomy for graph visualization. In Pro-
Graph Drawing (GD), pages 50–61, 2010. ceedings of AVI workshop BEyond time and er-
rors: novel evaLuation methods for Information
[68] Daniel Archambault, Helen C. Purchase, and Visualization (BELIV), 2006.
Bruno Pinaud. Animation, small multiples, and
the effect of mental map preservation in dy- [75] Danny Holten, Petra Isenberg, Jarke J. van Wijk,
namic graphs. IEEE Transactions on Visualization and Jean-Daniel Fekete. An extended evaluation
and Computer Graphics (TVCG), 17(4):539–552, of the readability of tapered, animated, and tex-
2011. tured directed-edge representations in node-link
graphs. In Proceedings of IEEE Pacific Visualiza-
[69] Loutfouz Zaman, Ashish Kalra, and Wolfgang tion (PacificVis), pages 195–202, 2011.
Stuerzlinger. The effect of animation, dual view,
difference layers, and relative re-layout in hierar- [76] Tim Dwyer, Bongshin Lee, Danyel Fisher,
chical diagram differencing. In Proc. Graphics In- Kori Inkpen Quinn, Petra Isenberg, George
terface (GI), pages 183–190, 2011. Robertson, and Chris North. A comparison
of user-generated and automatic graph layouts.
[70] Steffen Hadlak, Hans-Jörg Schulz, and Heidrun IEEE Transactions on Visualization and Computer
Schumann. In situ exploration of large dynamic Graphics (TVCG), 15(6):961–968, 2009.
networks. IEEE Transactions on Visualization and