Elastic Hierarchies: Combining
Treemaps and Node-Link Diagrams
Shengdong Zhao, Michael J. McGuffin, Mark H. Chignell
University of Toronto
Hierarchies (Trees)
• Definition
•
Data where cases relate to subcases
• Examples
•
•
•
•
•
Family histories, ancestries
File/directory systems on computers
Organization charts
Animal kingdom: phylum, genus
Object-oriented software classes
2
University of Toronto
Common Tree Representations
Node-Link
Containment
3
University of Toronto
Alignment,
Adjacency
Outline
Common Tree Representations
Node-Link
Containment
Node-Link
Diagram
4
University of Toronto
Alignment,
Adjacency
Outline
Common Tree Representations
Node-Link
Containment
Node-Link
Diagram
Treemap
5
University of Toronto
Alignment,
Adjacency
Outline
Common Tree Representations
Node-Link
Containment
Alignment,
Adjacency
Node-Link
Diagram
Treemap
Sunburst
6
University of Toronto
Outline
Common Tree Representations
Node-Link
Containment
Alignment,
Adjacency
Node-Link
Diagram
Treemap
Sunburst
7
University of Toronto
Outline
Explorer
Tree Visualization Challenges
•
•
•
•
Structure AND data within items
Scalability (exponential growth)
Context (when focus changes)
Multiple
[Furnas & Zacks]
hierarchies or
polyarchies
• Multiple
foci
[Robertson]
8
University of Toronto
Tree Visualization Challenges
• Different local properties
• Topology (dense vs. sparse)
• Data content (image vs. text)
9
University of Toronto
Tree Visualization Challenges
• Different local properties
• Topology (dense vs. sparse)
• Data content (image vs. text)
• Dynamic data
• Hierarchies evolve
• Adjustment required for content,
context, topology
10
University of Toronto
Single Representation Limitations
Node-Link
Diagram
Treemap
11
University of Toronto
Sunburst
Explorer
Single Representation Limitations
Node-Link
Diagram
Treemap
Sunburst
• Structure vs. data within items
12
University of Toronto
Explorer
Single Representation Limitations
Node-Link
Diagram
Treemap
Sunburst
• Structure vs. data within items
• Expressivity
13
University of Toronto
Explorer
Single Representation Limitations
Node-Link
Diagram
Treemap
Sunburst
• Structure vs. data within items
• Expressivity
• Static representation
14
University of Toronto
Explorer
Single Representation Limitations
Node-Link
Diagram
Treemap
Sunburst
• Structure vs. data within items
• Expressivity
• Static representation
15
University of Toronto
Explorer
Node-Link & Treemap
Node-Link
Treemap
• Familiar
Pros • Shows both
structure and
items
• Hard to scale
Cons (100 nodes)
16
University of Toronto
• Scalable, space
efficient
• Eases comparison
of branch patterns
• Less familiar
• Hard to see
structure
Node-Link & Treemap
Node-Link
Treemap
• Familiar
Pros • Shows both
structure and
items
• Hard to scale
Cons (100 nodes)
17
University of Toronto
• Scalable, space
efficient
• Eases comparison
of branch patterns
• Less familiar
• Hard to see
structure
Node-Link & Treemap
Node-Link
Treemap
• Familiar
Pros • Shows both
structure and
items
• Hard to scale
Cons (100 nodes)
18
University of Toronto
• Scalable, space
efficient
• Eases comparison
of branch patterns
• Less familiar
• Hard to see
structure
Node-Link & Treemap
Node-Link
Treemap
• Familiar
Pros • Shows both
structure and
items
• Hard to scale
Cons (100 nodes)
19
University of Toronto
• Scalable, space
efficient
• Eases comparison
of branch patterns
• Less familiar
• Hard to see
structure
Solving the Problem
• Hybridize complementary
representations to balance structure
and scalability
20
University of Toronto
Solving the Problem
• Hybridize complementary
representations to balance structure
and scalability
• Representational adaptations for
branches and tasks
21
University of Toronto
Solving the Problem
• Hybridize complementary
representations to balance structure
and scalability
• Representational adaptations for
branches and tasks
• User manipulation and automatic
adjustment
22
University of Toronto
Combine Multiple Representations
Node-Link
23
University of Toronto
Combine Multiple Representations
Node-Link
Treemap
24
University of Toronto
Combine Multiple Representations
Node-Link
Hybrid 1
Treemap
25
University of Toronto
Combine Multiple Representations
Node-Link
Hybrid 1
Hybrid 2
26
University of Toronto
Treemap
Combine Multiple Representations
…
Node-Link
…
Hybrid 1
Hybrid 2
27
University of Toronto
…
Treemap
Combine Multiple Representations
…
Node-Link
…
Hybrid 1
…
Hybrid 2
Treemap
Elastic Hierarchy:
Entire set of adjustable hybrids
of multiple representations
28
University of Toronto
Elastic Hierarchy
A tree of ~3500 nodes using Node-Link
Node–Link
Diagram
29
University of Toronto
Elastic Hierarchy
Same tree using Treemap
Treemap
30
University of Toronto
Elastic Hierarchy
Same tree using Elastic Hierarchy
Elastic
Hierarchy
31
University of Toronto
Elastic Hierarchy
Node–Link Diagram
Treemap
• Elastic Hierarchy
• Focus+context
• Adaptability+user control
• Multiple foci
32
University of Toronto
Elastic Hierarchy
Taxonomy
x
y
33
University of Toronto
Taxonomy
Node-Link (NL)
x
Treemap (TM)
y
34
University of Toronto
Taxonomy
Node-Link (NL)
x
y
Treemap (TM)
inside
outside
35
University of Toronto
Taxonomy
Node-Link (NL)
x
y
Treemap (TM)
inside
outside
NL outside NL
…….(A)
TM outside NL
…….(B)
NL outside TM
…….(C)
TM outside TM
…….(D)
NL inside TM
…….(E)
NL inside NL
…….(G)
TM inside TM
…….(F)
TM inside NL
…….(H)
36
University of Toronto
Taxonomy
Node-Link (NL)
x
y
Treemap (TM)
inside
outside
NL outside NL
…….(A)
TM outside NL
…….(B)
NL outside TM
…….(C)
TM outside TM
…….(D)
NL inside TM
…….(E)
NL inside NL
…….(G)
TM inside TM
…….(F)
TM inside NL
…….(H)
37
University of Toronto
Taxonomy
Node-Link (NL)
x
y
Treemap (TM)
inside
outside
NL outside NL
…….(A)
TM outside NL
…….(B)
NL outside TM
…….(C)
TM outside TM
…….(D)
NL inside TM
…….(E)
TM inside TM
…….(F)
Figure 4: here, the same tree is depicted 6 different ways
(illustration): in A, with a traditional node-link diagram, in F, with
a Treemap, and in B-E, with mixed, hybrid representations.
38
University of Toronto
Taxonomy
Node-Link (NL)
x
y
Treemap (TM)
inside
outside
NL outside NL
…….(A)
TM outside NL
…….(B)
NL outside TM
…….(C)
TM outside TM
…….(D)
NL inside TM
…….(E)
TM inside TM
…….(F)
Figure 4: here, the same tree is depicted 6 different ways
(illustration): in A, with a traditional node-link diagram, in F, with
a Treemap, and in B-E, with mixed, hybrid representations.
39
University of Toronto
Taxonomy
Node-Link (NL)
x
y
Treemap (TM)
inside
outside
NL outside NL
…….(A)
TM outside NL
…….(B)
NL outside TM
…….(C)
TM outside TM
…….(D)
NL inside TM
…….(E)
TM inside TM
…….(F)
Figure 4: here, the same tree is depicted 6 different ways
(illustration): in A, with a traditional node-link diagram, in F, with
a Treemap, and in B-E, with mixed, hybrid representations.
40
University of Toronto
Treemap Outside Node-Link
41
University of Toronto
Treemap Outside Node-Link
• Preserve top-level
topology
42
University of Toronto
Treemap Outside Node-Link
• Preserve top-level
topology
• Space filling at
crowded lower
levels
43
University of Toronto
Treemap Outside Node-Link
• Preserve top-level
topology
• Space filling at
crowded lower
levels
• Pattern comparison
among branches
44
University of Toronto
Treemap/Node-Link Outside Treemap
45
University of Toronto
Treemap/Node-Link Outside Treemap
• Focus+Context
46
University of Toronto
Treemap/Node-Link Outside Treemap
• Focus+Context
• Multiple foci
47
University of Toronto
Treemap/Node-Link Outside Treemap
• Focus+Context
• Multiple foci
• Occlusion
48
University of Toronto
Node-Link Inside Treemap
49
University of Toronto
Node-Link Inside Treemap
• Local topology within context
• But, has tight space constrains
50
University of Toronto
Node-Link Inside Treemap
• Local topology within context
• But, has tight space constrains
• More space if resizing is allowed
• But, resizing changes visual landmarks
51
University of Toronto
Working Together
52
University of Toronto
Working Together
53
University of Toronto
Implementation
54
University of Toronto
Implementation
55
University of Toronto
Implementation
56
University of Toronto
Implementation
57
University of Toronto
Implementation
58
University of Toronto
User Interactions
• Toggle between representations
59
University of Toronto
User Interactions
• Toggle between representations
• Pan, zoom
60
University of Toronto
User Interactions
• Toggle between representations
• Pan, zoom
• Resize any subtree
61
University of Toronto
User Interactions
•
•
•
•
Toggle between representations
Pan, zoom
Resize any subtree
Unambiguous selection within
Treemaps using tabs
62
University of Toronto
Elastic Hierarchy Video
63
University of Toronto
Contributions
• Elastic representation
…
Node-Link
…
Hybrid 1
…
Hybrid 2
Treemap
64
University of Toronto
Contributions
• Elastic representation
• Design space
…
Node-Link
…
Hybrid 1
…
Hybrid 2
Treemap
Figure 4: here, the same tree is depicted 6 different ways
(illustration): in A, with a traditional node-link diagram, in F, with
a Treemap, and in B-E, with mixed, hybrid representations.
65
University of Toronto
Contributions
• Elastic representation
• Design space
• Interaction techniques
…
Node-Link
…
Hybrid 1
…
Hybrid 2
Treemap
Figure 4: here, the same tree is depicted 6 different ways
(illustration): in A, with a traditional node-link diagram, in F, with
a Treemap, and in B-E, with mixed, hybrid representations.
66
University of Toronto
Future Work
• Empirical evaluation
• Other useful elastic representations
67
University of Toronto
Acknowledgments
Ben Bederson, Ben Shneiderman,
Ravin Balakrishnan, Maneesh
Agrawala, Ed Chi, Amy Zhu, John
Hancock, Joe Laszlo, Jim Chengming
Cai, Noah Lockwood, Bowen Hui,
anonymous reviewers, and other IML
& DGP members at University of
Toronto
68
University of Toronto
Questions
Node–Link Diagram
Treemap
69
University of Toronto
Elastic Hierarchy