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
Background
Early UNIX implementations of Treemap
XTango
animation
using
technique
Current UNIX tool
2
Treemap Variation
What if we used a radial expansion (with
root at center) rather than a rectangular
expansion?
Add explicit representation of
parent/directory
3
Sunburst
Visualizing file
and directory
structures
Root dir at center
Color - file type
Angle - file/dir size
Quick
demo
4
Appears in:
American Heritage Dictionary, 3rd Ed. Houghton Mifflin, 1992
5
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.
6
Experiment
60 participants
Participant only works with a small or
large hierarchy in a session
Small Hierarchy
(~500 files)
A
B
Large Hierarchy
(~3000 files)
A
B
Vary order across participants
SB A, TM B
TM A, SB B
SB B, TM A
TM B, SB A
32 on small hierarchies
28 on large hierarchies
7
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
8
Results (1)
Small hierarchy
A
B
Phase 1
TM 9.88 (3.23)
SB 12.88 (1.96)
TM 11.50 (2.14)
SB 10.38 (1.69)
Phase 2
TM 12.25 (1.75)
SB 12.63 (2.00)
TM 10.75 (2.77)
SB 11.50 (2.00)
Correct task completions (max=16)
9
Results (2)
Large hierarchy
B
A
Phase 1
TM 8.71 (1.60)
SB 11.43 (1.27)
TM
SB
8.29 (2.14)
11.14 (2.67)
Phase 2
TM 11.57 (1.27)
SB 11.00 (2.16)
TM 10.86 (1.57)
SB 11.00 (2.00)
Correct task completions (max=16)
10
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)
11
Observations
SB appeared to convey structure better
Participants felt TM conveyed size better,
but not bore out by data
Strategies mattered
12
SunBurst Negative
In large hierarchies, files at the periphery
are usually tiny and very difficult to
distinguish
examples
13
Treemap Too
examples
14
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
15
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.
16
Design 1 - Angular Detail
• Most “natural”
• Least space-efficient
• Most configurable by
user
17
Design 2 - Detail Outside
• Exhibits non-distorted
miniature of overview
• Somewhat visually
disconcerting
• Focus is quite enlarged
(large circumference
and 360°)
• Relatively space
efficient
18
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
19
Video
4 minutes
20
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
21
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
22
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 threshholding)
->
Consistent speed as hierarchy grows
(really dependent on processor & graphics)
23
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?
24
Idea 1: Superimpose
+: Simple
- : Obscures areas
25
Idea 2: Grow/Shrink
+: Shows all context
- : Empty areas
26
Idea 3: Shrink overview
+: Shows all context
- : Wasteful of space
27
Thoughts?
Other possibilities?
Which do you like best?
Somebody build one!
28
Summary
Treemaps can be a very helpful
information visualization
Techniques for examining small regions in
more detail can make them even more
powerful
29
For More Information...
stasko@cc.gatech.edu
www.cc.gatech.edu/gvu/ii
30