Routing Drawings in Diagram Displays

brrrclergymanNetworking and Communications

Jul 18, 2012 (4 years and 9 months ago)


Routing Drawings in DiagramDisplays
Wei Lai
Department of Mathematics and Computing
University of Southern Queensland
Toowoomba,QLD 4350,Australia
Peter Eades
Department of Computer Science
University of Newcastle
Newcastle,NSW2308 Australia
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 edge-node 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 post-processes to adjust a layout by
avoiding overlapping nodes and edge-node 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.
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
flow diagrams,state transition diagrams,flow charts,PERT
charts,organisation charts,Petri nets and entity-relationship
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
edge-node 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
2.Use some post-processes to avoid overlaps of node im-
ages and edge-node intersections by rearranging the
graph layout generated by step 1.The rearrangement
should also preserve the “mental map” of the graph.
The force-scan 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 edge-node
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-
Figure 1.Output of a classical graph drawing
agram displays.This method integrates the force-scan al-
gorithmand applies it successfully to preventing edge-node
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 force-scan algorithm first in the following
2.The Force-Scan Algorithm
Let us consider layout adjustment for ensuring disjoint-
ness of node images.One simple approach is to use uniform
￿ ￿ 
are real numbers with
 ￿ ￿
,then scaling
gives a new position
￿ 

￿ 

to each node

defined 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
￿ ￿  ￿
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 force-scan algorithmcan solve this
problem.It includes two major steps.
The first step is to choose a “force”

between two
￿ 
of nodes so that if


overlap then

Figure 2.Output of a scaling transformation

away from

The choice of the force function

is critical.experi-
ence has shown that the function defined as follows is suit-
Suppose that the two nodes’ central points are

￿ 

￿ 


￿ 

￿ 

,and sizes are
￿ 

￿ 

￿ 

￿ 

,respectively.We choose the direction of

be along the line from


.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”

the node images for


.In this way,the force is analo-
gous to a spring which obeys Hooke’s law.The actual dis-

is the usual Euclidean distance between


.The “desirable distance”

is defined as follows.Let
 ￿ ￿ ￿  ￿
be the first point along the line from


which either
  ￿ 

 ￿

￿ 

  ￿ 

 ￿

￿ 

The force

should not only make


disjoint but
make themas compact as possible.
We project the forces on horizontal (x) and vertical (y)
directions.That is,for

,we have


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

￿ 

￿ ￿ ￿ ￿ ￿ 

 ￿ ￿
 ￿   


￿ 
 ￿￿
￿ ￿ ￿ ￿ ￿ 

￿ ￿ 
 ￿  ￿  ￿ ￿  

 ￿  ￿ ￿
  

￿￿ 

￿ ￿
 ￿  ￿ ￿
Similarly,we can have the “Vertical Scan”.
The force-scan algorithm gives better results than the
uniformscaling.The output of the force-scan algorithmap-
plied to Figure 1(b) is in Figure 3.We have proved that
the force-scan 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 force-scan algorithm
force-scan algorithmin practice,especially in routing draw-
We have experimented with the force-scan 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 force-scan algorithm to overlapping nodes as
The first one is to apply the force-scan algorithmto com-
pound graphs recursively.An example is shown as follows:.
the output of the force-scan 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 force-scan 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-

in a diagram.In this case,only the subgraph

changed.We need to rearrange the nodes in

,and this may

.Thus a rearrangement of the ancestors of

be needed.After applying a variation of the force-scan al-
gorithmto the node A and its ancestors,the result is shown
in Figure 7.Note that the nodes



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-

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 Edge-Node
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 edge-node 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 edge-node inter-
sections.These algorithms,such as [12,10,11,2],were
designed for finding a shortest path in the applicable metric
between two specified points (source and destination) while
avoiding interactions with a set of “obstacles”.
3.1.Requirements for routing drawings
Besides avoiding edge-node 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 edge-node intersec-
3.Minimising the total length of edges.
However,these criteria are often in conflict.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.
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 force-scan 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 force-scan 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

is formed,
4.Apply a variation of the force-scan algorithm to the

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 specific 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).
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
Figure 12.An example of ensuring disjoint
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 edge-node 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
significant further work.
[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-
[2] J.P.Cohoon and D.S.Richards.Optimal two-rerminal 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 CS89-13,Department of
Applied Mathematics & Computer Science,The Weizmann
Institute of Science,July 1989.
[4] P.Eades.A heuristic for graph drawing.Congressus Nu-
[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,
[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.
[8] D.Harel.On visual formalisms.Communications of the
[9] T.Kamada and S.Kawai.An algorithmfor drawing general
undirected graphs.Information Processing Letters,31(1):7–
[10] R.C.Larson and V.O.K.Li.Finding minimum rectilin-
ear distance paths in the paths in the presence of barriers.
[11] D.T.Lee and F.P.Preparata.Euclidean shortest paths in
the presence of rectilinear barriers.Networks,14:393–410,
[12] T.Lozano-Perez and M.A.Wesley.An algorithm for plan-
ning collision-free 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–