Hierarchies (Trees) • Definition – Data repository in which cases are related to subcases • Examples – Family histories, ancestries – File/directory systems on computers – Organization charts – Animal kingdom: Phylum,…, genus,… – Object-oriented software classes – ...

4/25/2020 Shengdong Zhao @ UofT 1

4/25/2020 Shengdong Zhao @ UofT 2

2 Main Approaches • Connection (node & link) • outliner A B C • Containment (node in node) • Venn diagram A B C 4/25/2020 Shengdong Zhao @ UofT 3

Tasks • Help understand node characteristics or tree structure?

• Some kinds of tasks: – Find a node – Revisit node – List node ancestors – Understand local topology – Understand global topology • Different Trees are good for different tasks 4/25/2020 Shengdong Zhao @ UofT 4

Why is tree visualization hard?

– Structure AND items (Structure harder, consumes more space) – Scaling: data size grows very quickly (exponential) • #nodes = b height – How to provide Context (when focus changes) – May be multiple hierarchies – May be multiple focuses 4/25/2020 Shengdong Zhao @ UofT 5

Current Status • Many 2D and 3D hierarchy visualizations – Each works for some tasks and some scales – Very few have had user testing 4/25/2020 Shengdong Zhao @ UofT 6

Node-Link Diagrams 4/25/2020 Shengdong Zhao @ UofT 7

Tree 4/25/2020 Shengdong Zhao @ UofT 8

Distortion: Graphical Fisheye 1992 – Sarkar & Brown, DEC SRC, CHI’92 4/25/2020 Shengdong Zhao @ UofT 9

Overview + Detail: PDQ Trees • Overview+Detail of 2D tree layout • Dynamic Queries on each level for pruning 4/25/2020 Shengdong Zhao @ UofT 10

PDQ Trees 4/25/2020 Shengdong Zhao @ UofT 11

Auto-arrangement + Thumbnail: Spacetree 4/25/2020 Shengdong Zhao @ UofT 12

Different Orientation & Refocus: Hyperbolic Trees • Rao, “Hyperbolic Tree” • http://startree.inxight.com/ • Xerox PARC • Inxight • Focus+context 4/25/2020 Shengdong Zhao @ UofT 13

Space Optimized Tree Quang & Mao (InfoVis 2002) 4/25/2020 Shengdong Zhao @ UofT 14

3D: Cone Trees • Robertson, “ConeTrees” • • Xerox PARC • 3D for focus+context 4/25/2020 Shengdong Zhao @ UofT 15

4/25/2020 Space-Filling Representation Each item occupies an area Children are “contained” under parent One example Shengdong Zhao @ UofT 16

Treemaps • • Shneiderman, “Treemaps” • Vishal, Jeevak http://www.cs.umd.edu/hcil/treemap3/ • Maryland 4/25/2020 Shengdong Zhao @ UofT 17

Variation: Cushion Treemap Add shading and texture to help convey structure of hierarchy Van Wijk ‘99 4/25/2020 Shengdong Zhao @ UofT 18

• Stasko, GaTech • Radial layout • Animated zooming Sunburst 4/25/2020 Shengdong Zhao @ UofT 19

Sunburst vs. Treemap • + Faster learning time: like pie chart • + Details outward, instead of inward • + Focus+context zooming • - Not space filling • - More space used by non-leaves • All leaves on 1-D space, perimeter • Treemap: 2-D space for leaves • - Smaller scale?

4/25/2020 Shengdong Zhao @ UofT 20

CHEOPS • • Beaudoin, “Cheops” • Jon, Mudita http://www.crim.ca/hci/cheops/index1.html

4/25/2020 Shengdong Zhao @ UofT 21

• Multiple foci Challenges • George Robertson, Microsoft Research 4/25/2020 Shengdong Zhao @ UofT 22

Time Tube - 1998 – Chi et al., Xerox PARC, CHI’98 4/25/2020 Shengdong Zhao @ UofT 23

Taxonomy Visualization - 2000 – Graham et al., Napier Univ. IJHCS 2000 4/25/2020 Shengdong Zhao @ UofT 24

MultiTrees - 1994 – Furnas & Zacks, Bell Core, CHI’94 – DAG’s with shared subtrees 4/25/2020 Shengdong Zhao @ UofT 25

Polyarchies • multiple inter-twined trees • Visual pivot • George Robertson, Microsoft Research 4/25/2020 Shengdong Zhao @ UofT 26

Research Questions • Can multidimensional data per node be portrayed?

• How does the visualization scale?

• What tasks are best supported by each vis?

• Can users quickly understand the representation?

4/25/2020 Shengdong Zhao @ UofT 27

• Observations – It’s hard to preserve the structure of the tree and allow scalability – Different approaches are good for certain tasks with certain scale, and one single approach often has limitations and can’t solve a range of problems well – Change of representations require learning • Possible Solution – Try a hybrid approach to balance the structure and scalability – Create a solution with continuous variations for a range of tasks – Use animation to help users to understand the representation 4/25/2020 Shengdong Zhao @ UofT 28

Node Link vs. Space Filling • Advantage of Node Link – Show Structure and Item – Natural • Disadvantage: – Hard to scale (100 nodes) • Advantage of Space Filling – Using 100% of screen space, scalable – monitoring and detect patterns in leaf nodes • Disadvantage: – Harder to see the structure 4/25/2020 Shengdong Zhao @ UofT 29

• What about combining the two techniques to create a continuous series of smooth representations and use animation to help users to understand the these representations better 4/25/2020 Shengdong Zhao @ UofT 30

Several Ideas • Create animated transition between linked tree and treemaps Quic kTime™ and a TIFF (LZW) decompress or are needed to see this picture.

4/25/2020 Shengdong Zhao @ UofT 31

Intermediates QuickTime™ and a TIFF (LZW) decompressor are needed to see this picture.

4/25/2020 Shengdong Zhao @ UofT 32

Overview + Detail QuickTime™ and a TIFF (LZW) decompressor are needed to see this picture.

4/25/2020 Shengdong Zhao @ UofT 33

Questions • Is this a worthwhile research topic? • Suggestions for further directions? • Any other combinations? • Which variation of the hybrid model is good for what tasks? (Scale?) • Anything else? 4/25/2020 Shengdong Zhao @ UofT 34