Information Visualiation: Trees Chris North cs3724: HCI

Presentations brian ward juan vera Vote: UI Hall of Fame/Shame?

Next Thurs: Demo day Proj 2, initial implementation, 1 page McBryde 102, 2-5pm Apr 4: Proj 2, final implementation Presentations: UI critique or HW2 results Next Tues: dan constantin, grant underwood, mike gordon (topo) Next Thurs: matt ketner, sam altman

Midterm Avg = Performance time Learning time Error rates/ error recovery time Retention time Subjective satisfaction 2: users + tasks 4: ov, z&f, dod 5: c 9: time = c1+c2*log2 2(distance/size) 10 Map: know geography, multi-select regions Menu: list alphabetic, don’t know geography, name Command line: type 2 letter abbrev, experts, Scaterplot: trends census, balance tradeooffs Excell: min max

Review 3 steps in animation loop 1. update state 2. repaint 3. sleep What is a thread? lightweight separate process

Review 1D and 2D spaces 1D: timelines, text 2D: maps, pictures 4 approaches for navigating large spaces? detail only zoom focus+context: detail area inside the overview overview+detail: 2 windows

Trees (Hierarchies) What is a tree? DAG, one parent per node Data structure: parent ptr, array of children, LM child+RS Size: #nodes = b height Examples: file systems, org charts, web sites, decision trees, geneology, libraryies dewey decimal, … Tasks: find, browse, ordered lists, properties Parent, ancestors, descendents, paths

Detail Only Dos: tree

TreeView Widget Good for directed search tasks Not good for learning structure No attributes Apx 50 items visible Lose path to root for deep nodes Scroll bar! Error rate high Fitt’s Law? Too many small distant things

Mac Finder

Overview+Detail Maryland

Focus+Context Hyperbolic Tree (star tree) Radial; shrink with distance to center Drag to navigate Fitt’s Law? Scale structure Xerox PARC, Inxight

Miniaturization Disk Tree Xerox PARC

3D ConeTrees Rotate subtrees Pro: more space natural, increase retention Con: Occlusion Mismatch for i/o devices Xerox PARC

Ugh!

FSN SGI file system navigator Jurassic Park

2 Approaches Connection node & link E.g. TreeView widget Containment node in node E.g. Venn diagram A CB A BC

Zooming TreeMaps Slice and Dice, space filling Node size & color encodes data attribute Zoom on subtrees Good for fixed-height trees Scale: 1000 Maryland

“Squarified” TreeMap

Cushion TreeMaps Free file directory browser Van Wijk Map of the Market

Radial Containment SunBurst Radial slicing Animated zooming Focus+Context Georgia Tech

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?

Multiple Foci? Focus on 2 distant regions simultaneously Microsoft Research