Authors: Shengdong Zhao, Michael J. McGuffin, Mark H. Chignell

1. 6/30/2020 Shengdong Zhao @ UofT 1
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
– ...

2. 6/30/2020 Shengdong Zhao @ UofT 2

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

4. 6/30/2020 Shengdong Zhao @ UofT 4
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

5. 6/30/2020 Shengdong Zhao @ UofT 5
Why is tree visualization hard?
– Structure AND items (Structure
harder, consumes more space)
– Scaling: data size grows very quickly
(exponential)
• #nodes = bheight
– How to provide Context (when focus
changes)
– May be multiple hierarchies
– May be multiple focuses

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

7. 6/30/2020 Shengdong Zhao @ UofT 7
Node-Link Diagrams

8. 6/30/2020 Shengdong Zhao @ UofT 8
Tree

9. 6/30/2020 Shengdong Zhao @ UofT 9
Distortion: Graphical Fisheye -
1992
– Sarkar & Brown, DEC SRC, CHI’92

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

11. 6/30/2020 Shengdong Zhao @ UofT 11
PDQ Trees

12. 6/30/2020 Shengdong Zhao @ UofT 12
Auto-arrangement + Thumbnail:
Spacetree

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

14. 6/30/2020 Shengdong Zhao @ UofT 14
Space Optimized Tree
Quang & Mao (InfoVis 2002)

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

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

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

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

19. 6/30/2020 Shengdong Zhao @ UofT 19
Sunburst
• Stasko, GaTech
• Radial layout
• Animated zooming

20. 6/30/2020 Shengdong Zhao @ UofT 20
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?

21. 6/30/2020 Shengdong Zhao @ UofT 21
CHEOPS
• Beaudoin, “Cheops”
• Jon, Mudita
• http://www.crim.ca/hci/cheops/index1.html

22. 6/30/2020 Shengdong Zhao @ UofT 22
Challenges• Multiple foci
• George Robertson, Microsoft Research

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

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

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

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

27. 6/30/2020 Shengdong Zhao @ UofT 27
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?

28. 6/30/2020 Shengdong Zhao @ UofT 28
• 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

29. 6/30/2020 Shengdong Zhao @ UofT 29
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

30. 6/30/2020 Shengdong Zhao @ UofT 30
• 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

31. 6/30/2020 Shengdong Zhao @ UofT 31
Several Ideas
• Create animated transition between linked
tree and treemaps
Quic kTim e™ and a TIFF (LZW) decom press or are needed to see this picture.

32. 6/30/2020 Shengdong Zhao @ UofT 32
Intermediates
QuickTime™ and a TIFF (LZW) decompressor are needed to see this picture.

33. 6/30/2020 Shengdong Zhao @ UofT 33
Overview + Detail
QuickTime™ and a TIFF (LZW) decompressor are needed to see this picture.

34. 6/30/2020 Shengdong Zhao @ UofT 34
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?