Navigation in 1D and 2D Information Spaces

1
Navigation in1-D and 2-D Information Spaces

• CS 5764 Information Visualization
• Chris North

2
Course Map
Spence Ch. 4 Presentation
Spence Ch. 3 Representation
task
Raw Data (information)
Visualization(views)
Data Tables
VisualRepresentation
Datatransformations
Visualmappings
Viewtransformations
User interaction
Spence Ch. 5 Interaction
3
Review

• 2 steps for mapping data table to graphics?
• Visual Representations for multi-D data?
• Interactions for multi-D data?

4
Where are we?

• Tabular (multi-dimensional)
• Spatial Temporal
• 1D / 2D
• 3D
• Networks
• Trees
• Graphs
• Text Documents

• Fundamentals
• Navigation strategies
• Overview strategies
• Interaction techniques
• Design
• Development
• Evaluation

5
Video Music Animation Machine
http//www.well.com/user/smalin/mam.html

• Good during serial playback, relate audio to
  visual structure
• Visualizing entire compositions increase
  information density
• See patterns of phrases, instruments, etc.

6
Video Powers of 10

• Charles Ray Eames

7
1-D Information Spaces

• Timelines, time series

8
1-D Spaces

• Timelines, time series
• Lists
• Indices
• Text
• Video, audio
• Music
• PowerPoint slideshow
• computer memory

9
2-D Information Spaces

• Maps

10
2-D Information Spaces

• Maps
• pictures
• Satellite images
• medical images
• posters, page layouts
• circuit designs
• blue prints, floor plans
• 2D visualizations (plots)

11
Tasks?
12
Typical Navigation

• 1D scrollbar 2D scrollbars

Whats wrong?
13
The Keyhole Problem

• No context, tunnel vision
• Lost, disoriented
• Where am I?
• Where can I go?
• Where do I want to go?
• How do I get there?

14
(No Transcript)
15
(No Transcript)
16
Example Overviews of Text

• (MS Word)

17
Visual Overview

• Show me the data!
• Map, spatial organization
• What information is (not) present?
• Relationships of distant parts
• Enables direct access to parts
• Context to current location
• Encourages exploration
• HCI metrics
• Improves user performance, learning time,
  satisfaction
• But, how do we navigate to details?

? Insight
18
Navigation Strategies

• Detail Only
• OverviewDetail
• Multiple views

• ZoomPan
• FocusContext
• Distortion, fisheye

19
Detail Only

• Typical image browserMS PhotoEditor

• Typical map browsermapquest.com

20
ZoomPan
21
1-D Zooming Lifelines

• Plaisant, Lifelines (UMd)
• http//www.cs.umd.edu/hcil/lifelines/

22
2-D Zooming Pad

• Infinitely zoomable surface (Bederson et al.)
• Layout information in 2dscale
• Interaction panzoom
• Controls?
• Need more info?Just zoom in!

23
Pad derivatives

• Jazz toolkit, Piccolo toolkit
• http//www.cs.umd.edu/hcil/jazz/
• Kidpad, HiNote
• www.Kidpad.org
• http//www.cs.umd.edu/hcil/jazz/play/
• http//vtopus.cs.vt.edu/north/infoviz/hinoteapple
  t.html
• Counterpoint powerpoint with zooming
• http//www.cs.umd.edu/hcil/counterpoint/

24
Pad examples

• File system
• web history

25
Pad examples

• In visualizations
• Timelines
• plots

26
Space-Scale
27
Pad on edge
Info surface

• Like ray-tracing

zoom
window
28
Semantic Zooming

• Zooming in, red object turns to blue label

label
label
29
ZoomPan Good Bad

• Good
• Bad

30
ZoomPan Good Bad

• Good
• step back to get overview
• step forward for more details
• Infinite space for more details
• Visual scale ? conceptual scale
• Optimize screen space for current view
• Bad
• lose context when zoom in
• Get lost
• Moving long distances tedious

31
OverviewDetail
32
1-D OverviewDetail SeeSoft

• Eick, SeeSoft (Bell Labs / Lucent)

33
Multiple Hierarchical Foci

• Marcus Beale et al. (VT), InfoVis 2001
• Virtual schoolcomm.

34
(No Transcript)
35
2-D OverviewDetail

• Overview Detail
• Zoom factor ?

Square in overview coupled to scroll bars of
detail
36
Multiple levels large scale
overview
intermediate view
intermediate view
detail view

• Zoom factor ?

37
Multiple Foci
38
Multiple Overviews

• Can have different data types in each view

Color slice
CaT scan
39
Evaluations OD vs Detail-Only

• Beard Walker 2D
• Chimera trees
• North 1D (lists)
• Scrollbars are bad!

40
Intermediate views?

• Plaisant, When an Intermediate view matters
• When gt20x

Overview
?
Detail view
41
FocusContext
42
1-D FocusContext Perspective Wall

• Mackinlay, Perspective Wall (Xerox PARC)

43
Fisheye Menus

• Bederson, (UMd)
• http//www.cs.umd.edu/hcil/fisheyemenu/
• Overview letters more useful than menu items
  context?
• Menu items context more useful if show data
  attributes
• E.g. seesoft

44
2-D FC Bifocal Display

• Leung, Bifocal displays

45
Document Lens

• Robertson, Document Lens

46
Moosburg

• moosburg.cs.vt.edu
• Wendy Schafer

47
Distortion Functions

• Mapping from info surface to display surface

f
Information surface
Display surface
48
Visual Transfer Functions
Display surface
Display surface
Information surface
Information surface
Identity function normal flat overview
Bifocal
49
Magnification Functions
Bifocal
1st Derivative
Magnification
Magnification
Information surface
Information surface
50
Bifocal Display
Disadvantage 1 dimensional stretching on the 4
sides
Bifocal
51
Perspective Wall / Document Lens
Context shrinks gradually
Perspective
52
NonLinear Magnification

• http//www.cs.indiana.edu/hyplan/tkeahey/research/
  nlm/nlm.html
• http//www.cs.indiana.edu/hyplan/tkeahey/research/
  papers/infovis.98.html

53
Bubble
Disadvantage? local context highly de-magnified
Bubble
54
Fisheye, wide-angle lens
Disadvantage? no flat area
Wide-angle
55
FocusContext

• Bifocal
• Perspective
• Bubble
• Wide-angle

56
Why not magnifying glass?

• Hides local context

57
Quiz TableLens?

• Bifocal!

58
Fisheye Menus?

59
Calendar

• Leung

60
Quiz Spotfire?
61
FocusContext Screens

• Baudisch, Keeping things in context

62
Comparison

• ZoomPan
• -
• OverviewDetail
• -
• FocusContext
• -

63
Comparison

• Zooming
• maximizing screen space for current view
• infinite zoom factor
• - lose overview when zoom in, lost in details
• - time consuming to zoom out then back in
• OverviewDetail
• overview is always present
• avoid distortion
• - but disconnected, eyes back and forth
• FocusContext
• focus connected to context
• - distortion -gt problems with spatial distances,
  better for topological spaces
• - limited zoom factor

64
FC vs. OD

• -

• -

65
FC vs. OD

• Scales up to larger data (zoom factor and
  chaining)
• Multi foci easier
• multiple overviews possible
• Easy to implement, Less math!
• Fast system performance
• - gt2 places to look (cross-eyed!)
• Tracking field-of-view box hard
• Hand-eye coordination problem
• - detail and overview disconnected
• - Windows/space management
• - replicates detail data in overview

• Space efficient
• Detail connected to context
• Smooth transition
• matches human vision/processing?(or fish?)
• Neato!
• - Distortion
• - Longer learning time?
• - no flat overview, Need a way to turn off focus
• - Content moves differently than mouse,
  overshoot problem
• - zoom factors usually small

66
Another Nav Transparency

• Lieberman, Macroscope Powers of Ten Thousand

67
Navigation Strategies

• Detail only detail without overview
• Zooming detail or overview
• OverviewDetail detail next to overview
• FocusContext detail within overview
• Transparency detail on top of overview
• FocusContext
• Distortion-oriented display
• Fisheye

68
Other 1-D Spirals

• Carlis, Konstan, Serial periodic data

69
Design Exercise

• Calendar system