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’swrong?

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?

E.g. SeeSoft

• 1 line of pixels / line of code

Reduce Even More

• Stasko, “Information Mural”•

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

Information Scent

• Hint at what data is hiding behind each item in the overview

• Enable users to ‘sniff’ out data of interest

• What data to bubble up to overview?

• What data to push down into the details?

TableLens

Aggregation with Zooming

• Rayson, “Aggregate Towers”•

Zoom

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

• Zoom factor = 125

overview intermediate view

intermediate view detail view

Multiple FociLinkit

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:• 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