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

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 entity-relationship

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

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

graph.

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-

(a)

(b)

Figure 1.Output of a classical graph drawing

algorithm

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 ﬁrst in the following

section.

2.The Force-Scan 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 force-scan 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 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-

ings.

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

follows.

The ﬁrst 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-

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 force-scan 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 Edge-Node

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 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 ﬁ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 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-

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

graph

is formed,

4.Apply a variation of the force-scan 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 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

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

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

892,1991.

## Comments 0

Log in to post a comment