A Physics-based Approach for Interactive Manipulation of

Graph Visualizations
Andre Suslik Spritzer Carla M.D.S. Freitas
Instituto de Informática Instituto de Informática
Universidade Federal do Rio Grande do Sul Universidade Federal do Rio Grande do Sul
Caixa Postal 15064 91.501-970 Porto Alegre, RS Caixa Postal 15064 91.501-970 Porto Alegre, RS
Brazil Brazil
[email protected] [email protected]

ABSTRACT explored textually, through tools such as query languages, this

This paper presents an interactive physics-based technique for the usually requires an expert user, being too complex and not
exploration and dynamic reorganization of graph layouts that intuitive enough for most people, who have little experience with
takes into account semantic properties which the user might need such instruments. Therefore, many of these areas make use of
to emphasize. Many techniques have been proposed that take a applications that visualize their inherent graphs in order to make it
graph as input and produce a visualization solely based on its easier for their users to grasp and manipulate the information they
topology, seldom ever relying on the semantic attributes of nodes require.
and edges. These automatic topology-based algorithms might By far, the most popular and intuitive visual representation of a
generate aesthetically interesting layouts, but they neglect graph is the node-link diagram. A large community of researchers
information that might be important for the user. Among these are is dedicated specifically to the study of how to compute the best
the force-directed or energy minimization algorithms, which use possible layout. The problem they attempt to solve can be simply
physics analogies to produce satisfactory layouts. They consist of stated as how to find the geometric positions of the nodes that are
applying forces on the nodes, which move until the physical aesthetically more interesting for the better comprehension of the
system enters a state of mechanical equilibrium. We propose an graph and its structure. Its solution, though, has proven to be quite
extension of this metaphor to include tools for the interactive complex.
manipulation of such layouts. These tools are comprised of
magnets, which attract nodes with user-specified criteria to the Different algorithms for the layout of node-link diagrams have
regions surrounding the magnets. Magnets can be nested and also been created, each favoring certain aesthetic criteria, such as edge
used to intuitively perform set operations such as union and crossings, edge bends, graph symmetry, etc., in detriment of
intersection, becoming thus an intuitive visual tool for sorting others. Some of these techniques are better for certain
through the datasets. To evaluate the technique we discuss how applications while some are better for others, but all have their
they can be used to perform common graph visualization tasks. limitations, which range from computational cost to visual clutter.
A good source on the field of graph drawing is the book written
by Di Battista et al. [2].
Categories and Subject Descriptors
H.5.2 [Information Interfaces and Presentation]: User To deal with the limitations of these layout algorithms, many
Interfaces – graphical user interfaces, interaction styles. approaches have been experimented [11]. While some have
applied navigation and interaction schemes on the traditional
layouts, others have built 3D visualization techniques, changed
General Terms from node-link diagrams to alternative visual representations, or
Design, Human Factors. combined existent techniques into new hybrid ones.
While some of these techniques might be well suited for certain
Keywords applications, no technique is generally applicable. Also, while
Graph visualization, Interaction
many techniques can build aesthetically pleasing layouts, few
take into account the semantic information contained in the
1. INTRODUCTION attributes of the nodes and edges of a graph, focusing only on the
Graphs are present in many different application areas, ranging topological characteristics. Some use interaction tools such as
from biology to social network analysis and software engineering. filtering, to achieve some visual customization based on the
While information organized in graph-like structures can be semantic information, but very few are attribute-aware and,
among those one finds that most are too application-specific to be
Permission to make digital or hard copies of all or part of this work for
generally applicable.
personal or classroom use is granted without fee provided that copies are The main information associated to a graph is the relationships
not made or distributed for profit or commercial advantage and that
represented by its topology, but it is often the case that the
copies bear this notice and the full citation on the first page. To copy
otherwise, or republish, to post on servers or to redistribute to lists,
attributes represented in its nodes and edges are just as important
requires prior specific permission and/or a fee. to the user of a graph visualization application, who might be
AVI’08, May 28–30, 2008, Napoli, Italy. missing out important data and even relationships that are not
Copyright 2008 ACM 1-978-60558-141-5…$5.00. explicitly expressed.

271
In this work, we present a physically-based technique for the One of the most popular force-directed algorithms is the one
interactive manipulation of graph visualizations. Our technique proposed by Fruchterman and Reingold [8]. This algorithm
consists of providing the user with virtual magnets associated consists on calculating all the forces that attract and repulse
with user-defined criteria, which can be topology or attribute- nodes, at each iteration. Nodes connected by edges exert an
based, and that allow the interactive manipulation of the attraction force between them, while all nodes exert a repulsion
visualization of a graph in order to make it semantically more force on all others. From the forces, the position displacement a
interesting and valuable. Magnets can also be used to intuitively node will suffer during each iteration is calculated and limited by
perform set operations such as union and intersection, becoming a the current value of an attribute (usually used as temperature),
visual tool for exploring the datasets, and allowing the user to which is progressively decreased. This algorithm is relatively fast
discover new relationships that were previously invisible due to and produces nice visual results.
the techniques that focused exclusively on the topology. To Another interesting approach is Noack’s LinLog energy model
illustrate our technique, we show how it can be applied to perform [14], which attempts to reveal clusters of highly connected nodes.
common graph visualization tasks identified by Lee et al. [13]. This technique is particularly useful for datasets such as social
In the following section, we present an overview of related works. networks, and was proposed in two variations, the node-repulsion
Section 3 describes our approach, and gives some details of its LinLog model [14][15] and the edge-repulsion LinLog model
implementation. Section 4 illustrates how it can be applied and in [16]. Both variations produce similar drawings, but the latter
Section 5 we present our conclusions and draw some comments avoids dense accumulations of nodes with high degrees for graphs
on future work. with non-uniform degrees.
One interesting property of force-directed algorithms is that most
2. RELATED WORK of them support the application of constraints. A position
The works related to the technique presented in this paper are constraint can be established by forcing nodes to remain within a
mostly in four subjects: force-directed graph layouts; interactive certain region, while other types of constraints can be used if they
graph layout reorganization; use of “false” elements for layout re- can be expressed with forces. Examples of this include the use of
organization; and evaluation and design of graph visualization magnetic fields to impose orientation constraints [17] and the
techniques. utilization of dummy nodes to force groupings.
For many years, force-directed algorithms have suffered
2.1 Force-directed Layouts dramatically from a scalability problem: the more nodes and
Force-directed graph layouts are amongst the most popular in edges we have, the slower it is for the system to converge. Thus,
graph visualization due to their pleasing visual results, relative it was only possible to use these algorithms in real-time with
implementation simplicity and flexibility as to the inclusion of smaller graphs due to their high computational cost. However,
new aesthetic criteria. The basic idea of a force-directed algorithm with the advent of faster, multi-core processors and powerful,
is to treat the graph as a physical system, assigning forces to the programmable graphic processing units (GPUs) this reality is
nodes and edges, and minimizing its energy until reaching a stable changing fast. Mass-spring algorithms can now deal with
layout. The forces will work to rearrange the positions of the hundreds of thousands nodes and edges in real-time, and many
nodes until the system finds itself in a state of mechanical different applications, such as real-time cloth simulation, are
equilibrium. Di Battista et al.’s book [2] presents a good survey of already making use of that [9, 18]. Recent works on GPU-based
force-directed methods. force-directed layout include Frishman and Tal [7], reporting a
multi-level graph layout algorithm.
One of the first force-directed algorithms was proposed by Eades
[6]. It takes the intuitive approach of treating the graph as a mass- Aside from the scalability problem, force-directed algorithms also
spring system, with nodes being steel rings and edges springs that suffer greatly from a predictability problem. Two different runs of
connect them. Despite the physical metaphor, it does not aim for an algorithm over similar (or even the same) input graphs might
physical accuracy, not employing Hooke’s law for the springs and generate two completely different layouts, which is not very
with forces affecting velocity instead of acceleration. It produces helpful in allowing the user to create and maintain a mental map
visualizations of uniform edge length and allows representation of of the visualization. One approach that has been used to minimize
graph symmetry. The algorithm consists of randomly positioning this is to run another layout algorithm first, and afterwards
the nodes and simply running the simulation for a number of execute the force-directed technique on that.
iterations, which is one of its drawbacks, since not all graphs
converge at the same time. 2.2 Interactive Layout Reorganization
Many other algorithms extended the basic idea presented by Most graph visualization techniques usually use interaction and
Eades. One of those is Kamada and Kawai’s [12], which aims at navigation techniques to explore static, pre-computed layouts.
positioning nodes in a way that their geometric distance is equal Well-known techniques include filtering; fish-eye views; scrolling
to their graph-theoretic distance. It does so by having the and panning; zooming and even coordination of two or more
simulation assuming that between every two nodes there is a visualizations (see Herman et al. [11], for a wider review on
spring with length equal to the theoretical distance between them. navigation and interaction techniques for graph visualizations).
Another interesting algorithm is Davidson and Harel’s [5], which Very few techniques, though, allow for dynamic interactive
introduced the idea of using simulated annealing to minimize the reorganization of graph layouts.
system’s energy function, which takes into account vertex Some applications allow for simple layout reorganization by
distribution, edge length and edge crossings. This algorithm can letting the user move around nodes in force-directed layouts,
be very time consuming, but can produce better results. which will cause an alteration in the balance of energy of the

272
force-directed system, thus triggering a repositioning of the of virtual magnets, which attract nodes that fulfil certain user-
nodes, which will move until equilibrium is again reached. defined criteria. While we follow a magnet metaphor, though,
Another known technique is to find clusters of nodes and physical accuracy is not one of our aims.
transform them into cluster-nodes that can be expanded and In our technique magnets can be placed on the scene in order to
collapsed by the user. Clusters can also be used to perform reorganize the graph. They can be set to attract nodes based on
cluster-based semantic zooming, which allows for a level-of- their values for certain criteria, which can be topological (such as
detail-like approach to the visualization, letting the user nodes that have a certain degree or that have a path to another
incrementally explore the graph by zooming in or out. node with a certain length) or attribute-based (i.e. all users that
Considering the few techniques that allow for dynamic graph come from the UK). Also, boundary shapes can be applied to
layout reorganization, we find the work of Henry et al., NodeTrix magnets to keep the nodes they attract bound to certain regions of
[10], which is a hybrid of matrix and node-link visualizations. the scene.
NodeTrix allows the user to turn clusters of nodes of node-link
visualizations into matrices, which are then displayed within the 3.1 Basic Graph Layout
node-link diagram. The layout itself is computed with the In our technique, the user is given two options for the
previously mentioned LinLog algorithm. computation of the layout: a mass-spring algorithm similar to
Eades’s [6] or an adapted version of Fruchterman and Reingold’s
2.3 Use of False Elements technique [8].
The next few related works are not exactly devoted to graph In the first option, the layout of the graph is computed assuming
layout reorganization, but they introduced ideas that we found that all nodes have equal mass. The parameters of the algorithm,
inspiring and somehow proved the feasibility of using magnets to such as time step, edge rest length, damping factor and node
allow users to re-organize visualizations in a more powerful and repulsion force can be changed by the user to produce a
easy way. visualization that is more satisfying aesthetically. The rest length
Fidg’t 1 is an application developed for the management of social of the edges can be either a fixed value provided by the user or
networks that includes an interactive visualization tool that allows computed based on the degree of the nodes that it links (the
users to iteratively explore their networks by creating tag magnets higher the degree, the longest the length). The layout is dynamic
for pictures (from Flickr) or music (from Last.fm), and observing and is always being recomputed; therefore, any change in the
how its nodes are attracted or repelled. position of a node will trigger a subsequent reorganization of the
Although devoted to a different data domain (multivariate layout. Figure 1 shows a small graph with layout computed using
information), the Dust & Magnet information visualization this algorithm.
technique proposed by Yi et al. [19] also uses a magnet metaphor.
Finally, it is important to mention that the technique presented in
our work was partly inspired by Bier and Stone’s Snap-Dragging
[4], which is an interactive technique that aims at helping the user
make precise line drawings.

2.4 Evaluation and Design of Graph

Visualization Techniques
Evaluating such a variety of graph layout techniques and Figure 1. Graph of the largest component (largest connected
interaction techniques is a huge problem, because there are both subgraph) of the AVI coauthorship network drawn using a
perceptual and functional issues involved. Few works deal with mass-spring algorithm.
evaluation of graph visualization techniques. A very useful task
taxonomy for graph visualizations has been proposed by Lee et al. In the second option, Fruchterman and Reingold’s technique is
[13]. In their article, the authors provide a list of tasks that users combined with the Barnes and Hut algorithm [3], and slightly
might need to perform while using a graph visualization adapted to better fit our needs. Our modifications were the
application. In Section 4 we will use this taxonomy to evaluate addition of a small gravitational force that pulls all nodes slightly
how our technique fares when the user tries to execute the defined towards the centre of the workspace and the alteration of the
tasks. manner in which the algorithm runs (we re-evaluate it every
frame instead of running it for a given number of iterations). The
user can set several parameters, such as time step, damping, a
3. OUR TOOL constant that is used for the computation of the optimal distance
The goal of our technique is to aid users in interactively between two vertices, maximum attraction force (to make it easier
reorganizing the layout of a graph to better fit their needs by for the simulation to reach stability), attraction and repulsion
providing them with tools that allow the manipulation of graph exponents and central gravitation factor. Figure 2 shows the same
visualizations based on the topological and semantic attributes graph as Figure 1 computed using this algorithm.
that better interest them. To do so, we build on the physics
metaphor of force-directed algorithms by allowing the placement

1
http://fidgt.com

273
Figure 2. Graph of the largest component of the AVI
coauthorship network drawn using our variation of
Fruchterman and Reingold’s technique.
Figure 4. A small graph with three magnets - one targeting
In both cases, Verlet integration is used to compute node positions nodes of degree 3 (light blue nodes); the second attracting
in every frame due to its stability and area preserving properties. nodes of degree 4 (green nodes) and the third one attracting
To allow for easier navigation, the user can pause and resume the nodes with degree greater than 5 (light orange nodes).
simulation at any time.
Attribute-based criteria use the semantic properties contained in
nodes and edges in order to attract nodes. Users can set a magnet
3.2 Magnets to attract all the nodes in which a certain property exists, or not
Magnets are special objects that can be added to the scene which only exists but is also equal to a certain value or is within a
have the ability to attract nodes of a graph that fulfil certain user- certain value range (if it is numerical). Users can do the same for
defined criteria. Figure 3 shows how magnets are visually edges, with the magnet then attracting the nodes linked by edges
represented in the prototype we developed. that fulfil the defined criteria. An example of a magnet with an
attribute-based criterion can be observed in Figure 5.

Figure 3. Visual representation of a magnet.

A magnet works by exerting onto each of these nodes an
attraction force that will progressively move them towards it,
thereby building a cluster of semantically-related nodes around it.
When these nodes move, the force-directed layout algorithm
ensures that all the other nodes that are connected to them by
edges will be pulled along, reorganizing the whole layout of the
graph in the process.
To each magnet users should associate one or more attraction Figure 5. Graph of the largest component (largest connected
criteria, which can be set as requirements of attraction or simply subgraph) of the AVI coauthorship network with a magnet set
criteria. To be attracted a node must fulfil all requirements and at to attract authors cited more than once (all nodes that have
least one of the defined criteria. These requirements and criteria attribute “citationsnb” greater than 1).
can be based on the topology of the graph, the attributes of its
nodes and edges or even other magnets that have been placed on Magnet-based criteria use the sets of attracted nodes of each
the scene. magnet that was included in the scene by the user. With magnet-
based criteria, one can set a magnet to attract all the nodes that
Topology-based criteria use the structure of the graph to attract another magnet also attracts, all the nodes that another magnet
nodes. It is possible to attract nodes based on properties such as does not attract, all the nodes that no magnet attracts or all the
degree, path length (i.e. all nodes that are within a specified path nodes that are attracted by a combination of magnets. This allows
length from another node or group of nodes), connected subgraph for set-based operations on the graph visualization, which usually
(i.e. subgraphs with a given number of nodes), connected will end up in a graph reorganization.
components (maximally connected subgraphs with a given
number of nodes) . Figure 4 shows an example of two magnets Each criterion has a properties dialog through which it can be
with topology-based criteria in action. properly set up and configured. They can be added, removed and
edited at any time, with users also being able to add multiple
criteria and requirements to each magnet. This makes it possible,
for instance, to set a magnet to attract all nodes that are not
attracted by any magnet, have degree higher than a certain
number and include the property that is called x. Figure 6 shows
an example of a magnet with different types of criteria.

274
 each node is pulled towards a nearby direction, which makes for
more evenly distributed nodes. Figure 7 shows boundary shapes
in action.
Once a node finds itself inside a magnet’s boundary shape, it
cannot escape that area, unless it is also attracted by another
magnet that is placed outside such shape.

Figure 6. Magnet attracting authors with at least two papers

that have written papers with more than three other authors
(nodes with the attribute “papersnb” greater than or equal to
2 and degree greater than 3).
In case one might wish to perform a union of the set of nodes
attracted by two or more different magnets, it is possible to Figure 7. Graph with boundary shapes.
combine such magnets. The combination operation will create a
new compound magnet with the combined criteria of the ones 3.4 Magnet Hierarchy
selected. The new magnet will have its force magnitude set to the A magnet effectively creates sets of related nodes and ensures that
average of the original ones’, which will be subsequently set to 0. they remain near a certain physical region. Occasionally it might
Within the physics metaphor, a magnet works simply, on each be useful to refine this set of nodes into subsets. To allow for that,
frame, by applying to all attracted nodes a force vector in its it is possible to define magnets that act only on the subset of the
direction with the specified magnitude. Also, to keep the magnet graph that is already attracted by another magnet. To do this, the
from being overlapped by its attracted nodes and to keep the user must simply create a magnet and define another one as its
attracted nodes from staying all bundled together too close to each parent. It is interesting to note that children magnets might
other, the magnet also exerts a repulsion force on each of the children magnets of their own; creating thus a hierarchy of
attracted nodes. This repulsion force is the same as with common magnets that might be helpful for incremental exploration of a
nodes, working like a reverse gravity by being inversely graph. Figure 8 illustrates the use of magnet hierarchy to achieve
proportional to the distance of the node to the magnet and a better organization of the layout.
proportional to the magnitude of the force of attraction, so that it
is stronger with the nodes that are near the magnet and weaker
with the ones that are progressively further away from it. The
magnitude of the repulsion force can be increased by the user to
change the minimum distance the nodes ought to have from the
magnet.
Occasionally it might be cumbersome to see which nodes that are
positioned close to a magnet are in fact attracted by it. To deal
with this situation, it is possible to assign a colour to all the nodes
that it attracts or to create a boundary shape around the magnet to
limit the region in which such nodes can move about.

3.3 Boundary Shapes

A boundary shape is simply a geometric shape (a circle in our Figure 8. Graph of the CHI conference citations with a
current implementation), which can be placed around a magnet magnet hierarchy. All nodes within the red boundary shape
and have the function of bounding the nodes that such magnet are proceedings of the conferences that were published before
attracts to the region that the shape delimits. At the same time that 2000, with the ones inside the beige shape being from after
all attracted nodes are kept within the boundary shape, all other 1990.
nodes are kept out, with the shape exerting a repulsion force If the parent magnet does not have a boundary shape, or has one,
similar to the one exerted on the other nodes by the nodes but the child magnet is outside of it, a dashed line in the same
themselves (a reverse gravity force). colour as the parent’s nodes appears between them. If there is a
To allow for a better distribution of space within a boundary boundary shape and the child magnet is within it, no line appears.
shape, the magnitude of the attraction force of the magnet is
reduced for the nodes that are inside. Also, when a node enters the
region of a boundary shape, the direction of the force that pulls it
is “refracted” by the application of Snell’s Law. So, instead of
there being a force that pulls the nodes straight to the magnet,

275
3.5 Magnet Intersections boundary shape. When the user selects a node, the panel displays
the attributes of that node.
As the goal of this prototype was to test our technique,
performance considerations were not taken into account in the
development of the application. Therefore, the current
implementation is completely on software and with only few
Figure 9. Visual representation of an intersecting node. optimizations. Nevertheless, on the machine used to run it, a
single-core Mobile AMD Athlon 64 3000+ (2.0 GHz) with 2 GB
Occasionally it may happen that a node fulfils the criteria of two
of DDR 333 MHz memory and an ATI Radeon 9700 graphics
or more magnets. In such a case, the node will be attracted to all
card with 128 MB of memory, it was already possible to deal with
of these magnets and will thus have a tendency to stabilize in the
graphs of several hundred nodes and edges at interactive rates.
middle of them with a bigger lean towards the ones with the
strongest attraction forces. If there is intersection between
magnets that have boundary shapes, their position constraints are 4. DISCUSSION
ignored, and they are allowed to escape the region they were Lee et al. [13] have proposed a useful task taxonomy for graph
previously bound to. visualization in which it is defined a list of tasks that are
commonly performed while exploring a graph. They divide these
To make the intersections more apparent visually, the common
tasks into general low-level tasks, graph-specific tasks and
nodes are drawn as in Figure 9. The user may also at any time
complex tasks, with the latter being further categorized into
choose to display dashed lines from the intersecting nodes to their
topology, attribute-based, browsing and overview tasks.
‘parent’ magnets (Figure 10). Each line assumes the colour that
was defined by the user for the nodes that are attracted by its To examine how our technique can contribute to the visualization
respective magnet. of a graph, in this section we show how it can be used to better
carry out many of the tasks on Lee et al.’s taxonomy.
Table 1. Low-level tasks inherently covered by our technique
Task Description
Given some conditions on attribute
1. Filter values, find data cases satisfying those
conditions.
Find data cases possessing an extreme
2. Find
value of an attribute over its range within
Extremum
the data set.
Given a set of data cases, rank them
3. Sort
according to some ordinal metric.
Figure 11. Largest component of the AVI coauthorship 4. Determine Given a set of data cases, rank them
network with a magnet that attracts all authors that have Range according to some ordinal metric.
more than one paper (node attribute “papersnb” greater than Given a set of data cases and a
1) and another that attracts all authors with more than one 5. Characterize quantitative attribute of interest,
citation (node attribute “citationsnb” greater than 1). Distribution characterize the distribution of that
attribute’s values over the set.
3.6 Implementation Details Identify any anomalies within a given set
6. Find
A proof-of-concept prototype was developed to test and evaluate of data cases with respect to a given
Anomalies
our approach. It was initially developed with Python 2.5 and Qt relationship or expectation.
4.3.1, using PyQt and later ported to C++. The prototype takes as Given a set of data cases, find clusters of
7. Cluster
input GraphML files and displays the graphs with the previously similar attribute values.
described layouts. Given a set of data cases and two
8. Correlate attributes, determine useful relationships
Users are able to insert magnets, whose attributes (including
between the values of those attributes.
shapes and criteria) can be manipulated through a panel on the
9. Find Adjacent
right side of the graphical user interface. Each criterion has its Given a node, find its adjacent nodes.
Nodes
own properties dialog, which can be accessed by picking it from
Given multiple sets of nodes, perform set
the selected magnet’s requirement and criteria lists. The prototype 10. Set Operation
operations on them.
was built with extensibility in mind, so that the creation of new
tools and types of criteria is straightforward.
Most of the higher-level tasks are built on combinations of the 10
The panel on the right side of the user interface is used to provide general low-level visual analytic tasks described by Amar et al.
layout and magnet options to the user. When no node or magnet is [1] and also three other operations proposed by themselves (with
selected, information about the graph and the layout configuration one of them being exclusive to graphs). It is interesting to note
interface is displayed. If a magnet is selected, the magnet editor is how our technique already inherently deals with several of these
launched, allowing the user to set and edit the magnet criteria and lower-level tasks. Table 1, partially taken from Lee et al.’s paper,

276
contains a listing and description of the low-level tasks that our One interesting aspect of our technique is that it can be used to
approach is able to cover. easily explore graph datasets by building queries through the
As can be clearly seen from Table 1, these tasks can be performed specification of magnets and their criteria, and performing set
through our technique simply by adding magnets to the scene operations on them, becoming thus an intuitive and simplified
with the proper combination of criteria, and allowing the graph to alternative to query languages or filtering operations, which can
reorganize itself. Tools such as magnet boundary shapes and the be too complex for most end-users that do not have advanced
ability to operate on magnets themselves (through magnet programming and computer skills.
combination and magnets that have magnet-based criteria) make
carrying out these tasks a natural fit, with clustering and set 5. CONCLUSIONS AND FUTURE WORK
operations being some of the most natural applications for the Even though there is a multitude of graph layout algorithms, there
tools we propose. is no one which fits to all types and sizes of graphs. With the
work presented in this paper, we aimed at developing a technique
Regarding to graph-specific higher level tasks, our technique also
that would help circumvent this fact by providing the user with
provides adequate support to the user in accomplishing several of
tools that could allow him to shape a layout into one of his/her
them. In most cases the tasks can be easily carried out by relying
needs.
simply on the placement of magnets with the proper combination
of topology and attribute-based criteria followed by (if necessary) On the contrary of most graph layout techniques, which work
the proper operations on the magnets themselves (such as magnet- solely based on the topological structure of the graph, ours also
based criteria and magnet combination). takes into account the information contained in attributes of the
nodes and edges. This allows the user to dispose the graph in a
Lee et al. divide graph complex tasks into topology-based tasks,
layout that can be semantically more interesting.
attribute-based tasks, browsing tasks and overview tasks. Our
technique is especially useful for the first two categories and can Our tools, in great part due to the metaphor we employ, make it
be easily integrated into applications that provide ways to possible for the user to intuitively navigate through the graph and
accomplish the other two types of tasks. perform many common graph visualization operations.
Topology-based tasks were further subdivided into a few One of the biggest drawbacks of force-directed algorithms is that
categories: adjacency, accessibility, common connection and the layouts they produce tend to be unpredictable – different runs
connectivity. Adjacency tasks include finding the set of nodes on similar graphs (or even with the same one) might generate
adjacent to a node, a node’s degree and the node with the highest completely different layouts, which is quite a hindrance for
degree. Accessibility includes issues such as finding all the nodes maintaining a mental map of the graph. Our technique helps
accessible from another one and the set of nodes with distance minimize this limitation, allowing for a level of predictability in
from another node within a certain range. Common connection otherwise unpredictable drawings. In two runs of the application
corresponds to finding a set of nodes that are connected to all the on the same graph, two magnets will always attract the same
nodes of a given set, while connectivity includes finding the nodes to the same place. It is not guaranteed that the nodes will be
shortest path between two nodes, finding connected components at the same exact position, but their general location can be easily
(defined by Lee et al. as a maximal connected subgraph) and known, since it is indicated by the users themselves.
clusters (defined by the same authors as a subgraph of connected Another interesting aspect of the presented technique is that it is
components whose nodes have high connectivity). not bound to a specific layout algorithm: it can work with any that
Attribute-based tasks can work on nodes or edges and include allows for forces to be applied to nodes.
operations such as finding the nodes that have a specific attribute There is still work to be done in order to improve the technique
value or that are linked by edges that have a certain attribute or a presented in this paper. Amongst the planned work is an efficient
certain attribute value in a specified range. implementation of the technique using the GPU on top of a more
Browsing tasks include operations such as following a given path sophisticated layout algorithm that more clearly separates clusters
or revisiting a previously visited node. of highly connected nodes, such as LinLog [14]. This
implementation will allow the use of the technique with larger
Finally, overview tasks correspond to exploratory operations
and more complex datasets, permitting its validation and better
performed in order to quickly get an estimate of a certain value,
adaptation for huge graphs, which have shown up quite frequently
such as the size of a graph or subgraph, or patterns that the graph
lately due to the growing interest in the visualization of social
tends to have.
networks.
As can be seen from the previous description of the different
Some new features are also planned for the technique itself, such
types of tasks, magnets apply directly to topology and attribute-
as new types of criteria, arbitrarily-shaped magnet boundaries, the
based tasks. Such tasks can be accomplished simply by creating
possibility of making a magnet work only on the nodes that are
magnets with the proper criteria. Browsing and overview tasks
within a certain area (i.e. with a certain radius around it), and the
can also be helped by the magnets, by making it easier to find
ability to collapse the nodes attracted by a magnet into an
nodes on the scene and providing the visualization with some
expandable and collapsible cluster-node to allow for a better
node position predictability, since magnets can be inserted to
iterative visualization. Also planned is a special magnet that
make sure that nodes that fulfill certain criteria are within a
applies weighed forces to the nodes it attracts, allowing for a
certain region. For the tasks that our tools are unable to cover, the
visual sorting of such nodes (the closer the node is to the magnet,
solution is simply a matter of combining it with other techniques,
the more it has of a certain property). This sorting magnet would
such as fish-eye-like visualizations, overview windows, node
search, etc.

277
allow operations such as visually browsing by date, alphabetically [10] Henry, N., Fekete, J.-D. and McGuffin, M. 2007 NodeTrix:
or any numerical value. Hybrid representation for analyzing social networks. IEEE
Planned work also includes user experiments for better validation Transactions on Visualization and Computer Graphics, 13
of the technique as well as its integration into a complete graph (Nov-Dec 2007), 1302-1309.
visualization application that supports other features such as node [11] Herman, I., Melancon, G., and Marshall, M. S. 2000.Graph
search, overview windows, coordination with different visualization and navigation in information visualization: A
visualizations, filtering and fish-eye-like views. survey. IEEE Transactions on Visualization and Computer
Graphics, 6 (Jan-Feb 2000), 24-43.
6. ACKNOWLEDGMENTS [12] Kamada, T. and Kawai, S. 1989. An Algorithm for Drawing
We gratefully acknowledge the helpful comments of our General Undirected Graphs, Information Processing Letters,
colleagues as well as Jean-Daniel Fekete and Nathalie Henry. We 31(1989), 7–15.
also thank J.-D. Fekete and N. Henry for providing the datasets
[13] Lee, B., Plaisant, C., Parr, C., Fekete, J-D., and Henry, N.
we use in the paper. This work is partially sponsored by CNPq
2006. Task taxonomy for graph visualization. In Proceedings
(Brazilian Council for Research and Development), specially the
of the 2006 AVI workshop on BEyond time and errors.
CNPQ/INRIA cooperation program (grant nr. 490087/2005-1).
(Venice, Italy) BELIV 2006, ACM Press, New York, NY,
81-86, DOI= http://doi.acm.org/10.1145/1168149.1168168.
7. REFERENCES
[1] Amar, R., Eagan, J. and Stasko, J. 2005 Low-Level [14] Noack, A. 2003. Energy Models for Drawing Clustered
Components of Analytic Activity in Information Small-World Graphs. Technical Report 07/03, Computer
Visualization. In Proceedings of 11th IEEE Symposium on Science Reports, Brandenburg University of Technology at
Information Visualization (2005), 111-147 Cottbus.

[2] Battista, G., Eades, P., Tamassia, R., and Tollis I.G. 1999. [15] Noack. A. 2004. An Energy Model for Visual Graph
Graph Drawing: Algorithms for the Visualization of Graphs. Clustering. In Proceedings of the 11th International
Prentice Hall, New Jersey. Symposium on Graph Drawing (Perugia, Italy, Sep. 21-24),
GD 2003, Springer-Verlag, Berlin, LNCS 2912, 425-436.
[3] Barnes, J. and Hut, P. 1986. A hierarchical O(N log N)
Force-calculation Algorithm. Nature, 324(4). [16] Noack. A. 2005 Energy-Based Clustering of Graphs with
Nonuniform Degrees. In Proceedings of the 13th
[4] Bier, E. and Stone, M. 1986 Snap-dragging. ACM Computer International Symposium on Graph Drawing (Limerick,
Graphics, 20 (August 1986), 233-240. Ireland, Sep. 12-14), GD 2005, Springer-Verlag, Berlin,
[5] Davidson, R. and Harel, D. 1996. Drawing Graphs Nicely LNCS 3843, 309-320.
Using Simulated Annealing, ACM Transaction on Graphics, [17] Sugiyama, K. and Misue, K. 1995 A Simple and Unified
15 (4), 301–331. Method for Drawing Graphs: Magnetic-Spring Algorithm. In
[6] Eades, P. 1984. A Heuristic for Graph Drawing, Congressus Proceedings of the International Workshop on Graph
Numerantium, 42(1984), 149–160. Drawing, (Princeton, NJ, USA, October 1994), GD’94,
Springer-Verlag, Berlin, LNCS 894, 364-375.
[7] Frishman, Y. and Tal, A. 2007. Multilevel Graph Layout on
the GPU. IEEE Transactions on Visualization and Computer [18] Tejada, E. and Ertl, T. 2005 Large Steps in GPU-based
Graphics, 13 (Nov-Dec 2007), 1310-1319. Deformable Bodies Simulation. Simulation Modeling
Practice and Theory, 13(2005), 703-715.
[8] Fruchterman, T.M.J. and Reingold, E.M. 1991. Graph
Drawing by Force–Directed Placement. Software - Practice [19] Yi, J.S., Melton, R. Stasko, J., and Jacko, J. 2005 Dust &
& Experience, 21 (Nov 1991), 1129–1164. Magnet: multivariate information visualization using a
magnet metaphor. Information Visualization, 4 (2005), 239-
[9] Georgii, J., Echtler, F. and Westermann, R. 2005 Interactive
256.
simulation of deformable bodies on GPUs. In Proceedings of
Simulation and Visualization, 2005, 247- 258.

278