1D & 2D Spaces for Representing Data Mao Lin Huang

1-D Representation of Data

1-D Textual Data

Keyhole Problem No context Lost, disoriented Where am I? Where can I go? Where do I want to go? How do I get there?

Visual Overview 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

Navigation Approaches Detail Only Zooming Overview+Detail Focus+Context (Distortion, fisheye)

1D Visual Representation Plaisant, “Lifelines”, pp 285 See personal history Mackinlay, “Perspective Wall”, web

1D Visual Representation Eick, “SeeSoft”, p 419 »Analyze 50,000 lines of code simultaneously by mapping each line of code into a thin row. Eick, “Data Visualization Sliders”, p 251 (2 pages)

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

Fisheye Menus Very Fast due to mouse mechanics, no clicking, mostly vertical sliding Alphabet overview helpful Fisheye context not useful in this case? Might be more useful in SeeSoft where miniature representation gives important information Limits # of readable items to ~10 Wasted space at top- and bottom- right Distortion problematic? Alphabet overview distorted at A and Z Scale limited? Possible improvement: Same alphabet overview (without end distortion) Remove fisheye, maximize readable items like scrolling version Same fast mouse mechanics, scroll fast on left, no scroll on right

Music Animation Machine Good for visualizing music during serial playback, relate audio to visual structure Visualizing entire compositions: increase information density See patterns of phrases, instruments, etc.

2-D Representation of Data

2-D Image browsing Maps

Today Bederson, “Pad++”, p 530 » a zooming graphic interface to replace icon-based window interface Furnas, “Space-Scale Diagrams”, web

Space-Scale

Pad++ on edge Like ray-tracing Info surface window zoom

Semantic Zooming Zooming in, red object turns to blue

Multiple Views Zoom factor ~ 20

Multiple levels = large scale Zoom factor = 20 * 20 * 20 = 8000

Multiple Foci

Multiple Overviews Can have different information types at each level

2-D + Attributes Dynamaps: dynamic queries on maps

2-D: Focus+Context Representation of Data

2-D Robertson, “Document Lens”, p 562 » Spence, “Bifocal Lens”, p 331,333

Focus+Context Details within overview “Distortion-oriented display” “Fisheye” Leung, Apperley, “Taxonomy of distortion- oriented presentations”, book pg 350

Visual Transfer Functions Information surface Display surface Identity function = normal flat overview Bifocal

Magnification Functions 1 st Derivative

Bifocal Display Spence, Apperley

Bifocal Display Disadvantage: 1 dimensional stretching on the 4 sides

Perspective Wall / Document Lens

NonLinear Magnification

“Bubble” Disadvantage: local context highly de-magnified

“Fisheye”, “wide-angle lens” Disadvantage: no flat area

Quiz: TableLens Bifocal!

Fisheye Menus Non-linear: combination of Bubble + fisheye

Why not magnifying glass? Hides local context

F+C vs. O+D + Space efficient + Detail connected to context Smooth transition + matches human vision/processing? - Distortion - Longer learning time - no flat overview - Need a way to turn off focus - Content moves differently than mouse - hard to tell zoom factor + Scales up to larger data (zoom factor and chaining) + Multi foci easier + multiple overviews possible + Easy to implement, Less math! Fast system performance - >=2 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