Embed Size (px)
Citation preview
Musings on Treemaps
John StaskoInformation Interfaces Research GroupCollege of Computing / GVU CenterGeorgia Institute of Technology
HCIL, Univ. of Md.May 31, 2001
2
Background
Early UNIX implementations of Treemap
XTangoanimationusingtechnique
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 directorystructures
Root dir at centerColor - file typeAngle - file/dir size
Quickdemo
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
International Journal of Human-Computer StudiesSpecial issue on Empirical Studies of InfoVis, 53(5),Nov. 2000, pp. 663-694.
With R. Catrambone, M. Guzdial,K. McDonald
7
Experiment
60 participantsParticipant only works with a small or
large hierarchy in a session
Vary order across participantsSB A, TM BTM A, SB BSB B, TM ATM B, SB A
32 on small hierarchies28 on large hierarchies
Small Hierarchy(~500 files)
Large Hierarchy(~3000 files)
A B A B
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
A BPhase 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
A BPhase 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
Fix: Objectives
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
16
3 Solutions
Three visualization+navigation techniques developed to help remedy the shortcoming Angular detail Detail outside Detail inside
Proceedings of Information Visualization 2000Oct. 2000, pp. 57-65.
With E.Zhang
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 overviewAllow 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 viewFocus region grows outFocus regions wraps around global view
Smooth interpolation between start-end position and angle
23
Speed Considerations
Don’t draw small slicesCache small and large images of entire
hierarchy, reload rather than drawDuring 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
