Elastic Hierarchies Combining Treemapsand NodeLink Diagrams Shengdong Zhao

Elastic Hierarchies: Combining Treemapsand Node-Link Diagrams • Shengdong Zhao, Michael J. Mc. Guffin, Mark H. Chignell Universityof 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 Universityof Toronto

Common Tree Representations Node-Link Containment 3 Universityof Toronto Alignment, Adjacency Outline

Common Tree Representations Node-Link Containment Node-Link Diagram 4 Universityof Toronto Alignment, Adjacency Outline

Common Tree Representations Node-Link Containment Node-Link Diagram Treemap 5 Universityof Toronto Alignment, Adjacency Outline

Common Tree Representations Node-Link Containment Alignment, Adjacency Node-Link Diagram Treemap Sunburst 6 Universityof Toronto Outline

Common Tree Representations Node-Link Containment Alignment, Adjacency Node-Link Diagram Treemap Sunburst 7 Universityof 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 Universityof Toronto

Tree Visualization Challenges • Different local properties • Topology (dense vs. sparse) • Data content (image vs. text) 9 Universityof 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 Universityof Toronto

Single Representation Limitations Node-Link Diagram Treemap 11 Universityof Toronto Sunburst Explorer

Single Representation Limitations Node-Link Diagram Treemap Sunburst • Structure vs. data within items 12 Universityof Toronto Explorer

Single Representation Limitations Node-Link Diagram Treemap Sunburst • Structure vs. data within items • Expressivity 13 Universityof Toronto Explorer

Single Representation Limitations Node-Link Diagram Treemap Sunburst • Structure vs. data within items • Expressivity • Static representation 14 Universityof Toronto Explorer

Single Representation Limitations Node-Link Diagram Treemap Sunburst • Structure vs. data within items • Expressivity • Static representation 15 Universityof Toronto Explorer

Node-Link & Treemap Node-Link Treemap • Familiar Pros • Shows both structure and items • Hard to scale Cons (100 nodes) 16 Universityof 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 Universityof 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 Universityof 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 Universityof 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 Universityof Toronto

Solving the Problem • Hybridize complementary representations to balance structure and scalability • Representational adaptations for branches and tasks 21 Universityof Toronto

Solving the Problem • Hybridize complementary representations to balance structure and scalability • Representational adaptations for branches and tasks • User manipulation and automatic adjustment 22 Universityof Toronto

Combine Multiple Representations Node-Link 23 Universityof Toronto

Combine Multiple Representations Node-Link Treemap 24 Universityof Toronto

Combine Multiple Representations Node-Link Hybrid 1 Treemap 25 Universityof Toronto

Combine Multiple Representations Node-Link Hybrid 1 Hybrid 2 26 Universityof Toronto Treemap

Combine Multiple Representations … Node-Link … Hybrid 1 Hybrid 2 27 Universityof Toronto … Treemap

Combine Multiple Representations … Node-Link … Hybrid 1 … Hybrid 2 Treemap Elastic Hierarchy : Entire set of adjustable hybrids of multiple representations 28 Universityof Toronto

Elastic Hierarchy A tree of ~3500 nodes using Node-Link Node–Link Diagram 29 Universityof Toronto

Elastic Hierarchy Same tree using Treemap 30 Universityof Toronto

Elastic Hierarchy Same tree using Elastic Hierarchy 31 Universityof Toronto

Elastic Hierarchy Node–Link Diagram Treemap • Elastic Hierarchy • Focus+context • Adaptability+user control • Multiple foci 32 Universityof Toronto Elastic Hierarchy

Taxonomy x y 33 Universityof Toronto

Taxonomy Node-Link (NL) x Treemap (TM) y 34 Universityof Toronto

Taxonomy Node-Link (NL) x y Treemap (TM) inside outside 35 Universityof Toronto

Taxonomy Node-Link (NL) x y Treemap (TM) inside 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 Universityof Toronto

Taxonomy Node-Link (NL) x y Treemap (TM) inside 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 Universityof Toronto

Taxonomy Node-Link (NL) x y Treemap (TM) inside outside NL ……. (A) TM outside NL ……. (B) NL outside TM ……. (C) TM outside TM ……. (D) NL inside TM ……. (E) TM inside TM ……. (F) 38 Universityof Toronto

Taxonomy Node-Link (NL) x y Treemap (TM) inside outside NL ……. (A) TM outside NL ……. (B) NL outside TM ……. (C) TM outside TM ……. (D) NL inside TM ……. (E) TM inside TM ……. (F) 39 Universityof Toronto

Taxonomy Node-Link (NL) x y Treemap (TM) inside outside NL ……. (A) TM outside NL ……. (B) NL outside TM ……. (C) TM outside TM ……. (D) NL inside TM ……. (E) TM inside TM ……. (F) 40 Universityof Toronto

Treemap Outside Node-Link 41 Universityof Toronto

Treemap Outside Node-Link • Preserve top-level topology 42 Universityof Toronto

Treemap Outside Node-Link • Preserve top-level topology • Space filling at crowded lower levels 43 Universityof Toronto

Treemap Outside Node-Link • Preserve top-level topology • Space filling at crowded lower levels • Pattern comparison among branches 44 Universityof Toronto

Treemap/Node-Link Outside Treemap 45 Universityof Toronto

Treemap/Node-Link Outside Treemap • Focus+Context 46 Universityof Toronto

Treemap/Node-Link Outside Treemap • Focus+Context • Multiple foci 47 Universityof Toronto

Treemap/Node-Link Outside Treemap • Focus+Context • Multiple foci • Occlusion 48 Universityof Toronto

Node-Link Inside Treemap 49 Universityof Toronto

Node-Link Inside Treemap • Local topology within context • But, has tight space constrains 50 Universityof 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 Universityof Toronto

Working Together 52 Universityof Toronto

Working Together 53 Universityof Toronto

Implementation 54 Universityof Toronto

Implementation 55 Universityof Toronto

Implementation 56 Universityof Toronto

Implementation 57 Universityof Toronto

Implementation 58 Universityof Toronto

User Interactions • Toggle between representations 59 Universityof Toronto

User Interactions • Toggle between representations • Pan, zoom 60 Universityof Toronto

User Interactions • Toggle between representations • Pan, zoom • Resize any subtree 61 Universityof Toronto

User Interactions • • Toggle between representations Pan, zoom Resize any subtree Unambiguous selection within Treemaps using tabs 62 Universityof Toronto

Elastic Hierarchy Video 63 Universityof Toronto

Contributions • Elastic representation … Node-Link … Hybrid 1 … Hybrid 2 Treemap 64 Universityof Toronto

Contributions • Elastic representation • Design space … Node-Link … Hybrid 1 … Hybrid 2 Treemap 65 Universityof Toronto

Contributions • Elastic representation • Design space • Interaction techniques … Node-Link … Hybrid 1 … Hybrid 2 Treemap 66 Universityof Toronto

Future Work • Empirical evaluation • Other useful elastic representations 67 Universityof 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 Universityof Toronto

Questions Node–Link Diagram Treemap 69 Universityof Toronto Elastic Hierarchy