Information Visualization Navigation Chris North cs 3724 HCI

Information Visualization: Navigation Chris North cs 3724: HCI

Presentations • pat kennedy • james walker • Vote: UI Hall of Fame/Shame?

Next • Mar 21: Proj 2, initial implementation • Apr 4: Proj 2, final implementation Presentations: UI critique or HW 2 results • Thurs: dan kirkpatrick, jason barnett • Next Tues: brian ward, juan vera • Next Thurs: dan constantin, grant underwood

Review • Shneiderman’s Info Vis. mantra? • overview first, zoom&filter, details on demand • Strategies for Multi-D visualization: • tablelens • Spotfire: scatterplots, dynamic queries • Parallel coordinates

1 D and 2 D Spaces • 1 D: info has strong 1 D organization • timeline, reststops on highway • Tape measure • text • 2 D: info has strong 2 D organization • maps • Tables? • Pictures, photos

Examples • 1 D: Project 1, VCR • Timeline for scheduling, set on/off flags • Calendar shows overview of schedule

Power. Point Slide Sorter • Data Space: 1 D array of slides • Visualization: 2 D array, nav 1 d

Typical Navigation 1 D scrollbar 2 D scrollbars

Keyhole Problem • • • Where am I? Where can I go? Where do I want to go? How do I get there? Lack of context, overview

Visual Overview • • Show me the data! Map, organization (spatial layout of concepts) What information is (not) available? Adds context info, relationships Enables direct access Encourages exploration HCI metrics: • Improves user performance, learning time, error rates, retention, satisfaction Insight

Navigation Strategies • Detail Only Keyhole problem • Zooming • Overview+Detail • Focus+Context (Distortion, fisheye)

Zooming: 1 D • http: //www. cs. umd. edu/hcil/lifelines/

Zooming: 2 D • http: //www. cs. umd. edu/hcil/jazz/ • Semantic zooming: • Don’t just show things at different size • change objects to make sense • E. g. add/remove detail info • Powers of Ten • Controls?

Zooming large 2 D spaces • http: //terraserver. homeadvisor. msn. com/image. asp? S=10&T=1&X=2689&Y=20639&Z=17&W=2

Overview+Detail: 1 D • See. Soft

Overview+Detail: 2 D Overview: Detail: Square in overview coupled to scroll bars of detail • Zoom factor = 5

Overview+Detail • Simultaneous overview and detail view • Views are linked: • Selector in overview navigates detail • Navigating detail updates selector in overview

Multiple levels = large scale overview intermediate view • Zoom factor = 5*5*5 = 125 detail view

Multiple Foci

Focus+Context: 1 D • http: //www. cs. umd. edu/hcil/fisheyemenu/

Focus+Context: 2 D

Comparison • Zooming: • • Scales best Simple Lose context, get lost Screen space • O+D: • Keeps context • Limited scale • Direct access • F+C • Multiple foci • Distortion disorienting • Implementation difficult