Information Visualization 2: Overview and Navigation Chris North cs3724: HCI

Review Shneiderman’s Info. Vis. mantra? Mapping data to graphics?

The Problem Data Screen

Typical Navigation 1D scrollbar 2D scrollbars What’s wrong?

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

Keyhole Problem

Context is Important!

E.g: 3 Overviews of Text (MS Word) Advantages?

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, satisfaction Insight

Navigation Strategies Detail Only Overview+Detail Multiple views Zooming Focus+Context Distortion, fisheye

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

Zooming: 2D KidPad, HiNote, Jazz 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?

Overview+Detail: 1D SeeSoft

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

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

Multiple Foci Linkit

Focus+Context: 1D Fisheye Menu: http://www.cs.umd.edu/hcil/fisheyemenu/ Perspective Wall

Focus+Context: 2D

Comparison Zooming: Overview+Detail: Focus+Context:

Comparison Zooming: Overview+Detail: Focus+Context: Screen space efficient Infinite scalability Lose overview when zoom in Overview+Detail: Good scalability, chaining Multiple foci Disconnect between views, back-n-forth Focus+Context: Integrated overview with detail, connected Least scalable Distortion, overview unstable

Quiz Spotfire? TableLens?

Design Exercise