Musings on Treemaps

1. HCIL, Univ. of Md. May 31, 2001 Musings on Treemaps John Stasko Information Interfaces Research Group College of Computing / GVU Center Georgia Institute of Technology

2. Background • Early UNIX implementations of Treemap XTango animation using technique Current UNIX tool

3. Treemap Variation • What if we used a radial expansion (with root at center) rather than a rectangular expansion? • Add explicit representation of parent/directory

4. Sunburst Visualizing fileand directory structures Root dir at center Color - file type Angle - file/dir size Quick demo

5. Appears in: American Heritage Dictionary, 3rd Ed. Houghton Mifflin, 1992

6. Empirical Study • Compare Treemap (borderless) and Sunburst with users performing typical file/directory-related tasks • Evaluate task performance on both correctness and time With R. Catrambone, M. Guzdial, K. McDonald International Journal of Human-Computer Studies Special issue on Empirical Studies of InfoVis, 53(5), Nov. 2000, pp. 663-694.

7. Experiment • 60 participants • Participant only works with a small or large hierarchy in a session • Vary order across participants Small Hierarchy (~500 files) Large Hierarchy (~3000 files) B A B A SB A, TM B TM A, SB B SB B, TM A TM B, SB A 32 on small hierarchies 28 on large hierarchies

8. Tasks • Identification (naming or pointing out) of a file based on size, specifically, the largest and second largest files (Questions 1-2) • Identification of a directory based on size, specifically, the largest (Q3) • Location (pointing out) of a file, given the entire path and name (Q4-7) • Location of a file, given only the file name (Q8-9) • Identification of the deepest subdirectory (Q10) • Identification of a directory containing files of a particular type (Q11) • Identification of a file based on type and size, specifically, the largest file of a particular type (Q12) • Comparison of two files by size (Q13) • Location of two duplicated directory structures (Q14) • Comparison of two directories by size (Q15) • Comparison of two directories by number of files contained (Q16) Representative of things people really do

9. Results (1) Small hierarchy B A Phase 1 TM 9.88 (3.23) TM 11.50 (2.14) SB 12.88 (1.96) SB 10.38 (1.69) Phase 2 TM 12.25 (1.75) TM 10.75 (2.77) SB 12.63 (2.00) SB 11.50 (2.00) Correct task completions (max=16)

10. Results (2) Large hierarchy B A Phase 1 TM 8.71 (1.60) TM 8.29 (2.14) SB 11.43 (1.27) SB 11.14 (2.67) Phase 2 TM 11.57 (1.27) TM 10.86 (1.57) SB 11.00 (2.16) SB 11.00 (2.00) Correct task completions (max=16)

11. Results (3) • Ordering/learning effect for Treemap on large hierarchies • Performance trends favored Sunburst, but not clear-cut (completions, time) • Subjective preference:SB (51), TM (9), unsure (1)

12. Observations • SB appeared to convey structure better • Participants felt TM conveyed size better, but not bore out by data • Strategies mattered

13. SunBurst Negative • In large hierarchies, files at the periphery are usually tiny and very difficult to distinguish examples

14. Treemap Too examples

15. Make small slices bigger Maintain full circular space-filling idea Allow detailed examination of small files within context of entire hierarchy Don’t alter ratios of sizes Avoid use of multiple windows or lots of scrollbars Provide an aesthetically pleasing interface in which it is easy to track changes in focus Fix: Objectives

16. 3 Solutions • Three visualization+navigation techniques developed to help remedy the shortcoming • Angular detail • Detail outside • Detail inside With E.Zhang Proceedings of Information Visualization 2000 Oct. 2000, pp. 57-65.

17. Design 1 - Angular Detail • Most “natural” • Least space-efficient • Most configurable by user

18. Design 2 - Detail Outside • Exhibits non-distorted miniature of overview • Somewhat visually disconcerting • Focus is quite enlarged (large circumference and 360°) • Relatively space efficient

19. Design 3 - Detail Inside • Perhaps least intuitive and most distorting • Items in overview are more distinct (larger circumference) • Interior 360° for focus is often sufficient

20. Video 4 minutes

21. Key Components • Two ways to increase area for focus region: larger sweep angle and longer circumference • Smooth transitions between overview and focus allow viewer to track changes • Always display overview • Allow focus selections from anywhere: normal display, focus or overview regions

22. Implementation • Utilizes fundamental animation update routine • Example: Detail Outside (called 3 times) • Shrink global view • Focus region grows out • Focus regions wraps around global view • Smooth interpolation between start-end position and angle

23. Speed Considerations • Don’t draw small slices • Cache small and large images of entire hierarchy, reload rather than draw • During animation transitions, only draw the 100 largest slices (don’t use thresh-holding)->Consistent speed as hierarchy grows (really dependent on processor & graphics)

24. Treemap Application • Can similar techniques be applied to treemaps to support focusing on small items? • Expand area given to focus item • Smoothly animate focus change • Challenge: Where to position focus and context?

25. Idea 1: Superimpose +: Simple - : Obscures areas

26. Idea 2: Grow/Shrink +: Shows all context - : Empty areas

27. Idea 3: Shrink overview +: Shows all context - : Wasteful of space

28. Thoughts? • Other possibilities? • Which do you like best? • Somebody build one!

29. Summary • Treemaps can be a very helpful information visualization • Techniques for examining small regions in more detail can make them even more powerful

30. For More Information... • stasko@cc.gatech.edu • www.cc.gatech.edu/gvu/ii