Routing Drawings in DiagramDisplays
Wei Lai
Department of Mathematics and Computing
University of Southern Queensland
Toowoomba,QLD 4350,Australia
wlai@usq.edu.au
Peter Eades
Department of Computer Science
University of Newcastle
Newcastle,NSW2308 Australia
eades@cs.newcastle.edu.au
Abstract
We are interested in the problem on how to lay out prac
tical graphs where nodes vary in shape and size.Apply
ing classical graph drawing algorithms to practical graphs
may result in overlapping nodes and/or edgenode intersec
tions.This is because such algorithms were often originally
designed for abstract graphs where nodes take up little or
no space.To make use of such algorithms for practical
graphs,we need some postprocesses to adjust a layout by
avoiding overlapping nodes and edgenode intersections.A
technique for disjoint node images has been developed.We
analyse several criteria and present a method for routing
drawings in diagram displays.Our method has proved to
be quite successfully in practice.
1.Introduction
A graph is a set of nodes and edges.Graphs are com
monly used to model relations in computer systems.Nodes
are used to represent objects in application,and edges rep
resent relationships between objects.Examples are data
ﬂow diagrams,state transition diagrams,ﬂow charts,PERT
charts,organisation charts,Petri nets and entityrelationship
diagrams.
With the recent dramatic decline in costs of computing
and graphics,pictorial representations of graphs are used
frequently in human computer interaction.The graphs are
conventionally drawn with nodes represented by the boxes
(perhaps enclosing some text) and edges represented by
lines between the boxes.
We are interested in the problemon howto lay out prac
tical graphs in applications.The termabstract graph layout
refers to layout techniques for abstract graphs where nodes
take up no size.The term practical graph layout refers to
layout techniques for practical graphs where nodes vary in
shape and size.
Most classical graph drawing algorithms (in [1]) produce
aesthetically pleasing abstract graph layouts.These algo
rithms can be applied to draw practical graphs as long as
the sizes of nodes take very little space.This is because
such algorithms were often originally designed for abstract
graphs where nodes take up little or no space.However,
in applications,the images of nodes are circles,boxes,dia
monds and similar shapes,and may contain a considerable
amount of text and graphics.In some systems ([5,8,14])
nodes are used to represent subgraphs,and may be quite
unpredictable in size and shape.Applying such algorithms
to practical graphs may result in overlapping nodes and/or
edgenode intersections.Algorithms which exemplify this
problem can be found in [3,4,9] – they produce diagrams
which are nicely symmetric and well spread out,and have
great potential for use in visualisation of network structures.
However nodes of nontrivial size in a diagramproduced by
these algorithms tend to overlap.
An example is illustrated in Figure 1;the algorithmfrom
[4] produces a structure as in Figure 1(a),and replacing the
nodes with rectangles gives the overlapping nodes in Fig
ure 1(b).We propose an approach here for practical graph
drawings.It includes two steps as follows.
1.Apply an abstract graph layout function to a practical
graph.
2.Use some postprocesses to avoid overlaps of node im
ages and edgenode intersections by rearranging the
graph layout generated by step 1.The rearrangement
should also preserve the “mental map” of the graph.
The forcescan algorithm [6] was designed for disjoint
node images.It can be used in our approach above to solve
the problem of overlapping nodes in a diagram while pre
serving the “mental map” of the diagram[7,13].
Furthermore,we need to solve the problemof edgenode
intersections in a diagram.This paper focuses on this prob
lem.We give our analysis of several criteria for routing
drawings and present a method for routing drawings in di
(a)
(b)
Figure 1.Output of a classical graph drawing
algorithm
agram displays.This method integrates the forcescan al
gorithmand applies it successfully to preventing edgenode
intersections and overlapping edges.
Before introducing the analysis of requirements and the
method for routing drawings in section 3,it is necessary
to describe the forcescan algorithm ﬁrst in the following
section.
2.The ForceScan Algorithm
Let us consider layout adjustment for ensuring disjoint
ness of node images.One simple approach is to use uniform
scaling.If
are real numbers with
,then scaling
gives a new position
to each node
deﬁned by
The resulting drawing has precisely the same geometrical
shape as the original – the transformation just “expands”
the diagram by a factor of
about the point
.Thus
the transformation preserves the mental map of a diagram.
Further,by choosing
large enough,we can ensure that the
node images are disjoint.The problemwith this simple ap
proach is that in practice the whole diagram tends to grow
too large.A typical case is illustrated in Figure 2.Here
the diagram of Figure 1(b) has been scaled about the cen
tre of the page,but the scaling pushes some nodes outside
the page boundary.The forcescan algorithmcan solve this
problem.It includes two major steps.
The ﬁrst step is to choose a “force”
between two
pairs
of nodes so that if
and
overlap then
pushes
Figure 2.Output of a scaling transformation
away from
.
The choice of the force function
is critical.experi
ence has shown that the function deﬁned as follows is suit
able.
Suppose that the two nodes’ central points are
and
,and sizes are
and
,respectively.We choose the direction of
to
be along the line from
to
.The intuition here is that a
force in this direction will preserve the mental map.
The magnitude of
is the difference between the “ac
tual distance”
and the “desirable distance”
between
the node images for
and
.In this way,the force is analo
gous to a spring which obeys Hooke’s law.The actual dis
tance
is the usual Euclidean distance between
and
.The “desirable distance”
is deﬁned as follows.Let
be the ﬁrst point along the line from
to
for
which either
or
.
The force
should not only make
and
disjoint but
make themas compact as possible.
We project the forces on horizontal (x) and vertical (y)
directions.That is,for
,we have
and
.
The second step is to scan the nodes by applying the
forces in both horizontal and vertical directions.
The horizontal scan is illustrated below.We will assume
that
;
HorizontalScan:
;
while
do
Supposethat
isthelargestintegersuchthat
;
;
for
to
do
;
;
Similarly,we can have the “Vertical Scan”.
The forcescan algorithm gives better results than the
uniformscaling.The output of the forcescan algorithmap
plied to Figure 1(b) is in Figure 3.We have proved that
the forcescan algorithmensures that its output has disjoint
node images and it preserves the mental map (see [13] for
the details of the mathematical proofs).
In this paper we focus on our experience of applying the
Figure 3.Output of the forcescan algorithm
forcescan algorithmin practice,especially in routing draw
ings.
We have experimented with the forcescan algorithm
over a wide class of sets of overlapping nodes and found
that it is quite effective.Now we show two case studies of
applying the forcescan algorithm to overlapping nodes as
follows.
The ﬁrst one is to apply the forcescan algorithmto com
pound graphs recursively.An example is shown as follows:.
the output of the forcescan algorithmrecursively on Figure
4 is Figure 5.The mental map in terms of orthogonal order
ing and topology of this diagramis preserved.
Figure 4.An compound graph with overlap
ping nodes
The second one is to use the forcescan algorithm for
dynamic layout.In interactive systems,a subgraph is of
ten changed.Examples are expanding or collapsing a sub
graph,and inserting or deleting a node in a subgraph.Figure
6 shows an example of inserting the node
into the sub
graph
in a diagram.In this case,only the subgraph
is
changed.We need to rearrange the nodes in
,and this may
resize
.Thus a rearrangement of the ancestors of
may
be needed.After applying a variation of the forcescan al
gorithmto the node A and its ancestors,the result is shown
in Figure 7.Note that the nodes
,
and
(subgraphs)
Figure 5.An example of applying the Force
scan recursively
do not need to be internally rearranged,since they are not
changed at all.When the subgraph
is rearranged,its par
ent
may be changed so that it needs to be rearranged.In
this way,dynamic graph drawings can be supported.
Figure 6.Inserting a node into a subgraph
3.Routing Drawings for Avoiding EdgeNode
Intersections
Applying classical graph drawing algorithms to practical
graphs may also suffer fromthe problemof intersections be
tween edges and nodes.An example is illustrated in Figure
9:the spring algorithmfrom[4] gives Figure 8,and replac
ing the nodes with rectangles gives not only the overlapping
nodes but edgenode intersections.
In the previous section,we have described how to solve
Figure 7.An example of dynamically chang
ing a subgraph layout
Figure 8.A classical graph drawing
the problemof overlapping nodes.For a diagramwith dis
joint node images,there are many routing algorithms which
may be applied to solve the problem of edgenode inter
sections.These algorithms,such as [12,10,11,2],were
designed for ﬁnding a shortest path in the applicable metric
between two speciﬁed points (source and destination) while
avoiding interactions with a set of “obstacles”.
3.1.Requirements for routing drawings
Besides avoiding edgenode intersections in a graph
drawing,there are several criteria for the readability of a
graph drawing:
1.Minimising the number of edge crossings.
2.Minimising the number of edge bends.
Figure 9.An example of edgenode intersec
tions
3.Minimising the total length of edges.
However,these criteria are often in conﬂict.Figure 10
shows two examples of drawing a routing from the node
to the node
.Figure 10(a) shows a shortest path with
one crossing,Figure 10(b) shows a longer path with fewer
bends and no crossings.Different applications may focus
on different criteria,so the selection of the routing drawing
should depend on the requirement of the user.
a
b
(a)
(b)
b
a
Figure 10.An example of different routings
3.2.A method for routing drawings
We develop a method for routing drawings in diagram
displays based on our forcescan algorithm.The steps of
this method are described as follows:
1.Ensure a diagram
has disjoint node images by ap
plying a variation of the forcescan algorithm,
2.Apply a routing algorithm according to the selected
criteria (for example,focus on the shortest path),
3.Each bending position of the edge decided by step 2 is
replaced by a dummy node with small size,so a new
graph
is formed,
4.Apply a variation of the forcescan algorithm to the
graph
.
To test our method,in step 2 we develop a routing al
gorithm,similar to [12,10,11,2],focusing on the shortest
path.Figure 11 shows the output of using our method on
Figure 9(b).
Figure 11.Output of our routing method
More examples are shown on Figure 12 and 13,in which
Figure 12(b) and Figure 13(b) are outputs of using this
method on Figure 12(a) and Figure 13(a),respectively.
One feature of our method is that by using step 3 and step
4,we can prevent overlapping edges and control the density
of edges in speciﬁc areas.For instance,Figure 12(b) and
Figure 13(b) show disjoint edges in a “channel” between
nodes 2 and 3.If there are more edges through a “channel”,
our method rearranges nodes (including the dummy nodes
for bends) to make this “channel” wide enough.For exam
ple,the “channel” between nodes 2 and 3 in Figure 13(b) is
wider than that in Figure 12(b).
4.Conclusion
The literature on abstract graph layout is quite large com
pared to that on practical graph layout.We have discussed
the problemon howto lay out practical graphs where nodes
vary in shape and size.The central concept is to develop
(a)
(b)
Figure 12.An example of ensuring disjoint
edges
(a)
(b)
Figure 13.A further example of ensuring dis
joint edges
facilities to adjust a diagram so that it is more suitable to
represent an application in practice.
We present some techniques to deal with problems of
overlapping nodes and edgenode intersections.We have
analysed the requirements and proposed a method for rout
ing drawings in diagram displays.Our method has proved
to be quite successfully in practice.
We feel that the layout creation for practical graphs needs
signiﬁcant further work.
References
[1] G.D.Battista,P.Eades,R.Tamassia,and I.Tollis.Algo
rithms for drawing graphs:an annotated bibliography.Tech
nical report,Department of Computer Science,Brown Uni
versity,1994.
[2] J.P.Cohoon and D.S.Richards.Optimal tworerminal wire
routing.In C.E.Leiserson,editor,Advanced Research in
VLSI  Proceedings of the Fourth MIT Conference,pages
259–280.The MIT Press,1986.
[3] R.Davidson and D.Harel.Drawing graph nicely using sim
ulated annealing.Technical Report CS8913,Department of
Applied Mathematics & Computer Science,The Weizmann
Institute of Science,July 1989.
[4] P.Eades.A heuristic for graph drawing.Congressus Nu
merantium,42:149–160,1984.
[5] P.Eades and W.Lai.Visual interface design for relational
systems.In Proceedings of the 5th Australian Software En
gineering Conference,pages 259–263,Sydney,May 1990.
[6] P.Eades and W.Lai.Algorithms for disjoint node im
ages.Proceedings of the 15th Australian Computer Science
Conference,Australian Computer Science Communications,
14(1):577–265,1992.
[7] P.Eades,W.Lai,K.Misue,and K.Sugiyama.Preserv
ing the mental map of a diagram.In Proceedings of COM
PUGRAPHICS 91,pages 34–43,Sesimbra,Portugal,Sept.
1991.
[8] D.Harel.On visual formalisms.Communications of the
ACM,31(5):514–530,1988.
[9] T.Kamada and S.Kawai.An algorithmfor drawing general
undirected graphs.Information Processing Letters,31(1):7–
15,1989.
[10] R.C.Larson and V.O.K.Li.Finding minimum rectilin
ear distance paths in the paths in the presence of barriers.
Networks,11:285–304,1981.
[11] D.T.Lee and F.P.Preparata.Euclidean shortest paths in
the presence of rectilinear barriers.Networks,14:393–410,
1984.
[12] T.LozanoPerez and M.A.Wesley.An algorithm for plan
ning collisionfree paths among polyhedral obstacles.Com
munications of ACM,22:560–570,1979.
[13] K.Misue,P.Eades,W.Lai,and K.Sugiyama.Layout ad
justment and the mental map.Journal of Visual Languages
and Computing,(6):183–210,1995.
[14] K.Sugiyama and K.Misue.Visualization of structural in
formation:Automatic drawing of compound digraphs.IEEE
Transactions on Systems,Man and Cybernetics,21(4):876–
892,1991.
Enter the password to open this PDF file:
File name:

File size:

Title:

Author:

Subject:

Keywords:

Creation Date:

Modification Date:

Creator:

PDF Producer:

PDF Version:

Page Count:

Preparing document for printing…
0%
Σχόλια 0
Συνδεθείτε για να κοινοποιήσετε σχόλιο