Hierarchies and Trees 1

1
Hierarchies and Trees 1

• CS 7450 - Information Visualization
• March 8, 2005
• John Stasko

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

3
Hierarchies in the World

• Pervasive
• Family histories, ancestries
• File/directory systems on computers
• Organization charts
• Animal kingdom Phylum,, genus,
• Object-oriented software classes
• ...

4
Trees

• Hierarchies often represented as trees
• Directed, acyclic graph
• Two main representation schemes
• Node-link (today)
• Space-filling

5
Node-Link Diagrams

• Root at top, leaves at bottom is very common

6
Sample Representation
Johnson Shneiderman, 91
7
Examples
Good for? Bad for?
SearchUnderstanding structure
8
Why Put Root at Top?
Root can be at center with levels growing
outward too
Can any node be the root?
9
Drawing a Tree

• How does one draw this?
• DFS
• Percolate requirements upward

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

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

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

13
Cone Trees
Developed at Xerox PARC 3D views
of hierarchies such as file systems
Robertson, Mackinlay, Card CHI 91
Video
14
Alternate Views
15
Cone Trees

• Positives negatives?
• Discuss

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

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

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 trees root at the center
• Use animation to navigate along this
  representation of the plane

Lamping and Rao, JVLC 96
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

20
1
2
3
Clicking on the blue node brings it into focus
at the center
4
5
21
Watch it Work

• Video
• Demo from Inxight web site
• Live demo from laptop showing file system

22
Key Attributes

• Natural magnification (fisheye) in center
• Layout depends only on 2-3 generations from
  current node
• Smooth animation for change in focus
• Dont draw objects when far enough from root
  (simplify rendering)

23
Problems

• What might be problems with this approach?

24
Problems

• Orientation
• Watching the view can be disorienting
• When a node is moved, its children dont 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

25
How about 3D?

• Can same hyperbolic transformation be applied,
  but now use 3D space?
• Sure can
• Have fun with the math!

26
H3Viewer
Munzner, IEEE CGA 98
Video
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 hemispheres surface

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

29
Navigation
Translation of a node to the center
Rotation around the same node
30
Performance

• Handle much larger graphs, i.e. gt100,000 edges
• Support dynamic exploration interactive
  browsing
• Maintain a guaranteed frame rate

http//graphics.stanford.edu/munzner/
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
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

33
Example
34
Composition
35
Old School

• After all the interest in 3D and hyperbolic
  techniques in the 90s, recently, there has been
  renewed interest in the old 2D methods (just done
  better)

36
Degree-of-Interest Trees

• Uses traditional 2D techniques with additions
• Drawing based on estimation of users 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
37
Example Operations
1. Display of a uniform tree of 4 levels
2. Same table with focus on Node 3
3. Same tree expanded down to a leaf node
38
Useful Contents
Organization chart with over 400 nodes accessible
over WWW through Web browser
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, Bederson InfoVis 02
40
SpaceTree Example
Video
41
Polyarchy Visualization

• Visualizing multiple intersecting hierarchies
• Developed somevisual transitiontechniquesinclud
  ing animation

Robertson, Cameron, Czerwinski, Robbins CHI
02, InfoVis Journal 02
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?

43
HW 6

• Due a week from today
• Thursdays lecture may help

44
Project

• Be working on design ideas
• Mid-term report due next Thursday

45
Upcoming

• Trees 2 - Space-filling tree representations
• Reading
• Chapter 8
• Johnson Shneiderman
• Text documents

46
References

• Spence and CMS texts
• All referred to papers
• Cai Krohne and Pan Wang F 99 slides

47
Extra Slides

• Multitrees

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

49
Centrifugal View

• A view of the ancestors (context) and descendants
  (children) of an individual (interior) node
• Transitions between centrifugal views can be
  animated

50
Centrifugal View
Directions
51
Contents Fisheye View

• Downward tree of contents rooted at the context
  User JMZ

52
Contexts Fisheye View

• Inverted tree of contexts rooted at the content
  Directions

53
Integrated Fisheye View