Elastic Hierarchies: Combining Treemaps and NodeLink Diagrams

1
Elastic Hierarchies Combining Treemaps and
Node-Link Diagrams

• Shengdong Zhao, Michael J. McGuffin, Mark H.
  Chignell

University of Toronto
2
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

3
Common Tree Representations
Alignment, Adjacency
Node-Link
Containment
Outline
4
Common Tree Representations
Alignment, Adjacency
Node-Link
Containment
Outline
Node-Link Diagram
5
Common Tree Representations
Alignment, Adjacency
Node-Link
Containment
Outline
Node-Link Diagram
Treemap
6
Common Tree Representations
Alignment, Adjacency
Node-Link
Containment
Outline
Node-Link Diagram
Treemap
Sunburst
7
Common Tree Representations
Alignment, Adjacency
Node-Link
Containment
Outline
Node-Link Diagram
Treemap
Sunburst
Explorer
8
Tree Visualization Challenges

• Structure AND data within items
• Scalability (exponential growth)
• Context (when focus changes)
• Multiple hierarchies orpolyarchies
• Multiple foci

Furnas Zacks
Robertson
9
Tree Visualization Challenges

• Different local properties
• Topology (dense vs. sparse)
• Data content (image vs. text)

10
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

11
Single Representation Limitations
Node-Link Diagram
Treemap
Sunburst
Explorer
12
Single Representation Limitations
Node-Link Diagram
Treemap
Sunburst
Explorer

• Structure vs. data within items

13
Single Representation Limitations
Node-Link Diagram
Treemap
Sunburst
Explorer

• Structure vs. data within items
• Expressivity

14
Single Representation Limitations
Node-Link Diagram
Treemap
Sunburst
Explorer

• Structure vs. data within items
• Expressivity
• Static representation

15
Single Representation Limitations
Node-Link Diagram
Treemap
Sunburst
Explorer

• Structure vs. data within items
• Expressivity
• Static representation

16
Node-Link Treemap
17
Node-Link Treemap
18
Node-Link Treemap
19
Node-Link Treemap
20
Solving the Problem

• Hybridize complementary representations to
  balance structure and scalability

21
Solving the Problem

• Hybridize complementary representations to
  balance structure and scalability
• Representational adaptations for branches and
  tasks

22
Solving the Problem

• Hybridize complementary representations to
  balance structure and scalability
• Representational adaptations for branches and
  tasks
• User manipulation and automatic adjustment

23
Combine Multiple Representations
Node-Link
24
Combine Multiple Representations
Node-Link
Treemap
25
Combine Multiple Representations
Node-Link
Treemap
Hybrid 1
26
Combine Multiple Representations
Node-Link
Treemap
Hybrid 1
Hybrid 2
27
Combine Multiple Representations



Node-Link
Treemap
Hybrid 1
Hybrid 2
28
Combine Multiple Representations



Node-Link
Treemap
Hybrid 1
Hybrid 2
Elastic Hierarchy Entire set of adjustable
hybrids of multiple representations
29
Elastic Hierarchy
A tree of 3500 nodes using Node-Link
NodeLink Diagram
30
Elastic Hierarchy
Same tree using Treemap
Treemap
31
Elastic Hierarchy
Same tree using Elastic Hierarchy
Elastic Hierarchy
32
Elastic Hierarchy
NodeLink Diagram
Treemap
Elastic Hierarchy

• Elastic Hierarchy
• Focuscontext
• Adaptabilityuser control
• Multiple foci

33
Taxonomy
34
Taxonomy
Node-Link (NL)
Treemap (TM)
35
Taxonomy
Node-Link (NL)
Treemap (TM)
inside
outside
36
Taxonomy
Node-Link (NL)
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)
NL inside NL .(G)
TM inside NL .(H)
37
Taxonomy
Node-Link (NL)
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)
NL inside NL .(G)
TM inside NL .(H)
38
Taxonomy
Node-Link (NL)
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)
39
Taxonomy
Node-Link (NL)
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)
40
Taxonomy
Node-Link (NL)
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)
41
Treemap Outside Node-Link
42
Treemap Outside Node-Link

• Preserve top-level topology

43
Treemap Outside Node-Link

• Preserve top-level topology
• Space filling at crowded lower levels

44
Treemap Outside Node-Link

• Preserve top-level topology
• Space filling at crowded lower levels
• Pattern comparison among branches

45
Treemap/Node-Link Outside Treemap
46
Treemap/Node-Link Outside Treemap

• FocusContext

47
Treemap/Node-Link Outside Treemap

• FocusContext
• Multiple foci

48
Treemap/Node-Link Outside Treemap

• FocusContext
• Multiple foci
• Occlusion

49
Node-Link Inside Treemap
50
Node-Link Inside Treemap

• Local topology within context
• But, has tight space constrains

51
Node-Link Inside Treemap

• Local topology within context
• But, has tight space constrains
• More space if resizing is allowed
• But, resizing changes visual landmarks

52
Working Together
53
Working Together
54
Implementation
55
Implementation
56
Implementation
57
Implementation
58
Implementation
59
User Interactions

• Toggle between representations

60
User Interactions

• Toggle between representations
• Pan, zoom

61
User Interactions

• Toggle between representations
• Pan, zoom
• Resize any subtree

62
User Interactions

• Toggle between representations
• Pan, zoom
• Resize any subtree
• Unambiguous selection within Treemaps using tabs

63
Elastic Hierarchy Video
64
Contributions

• Elastic representation

Node-Link
Treemap
Hybrid 1
Hybrid 2
65
Contributions

• Elastic representation
• Design space

Node-Link
Treemap
Hybrid 1
Hybrid 2
66
Contributions

• Elastic representation
• Design space
• Interaction techniques

Node-Link
Treemap
Hybrid 1
Hybrid 2
67
Future Work

• Empirical evaluation
• Other useful elastic representations

68
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
69
Questions