1
Hierarchies and Trees 1
CS 7450 - Information VisualizationFebruary 24, 2004John Stasko
Spring 2004 CS 7450 2
Hierarchies
• Definition− Data repository in which cases are related to
subcases− Can be thought of as imposing an ordering in
which cases are parents or ancestors of other cases
2
Spring 2004 CS 7450 3
Hierarchies in the World
• Pervasive− Family histories, ancestries− File/directory systems on computers− Organization charts− Animal kingdom: Phylum,…, genus,…− Object-oriented software classes− ...
Spring 2004 CS 7450 4
Trees
• Hierarchies often represented as trees− Directed, acyclic graph
• Two main representation schemes− Node-link (today)− Space-filling
3
Spring 2004 CS 7450 5
Node-Link Diagrams
• Root at top, leaves at bottom is very common
Spring 2004 CS 7450 6
Sample Representation
Johnson & Shneiderman, ‘91
4
Spring 2004 CS 7450 7
Examples
Good for?
Bad for?
Search
Understandingstructure
Spring 2004 CS 7450 8
Why Put Root at Top?
Root can be atcenter with levelsgrowing outwardtoo
Can any nodebe the root?
5
Spring 2004 CS 7450 9
Drawing a Tree
How does one draw this?• DFS• Percolate requirements upward
Spring 2004 CS 7450 10
Potential Problems
• For top-down, width of fan-out uses up horizontal real estate very quickly− At level n, there are 2n nodes
• Tree might grow a lot along one particular branch− Hard to draw it well in view without knowing
how it will branch
6
Spring 2004 CS 7450 11
InfoVis Solutions
• Techniques developed in Information Visualization largely try to assist the problems identified in the last slide
• Alternatively, Information Visualization techniques attempt to show more attributes of data cases in hierarchy or focus on particular applications of trees
Spring 2004 CS 7450 12
3D Approaches
• Add a third dimension into which layout can go
• Compromise of top-down and centered techniques mentioned earlier
• Children of a node are laid out in a cylinder “below” the parent− Siblings live in one of the 2D planes
7
Spring 2004 CS 7450 13
Cone Trees
Video
Developed atXerox PARC
3D views ofhierarchiessuch as filesystems
Robertson, Mackinlay, Card CHI ‘91
Spring 2004 CS 7450 14
Alternate Views
8
Spring 2004 CS 7450 15
Cone Trees
• Positives & negatives?− Discuss
Spring 2004 CS 7450 16
Cone Trees
• Positive− More effective area to
lay out tree− Use of smooth
animation to help person track updates
− Aesthetically pleasing
• Negative− As in all 3D, occlusion
obscures some nodes− Non-trivial to
implement and requires some graphics horsepower
9
Spring 2004 CS 7450 17
Alternative Solutions
• Change the geometry• Apply a hyperbolic transformation to the
space• Root is at center, subordinates around• Apply idea recursively, distance decreases
between parent and child as you move farther from center, children go in wedge rather than circle
Spring 2004 CS 7450 18
Hyperbolic Browser
• Focus + Context Technique− Detailed view blended with a global view
• First lay out the hierarchy on the hyperbolic plane
• Then map this plane to a disk• Start with the tree’s root at the center • Use animation to navigate along this
representation of the planeLamping and Rao, JVLC ‘96
10
Spring 2004 CS 7450 19
2D Hyperbolic Browser
• Approach: Lay out the hierarchy on the hyperbolic plane and map this plane onto a display region.
• Comparison− A standard 2D browser: 100
nodes (w/3 character text strings)
− Hyperbolic browser: 1000 nodes, about 50 nearest the focus can show from 3 to dozens of characters
Spring 2004 CS 7450 20
1 2
54
3
Clicking on the bluenode brings it into focus at the center
11
Spring 2004 CS 7450 21
Watch it Work
• Video• Demo from Inxight web site• Live demo from laptop showing file
system
Spring 2004 CS 7450 22
Key Attributes
• Natural magnification (fisheye) in center• Layout depends only on 2-3 generations
from current node• Smooth animation for change in focus• Don’t draw objects when far enough from
root (simplify rendering)
12
Spring 2004 CS 7450 23
Problems
• What might be problems with this approach?
Spring 2004 CS 7450 24
Problems
• Orientation− Watching the view can be disorienting− When a node is moved, its children don’t
keep their relative orientation to it as in Euclidean plane, they rotate
− Not as symmetric and regular as Euclidean techniques, two important attributes in aesthetics
13
Spring 2004 CS 7450 25
How about 3D?
• Can same hyperbolic transformation be applied, but now use 3D space?
• Sure can• Have fun with the math!
Spring 2004 CS 7450 26
H3Viewer
Munzner, IEEE CG&A ‘98
Video
14
Spring 2004 CS 7450 27
Layout
• Find a spanning tree from an input graph− Use domain-specific knowledge
• Layout algorithm− Nodes are laid out on the surface of a
hemisphere− A bottom-up pass to estimate the radius
needed for each hemisphere− A top-down pass to place each child node on
its parental hemisphere’s surface
Spring 2004 CS 7450 28
Drawing
• Maintain a target frame by showing less of the context surrounding the node of interest during interactive browsing
• Fill in more of the surrounding scene when the user is idle
15
Spring 2004 CS 7450 29
Navigation
Translation of a node to the center
Rotation around the same node
Spring 2004 CS 7450 30
Performance
• Handle much larger graphs, i.e. >100,000 edges
• Support dynamic exploration & interactive browsing
• Maintain a guaranteed frame rate
http://graphics.stanford.edu/~munzner/
16
Spring 2004 CS 7450 31
See the Forest...
• How about collections of trees? (Forests)
• Multitrees (M-trees)− “A class of directed acyclic graphs (DAGs)…
(that) have large easily identifiable substructures that are trees.”
− M-trees are DAGs, not trees, but…
Furnas & Zacks, CHI ‘94
Spring 2004 CS 7450 32
Multitrees are DAGs
• Can be built by adding new tree structure above existing subtrees
• The descendants of any node form a tree of contents
• The ancestors of any node form a tree of contexts
17
Spring 2004 CS 7450 33
Example
Spring 2004 CS 7450 34
Composition
18
Spring 2004 CS 7450 35
Old School
• After all the interest in 3D and hyperbolic techniques in the ’90’s, recently, there has been renewed interest in the old 2D methods (just done better)
Spring 2004 CS 7450 36
Degree-of-Interest Trees
• Uses traditional 2D techniques with additions:− Drawing based on estimation of user’s DOI− Elision of nodes with low DOI− Geometric scaling of node size based on DOI− Semantic scaling of node contents with size− Clustered representations of large,
unexpanded branches− Smooth animated focus transitions
Card & NationAVI ‘02
19
Spring 2004 CS 7450 37
Example Operations
1. Display of a uniform tree of 4 levels2. Same table with focus on Node 3
3. Same tree expanded down to a leaf node
Spring 2004 CS 7450 38
Useful Contents
Organization chart with over 400 nodes accessible over WWW through Web browser
20
Spring 2004 CS 7450 39
SpaceTree
• Uses conventional 2D layout techniques• Adds:
− Dynamic rescaling of branches for better space use
− Smart camera movements− Preview icons for branch topologies
Grosjean, Plaisant, BedersonInfoVis ‘02
Spring 2004 CS 7450 40
SpaceTree Example
Video
21
Spring 2004 CS 7450 41
Polyarchy Visualization
• Visualizing multiple intersecting hierarchies
• Developed somevisual transitiontechniquesincluding animation
Robertson, Cameron, Czerwinski, & RobbinsCHI ’02, InfoVis Journal ‘02
Spring 2004 CS 7450 42
Food for Thought
• Which of these techniques are useful for what purpose?
• How well do they scale?
• What if we want to portray more variables of each case?
22
Spring 2004 CS 7450 43
Project
• Tips for contest groups• Tips for others
Spring 2004 CS 7450 44
Upcoming
• Trees 2 - Space-filling tree representations− Reading
Chapter 8Johnson & Shneiderman
• Graphs and networks
23
Spring 2004 CS 7450 45
References
• Spence and CMS texts• All referred to papers• Cai & Krohne and Pan & Wang F ‘99 slides
Spring 2004 CS 7450 46
Extra Slides
• Multitrees
24
Spring 2004 CS 7450 47
No Diamonds
• Diamonds are not permitted
• Occurs when there are 2 distinct directed paths between 2 nodes.
• At most one directed path between 2 nodes.
Spring 2004 CS 7450 48
Centrifugal View
• A view of the ancestors (context) and descendants (children) of an individual (interior) node
• Transitions between centrifugal views can be animated
25
Spring 2004 CS 7450 49
Centrifugal View
Directions
Spring 2004 CS 7450 50
Contents Fisheye View
• Downward tree of contents rooted at the context “User JMZ”
26
Spring 2004 CS 7450 51
Contexts Fisheye View
• Inverted tree of contexts rooted at the content “Directions”
Spring 2004 CS 7450 52
Integrated Fisheye View
