Smoother Transitions BetweenBreadth-First-Spanning-Tree-Based Drawings

Christopher Homan1, Andrew Pavlo2, and Jonathan Schull1

1 Rochester Institute of Technology2 University of Wisconsin-Madison

We demonstrate a collection of techniques that seek to make the transition be-tween drawings based on two topologically distinct spanning trees of the samegraph as clear as possible.

As Herman, Melancon, and Marshall note [HMM00], one way to draw a largegraph is to extract a spanning tree from it, use a tree layout algorithm [CK95,Ead92, RT81, II90, TM02, GADM04, LY05] to draw the spanning tree, and thenadd back the graph edges not included in the spanning tree. The problem withthis approach is that the drawings tend to favor the edges that are part of thespanning tree, even though they may be no more important in the underlyingstructure than non-spanning tree edges. One way of dealing with this problemis to facilitate exploration of multiple spanning trees.

Yee et al. [YFDH01] describe a system that produces layouts based on Eades’radial layout algorithm [Ead92] and lets users interactively select a new nodeas root. When this happens, the system first calculates a breadth-first spanningtree rooted at the selected node, and then smoothly transitions to a topologi-cally distinct spanning tree. Although Yee et al.’s static layouts are free of edgecrossings, transitions between trees can be hard to follow because there edgecrossings do occur.

A number of tree-based graph visualizations, such as RINGS [TM02], RDT[JP98], and others [LRP95, Mun97, Wil99] also allow users to reconfigure viewsof a given tree, and some even allow users to change the root node. They donot, however, let the user select and smoothly transition to a different spanningtree built from a different collection of edges. To our knowledge only Yee et al.’ssystem [YFDH01] and one mentioned by Melancon and Herman [MH98] supportsmooth transitions between different spanning trees of the same graph.

We have built a system to use as a test bed for improving the sort of tran-sitions between topologically distinct graphs that Yee et al. and Melancon andHerman use. Here we present some preliminary results. Like Yee et al. we onlyuse breadth-first search trees. These often share common subtrees, especiallywhen the roots of the trees are closely related. A major thrust of our researchconcerns layouts that make it easier for users to perceive the migration of thesecommon subtrees as they disconnect from their old parents, and then reconnectat their new parents’ locations.

As illustrated in our poster, our static layouts, use a variant of what Lin andYen call “a balloon drawing subtree with non-uniform size” [LY05] (flattened-out cone drawings [CK95, JP98]) rather than the radial layout of Eades [Ead92]

M. Kaufmann and D. Wagner (Eds.): GD 2006, LNCS 4372, pp. 442–445, 2007.c© Springer-Verlag Berlin Heidelberg 2007

Smoother Transitions Between Breadth-First-Spanning-Tree-Based Drawings 443

and Yee et al. Our variant balloon drawing method places children not aroundthe entire balloon, but rather on the centrifugal semi-circle of the balloon thatlies outside the parent’s balloon. This allows us to guarantee that the distancefrom a nonroot node to the root monotonically increases with the depth of thenode, even though balloon layouts forego the stronger invariant that all nodesof a given depth are equidistant from the parent. It also allows us to replacenode and link diagrams with solid-looking structures with highly idiosyncraticsilhouettes, and with sub-structures that can be gracefully detached and moved,to striking visual effect, from the parent in an old spanning tree to the newparent in the new spanning tree.

Thus, rather than adopt the classical balloon tree convention of drawing eachnode as a point lying on the perimeter of its balloon, we draw it as a hemi-sphere covering the node’s balloon. Building on Biederman’s [Bie87] and Iraniand Ware’s [IW03] research on the human visual system’s pre-attentive capacityto construct shape representations from shading and silhouette, we also shadethe hemispheres to emphasize the idiosyncratic form of each structure. (Em-pirical work will be required to determine whether a visualization this strangeis useful, but the work of Irani and Ware suggests that such idiosyncraticallyshaped three-dimensional forms enhance memory and perception, especially bynovices, of underlying graph relationships.)

Our animation algorithm is, to our knowledge, novel. Given a graph drawnaccording to a breadth-first spanning tree (hereafter known as the “old drawing”)and a node chosen to be the new root, the algorithm:

1. Calculates a breadth-first spanning tree rooted at the chosen node.2. Calculates a new drawing based on the new spanning tree. Stores the angle

and distance from each nonroot node to its new parent in the new layout (ineffect, each such node’s parent becomes the origin of the coordinate systemthat holds the node’s position) we call this distance and angle the new relativecoordinates of the node.

3. Calculates for each nonroot node the angle and distance in the old drawingfrom its new parent. We call these the old relative coordinates.

Then the algorithm generates each frame of the animation by interpolatingbetween the old and new relative coordinates and calculating the absolute posi-tion of each node by recursively calculating the absolute position of its parent.More details are in [PHS06].

References

[Bie87] Irving Bierderman. Recognition-by-components: A theory of human im-age understanding. Psychological Review, 94(2):115–147, 1987.

[CK95] J. Carrire and R. Kazman. Research report: Interacting with huge hier-archies: Beyond cone trees. In Proceedings of the IEEE Symposium onInformation Visualization, pages 74–81, 1995.

[Ead92] Peter Eades. Drawing free trees. Bulletin of the Institute of Combinatoricsand its Applications, 5:10–36, 1992.

444 C. Homan, A. Pavlo, and J. Schull

[GADM04] S. Grivet, D. Auber, J.P. Domenger, and G. Melancon. Bubble treedrawing algorithm. In International Conference on Computer Vision andGraphics, pages 633–641, 2004.

[HMM00] Herman, G. Melancon, and M. S. Marshall. Graph visualization andnavigation in information visualization: A survey. IEEE Transactions onVisualization and Computer Graphics, 6(1):24–43, 2000.

[II90] J. Q. Walker II. A node-positioning algorithm for general trees. Software:Practice and Experience, 20(7):685–705, 1990.

[IW03] Pourang Irani and Colin Ware. Diagramming information structures us-ing 3d perceptual primitives. ACM Transactions on Computer-HumanInteraction, 10(1):1–19, 2003.

[JP98] Chang-Sung Jeong and Alex Pang. Reconfigurable disc trees for visu-alizing large hierarchical information space. In Proceedings of the IEEESymposium on Information Visualization, pages 19–25, 1998.

[LRP95] John Lamping, Ramana Rao, and Peter Pirolli. The hyperbolic browser:A focus+context technique based on hyperbolic geometry for visualiz-ing large hierarchies. In CHI ’95: Proceedings of the SIGCHI conferenceon Human factors in computing systems, pages 401–408, New York, NY,USA, 1995. ACM Press/Addison-Wesley Publishing Co.

[LY05] Chun-Cheng Lin and Hsu-Chun Yen. On balloon drawings of rootedtrees. In GD ’05: Revised Papers from the 13th International Symposiumon Graph Drawing, pages 285–296, London, UK, 2005. Springer-Verlag.

[MH98] Guy Melancon and Ivan Herman. Circular drawings of rooted trees. Tech-nical Report INS-R9817, CWI (Centre for Mathematics and ComputerScience), Amsterdam, The Netherlands, 1998.

[Mun97] Tamara Munzner. H3: Laying out large directed graphs in 3d hyperbolicspace. In Proceedings of the IEEE Symposium on Information Visualiza-tion, pages 2–10, 1997.

[PHS06] Andrew Pavlo, Christopher M. Homan, and Jonathan Schull. A parent-centered radial layout algorithm for interactive graph visualizationand animation. Technical Report http://arxiv.org/abs/cs/0606007,arXiv.org, 2006.

[RT81] Edward M. Reingold and John S. Tilford. Tidier drawings of trees. IEEETransactions on Software Engineering, 7(2):223–228, 1981.

[TM02] Soon Tee Teoh and Kwan-Liu Ma. Rings: A technique for visualizing largehierarchies. In GD ’02: Revised Papers from the 10th International Sym-posium on Graph Drawing, pages 268–275, London, UK, 2002. Springer-Verlag.

[Wil99] Graham J. Wills. NicheWorks — interactive visualization of very largegraphs. Journal of Computational and Graphical Statistics, 8(2):190–212,1999.

[YFDH01] Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, and Marti A. Hearst. An-imated exploration of dynamic graphs with radial layout. In Proceedingsof the IEEE Symposium on Information Visualization, pages 43–50, 2001.

Smoother Transitions Between Breadth-First-Spanning-Tree-Based Drawings 445

(a)

(b)

(c)

(d)

(e)

Fig

.1.

An

exam

ple

tran

sition

betw

een

two

span

ning

tree

sdr

awn

usin

gE

ades

’ra

dial

layo

utal

gorith

m.

Nod

esar

epl

aced

onring

sco

ncen

tric

toth

ero

otno

deth

atco

rres

pond

toth

eir

dept

hin

the

tree

.T

hick

edge

sde

note

span

ning

tree

edge

s;th

ined

ges

deno

teno

n-sp

anni

ngtr

eeed

ges.

InFig

ure

1(b)

ane

wro

otno

deis

sele

cted

,th

eth

ick

lines

are

redr

awn

tode

note

edge

sof

the

new

span

ning

tree

,an

dth

egr

aph

begi

nsto

tran

sition

toth

efin

alla

yout

for

the

new

span

ning

tree

,sh

own

inFig

ure

1(e)

.

(a)

(b)

(c)

(d)

(e)

Fig

.2.In

this

alte

rnat

ive

radi

alla

yout

ofth

esa

me

tree

asFig

ure

1,no

des

are

draw

nas

“bal

loon

s”w

here

each

child

node

ispo

sition

edon

the

cent

rifu

galse

mi-ci

rcle

ofth

eba

lloon

that

lies

outs

ide

its

pare

nt.N

oth

ick

edge

sne

edto

bedr

awn

inFig

ure

2(a)

,be

caus

eed

ges

asw

ellas

node

sar

ede

note

dby

the

over

lapp

ing

ballo

ons.

InFig

ure

2(b)

,a

new

node

isse

lect

ed,th

ick

edge

sar

eus

edto

deno

teth

eed

ges

ofth

ene

wsp

anni

ngtr

eeed

ges,

and

the

grap

hbe

gins

totr

ansition

toth

efin

alla

yout

for

the

new

span

ning

tree

inFig

ure

2(e)

,in

whi

chex

plic

tly

draw

nsp

anni

ngtr

eeed

ges

are

agai

nun

nece

ssar

y.