Smoother Transitions Between Breadth-First-Spanning-Tree …cmh/graphdrawing06.pdf · radial layout...
Transcript of Smoother Transitions Between Breadth-First-Spanning-Tree …cmh/graphdrawing06.pdf · radial layout...
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.