Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "Elastic Hierarchies: Combining Treemaps and Node-Link Diagrams Shengdong Zhao, Michael J. McGuffin, Mark H. Chignell University of Toronto."— Presentation transcript:

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

2 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-LinkContainment Alignment, Adjacency Outline

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

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

6 University of Toronto 6 Common Tree Representations Node-LinkContainment Alignment, Adjacency Outline TreemapSunburst Node-Link Diagram

7 University of Toronto 7 Common Tree Representations Node-LinkContainment Alignment, Adjacency Outline TreemapSunburst 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 TreemapSunburst Node-Link Diagram Explorer

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

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

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

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

16 University of Toronto 16 Node-Link & Treemap Node-LinkTreemap 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

17 University of Toronto 17 Node-Link & Treemap Node-LinkTreemap 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

18 University of Toronto 18 Node-Link & Treemap Node-LinkTreemap 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

19 University of Toronto 19 Node-Link & Treemap Node-LinkTreemap 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-LinkTreemap Combine Multiple Representations

25 University of Toronto 25 Node-LinkTreemapHybrid 1 Combine Multiple Representations

26 University of Toronto 26 Node-LinkTreemapHybrid 1Hybrid 2 Combine Multiple Representations

27 University of Toronto 27 ……… Node-LinkTreemapHybrid 1Hybrid 2 Combine Multiple Representations

28 University of Toronto 28 ……… Node-LinkTreemapHybrid 1Hybrid 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 DiagramTreemapElastic 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)

39 University of Toronto 39 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)

40 University of Toronto 40 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)

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

55 University of Toronto 55 Implementation

56 University of Toronto 56 Implementation

57 University of Toronto 57 Implementation

58 University of Toronto 58 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-LinkTreemapHybrid 1Hybrid 2

65 University of Toronto 65 Contributions Elastic representation Design space ……… Node-LinkTreemapHybrid 1Hybrid 2

66 University of Toronto 66 Contributions Elastic representation Design space Interaction techniques ……… Node-LinkTreemapHybrid 1Hybrid 2

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 DiagramTreemapElastic Hierarchy


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

Similar presentations


Ads by Google