Elastic Hierarchies: Combining Treemaps and Node-Link Diagrams

1. Elastic Hierarchies: Combining Treemaps and Node-Link Diagrams Shengdong Zhao, Michael J. McGuffin, Mark H. Chignell University of Toronto

2. 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. University of Toronto 3 Common Tree Representations Node-Link Containment Alignment, Adjacency Outline

4. University of Toronto 4 Common Tree Representations Node-Link Containment Alignment, Adjacency Outline Node-Link Diagram

5. University of Toronto 5 Common Tree Representations Node-Link Containment Alignment, Adjacency Outline Treemap Node-Link Diagram

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

7. University of Toronto 7 Common Tree Representations Node-Link Containment Alignment, Adjacency Outline Treemap Sunburst Node-Link Diagram Explorer

8. University of Toronto 8 Tree Visualization Challenges • Structure AND data within items • Scalability (exponential growth) • Context (when focus changes) • Multiple hierarchies or polyarchies • Multiple foci [Robertson] [Furnas & Zacks]

9. University of Toronto 9 Tree Visualization Challenges • Different local properties • Topology (dense vs. sparse) • Data content (image vs. text)

10. University of Toronto 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. University of Toronto 11 Single Representation Limitations Treemap Sunburst Node-Link Diagram Explorer

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

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

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

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

16. University of Toronto 16 Node-Link & Treemap Node-Link Treemap Pros • Familiar • Shows both structure and items • Scalable, space efficient • Eases comparison of branch patterns Cons • Hard to scale (100 nodes) • Less familiar • Hard to see structure

20. University of Toronto 20 Solving the Problem • Hybridize complementary representations to balance structure and scalability

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

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

23. University of Toronto 23 Combine Multiple Representations Node-Link

24. University of Toronto 24 Node-Link Treemap Combine Multiple Representations

25. University of Toronto 25 Node-Link TreemapHybrid 1 Combine Multiple Representations

26. University of Toronto 26 Node-Link TreemapHybrid 1 Hybrid 2 Combine Multiple Representations

27. University of Toronto 27 … … … Node-Link TreemapHybrid 1 Hybrid 2 Combine Multiple Representations

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

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

30. University of Toronto 30 Elastic Hierarchy Treemap Same tree using Treemap

31. University of Toronto 31 Elastic Hierarchy Same tree using Elastic Hierarchy Elastic Hierarchy

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

33. University of Toronto 33 y x Taxonomy

34. University of Toronto 34 y x Treemap (TM) Node-Link (NL) Taxonomy

35. University of Toronto 35 y x Treemap (TM) Node-Link (NL) outside inside Taxonomy

36. University of Toronto 36 y x Treemap (TM) Node-Link (NL) outside inside Taxonomy 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. University of Toronto 37 y x Treemap (TM) Node-Link (NL) outside inside Taxonomy 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. University of Toronto 38 y x Treemap (TM) Node-Link (NL) outside inside Taxonomy 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 39 y x Treemap (TM) Node-Link (NL) outside inside Taxonomy 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. 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. University of Toronto 40 y x Treemap (TM) Node-Link (NL) outside inside Taxonomy 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. 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. University of Toronto 41 Treemap Outside Node-Link

42. University of Toronto 42 Treemap Outside Node-Link • Preserve top-level topology

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

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

45. University of Toronto 45 Treemap/Node-Link Outside Treemap

46. University of Toronto 46 • Focus+Context Treemap/Node-Link Outside Treemap

47. University of Toronto 47 • Focus+Context • Multiple foci Treemap/Node-Link Outside Treemap

48. University of Toronto 48 • Focus+Context • Multiple foci • Occlusion Treemap/Node-Link Outside Treemap

49. University of Toronto 49 Node-Link Inside Treemap

50. University of Toronto 50 Node-Link Inside Treemap • Local topology within context • But, has tight space constrains

51. University of Toronto 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. University of Toronto 52 Working Together

53. University of Toronto 53 Working Together

54. University of Toronto 54 Implementation

59. University of Toronto 59 User Interactions • Toggle between representations

60. University of Toronto 60 User Interactions • Toggle between representations • Pan, zoom

61. University of Toronto 61 User Interactions • Toggle between representations • Pan, zoom • Resize any subtree

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

63. University of Toronto 63 Elastic Hierarchy Video

64. University of Toronto 64 Contributions • Elastic representation … … … Node-Link TreemapHybrid 1 Hybrid 2

65. University of Toronto 65 Contributions • Elastic representation • Design space … … … Node-Link TreemapHybrid 1 Hybrid 2 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 66 Contributions • Elastic representation • Design space • Interaction techniques … … … Node-Link TreemapHybrid 1 Hybrid 2 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.

67. University of Toronto 67 Future Work • Empirical evaluation • Other useful elastic representations

68. University of Toronto 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. University of Toronto 69 Questions Node–Link Diagram Treemap Elastic Hierarchy

Elastic Hierarchies: Combining Treemaps and Node-Link Diagrams

Elastic Hierarchies: Combining Treemaps and Node-Link Diagrams

Recommended

More Related Content

Similar to Elastic Hierarchies: Combining Treemaps and Node-Link Diagrams

Similar to Elastic Hierarchies: Combining Treemaps and Node-Link Diagrams(20)

More from Kimberly Aguada

More from Kimberly Aguada(6)

Recently uploaded

Recently uploaded(20)

Elastic Hierarchies: Combining Treemaps and Node-Link Diagrams