Transcript Information Visualization: Principles, Promise, and

SIMS 247: Information Visualization
and Presentation
Marti Hearst
Feb 25, 2004
1
Today
•
•
•
•
Visualization for Analysis (Carlis & Konstan)
Zooming
Focus + Context / Distortion-based Views
The Information Visualizer (Card et al.)
2
Visualization for Analysis
• Carlis & Konstan, UIST 1998
• For: data that is both periodic and serial
– Time students spend on different activities
– Tree growth patterns
• Time: which year
• Period: yearly
– Multi-day races such as the Tour de France
– Calendars arbitrarily wrap around at end of month
– Octaves in music
• Problem: How to find patterns along both
dimensions?
3
Analyzing Complex Periodic Data
Carlis & Konstan, UIST 1998.
4
•All 112 foods, alphabetical
•Color corresponds to food type
•Rings rather than blots to aid
visibility
Carlis & Konstan, UIST 1998.
5
Analyzing Complex Periodic Data
•12 most common foods
•Consumption values for
each month appear as spikes
•Each food has its own color
•Boundary line (in black)
shows when season
begins/ends
Carlis & Konstan, UIST 1998.
6
Analyzing Complex Periodic Data
•Different use of the viz in
the chimp domain
•2 chimps (red and blue)
•Length of line is size of the
group they travel with
•Top spiral is average size
•Bottom spiral is max size
Carlis & Konstan, UIST 1998.
7
Analyzing Complex Periodic Data
Analyzing properties of sound
Carlis & Konstan, UIST 1998.
8
Analyzing Complex Periodic Data
Carlis & Konstan, UIST 1998.
9
Carlis & Konstan
• An excellent example of infoviz
– Provides clarity about information that is not
otherwise possible
– Makes excellent use of visual principles
• Color, size, position all used properly
• Different features are easy to discriminate, do not
interfere with one another
– Applicable to many different types of problems
• Different levels of complexity
10
Zooming, Focus + Context,
and Distortion
• Large amount of data in small space
• Maximize use of screen real estate
• Allow examination of a local area in detail
within context of the whole data set
• Today’s tools use one, two or all three of these
techniques
Slide adapted from Hornung & Zagreus
11
Do These Work?
The existing studies indicate that we don’t yet
know how to make the following work well for
every-day tasks:
– Pan-and-Zoom
– 3D Navigation
12
Zooming
• Zoom in: ability to see a portion in detail while
seeing less of the overall picture
• Zoom out: see more of overall picture, but in
less detail
• Animation (also provides Focus+Context)
Slide adapted from Hornung & Zagreus
13
Pad++
• A toolkit
– (superceded by Piccolo, nee Jazz)
– http://www.cs.umd.edu/hcil/piccolo/index.shtml
– http://www.cs.umd.edu/hcil/piccolo/applications/index.shtml
•
•
•
•
An infinite 2D plane
Can get infinitely close to the surface too
Navigate by panning and zooming
Pan:
– move around on the plane
• Zoom:
– move closer to and farther
from the plane
14
Semantic Zooming
• Geometric (standard) zooming:
– The view depends on the physical properties of what
is being viewed
• Semantic Zooming:
– When zooming away, instead of seeing a scaleddown version of an object, see a different
representation
– The representation shown depends on the meaning
to be imparted.
15
Examples of Semantic Zoom
• Infinitely scalable painting program
– close in, see flecks of paint
– farther away, see paint strokes
– farther still, see the wholistic impression of the
painting
– farther still, see the artist sitting at the easel
16
Examples of Semantic Zoom
• Information Maps
– zoom into restaurant
• see the interior
• see what is served there
– maybe zoom based on price instead!
• see expensive restaurants first
• keep zooming till you get to your price range
• Browsing an information service
– Charge user successively higher rates for
successively more detailed information
17
The Role of Portals
• All this panning and zooming can get
confusing (maybe even dizzying)
• Portals allow for zooming a small piece of the
dataset while keeping everything else in the
same position
– Pad++ is one big stretchy sheet
– A portal is more like a special window into a piece of
the sheet
– That window behaves independently of the rest
18
PadPrints
Graphical Multiscale Web Histories: A Study of PadPrints, R. Hightower, L. Ring, J.
Helfman, B. Bederson, J. Hollan, Proc. Hypertext '98, Pittsburg, PA, 1998
.
19
PhotoMesa
http://www.cs.umd.edu/hcil/photomesa
Slide adapted from Hornung & Zagreus
20
PhotoMesa Interface
PhotoMesa: A Zoomable Image Browser Using Quantum Treemaps and
Bubblemaps, B. Bederson, UCM UIST 2001
• Zooming is primary presentation mechanism
• Zoom in, zoom out on levels of thumbnails
• Quickly drill down to individual picture (at full
resolution)
• Outline shows area of next zoom level
• History of views
• Thumbnail zooms up when hover w/cursor
• Export images
• Cluster by filename
Slide adapted from Hornung & Zagreus
21
PhotoMesa Goals
•
•
•
•
Automatically lay out images
Use immediately – little setup time
Large set of images in context
Default groupings are by directory, time, or
filename
– No hierarchy
• Makes managing photos difficult: can delete, but
reorganization a problem
• Can add metadata
Slide adapted from Hornung & Zagreus
22
Bubblemaps
• Like Quantum Treemaps,
elements guaranteed to be
same size
• Arbitrary shapes
• No wasted space
• May be harder to visually
parse than QT
Slide adapted from Hornung & Zagreus
23
How to Pan While Zooming?
24
How to Pan While Zooming?
25
Navigation in Pad++
• How to keep from getting lost?
– Animate the traversal from one object to another
using “hyperlinks”
• If the target is more than one screen away, zoom out,
pan over, and zoom back in
– Goal: help user maintain context
26
Speed-Dependent Zooming
Speed-dependent Automatic Zooming for Browsing Large Documents, T. Igarashi, K.
Hinckley, UIST 2000.
• Navigation technique that integrates rate-based scrolling with
automatic zooming.
• Adjust zoom level automatically to prevent “extreme visual flow”
– Automatically zoom out when going fast, zoom in when slowing down
– Uses semantic zooming to provide context
• Applied to
–
–
–
–
–
Large Documents
Image Collection
Maps
Dictionary
Sound Editor
(successful in a small study)
(not successful)
(mixed, needs work)
(not successful)
(not successful)
• Demo and Movie:
http://www-ui.is.s.u-tokyo.ac.jp/~takeo/research/autozoom/autozoom.htm
27
Is it useful?
• Is panning and zooming useful?
– Is it better to show multiple simultaneous views?
– Is it better to use distortion techniques?
• Would keeping a separate global overview help
with navigation?
28
Study of Overview + Detail
• K. Hornbaek et al., Navigation patterns and Usability of
Zoomable User Interfaces with and without an Overview, ACM
TOCHI, 9(4), December 2002.
• A study on integrating Overview + Detail on a
Map search task
– Incorporating panning & zooming as well.
– They note that panning & zooming does not do well
in most studies.
29
Overview + Detail
K. Hornbaek et al., Navigation patterns and Usability of Zoomable User Interfaces with and without an Overview, ACM TOCHI, 9(4),
December 2002
.
30
Overview + Detail
•
K. Hornbaek et al., Navigation patterns and Usability of Zoomable
User Interfaces with and without an Overview, ACM TOCHI, 9(4),
December 2002.
• Results seem to be
– Subjectively, users prefer to have a linked overview
– But they aren’t necessarily faster or more effective
using it
– Well-constructed representation of the underlying
data may be more important.
• More research needed as each study seems to
turn up different results, sensitive to
underlying test set.
31
Distortion-based Techniques
Leung & Apperley:
Unified theory of distortion techniques
• Techniques aim to solve problems of presenting large
amounts of data in a confined space.
• “…stretchable rubber sheet mounted on a rigid frame”
• Stretching = Magnification
• Stretching one part must equal shrinkage in other areas
Slide adapted from Hornung & Zagreus
32
Piecewise Non-Continuous
Magnification Functions
• Bifocal Display, Perspective Wall
Bifocal Display
Slide adapted from Hornung & Zagreus
Perspective Wall
33
Bifocal Display
• Combination of detail view
and two distorted side views
• Can be applied in 2D
– Since the corners are distorted
by the same amount in x and y,
it’s just scaled, not distorted
Slide adapted from Hornung & Zagreus
34
Perspective Wall
• Similar to Bifocal, except demagnifies at increasing rate,
while Bifocal is constant
• Visualizes linear information such as timeline
• Adds 3D but uses excess real estate on screen
Slide adapted from Hornung & Zagreus
35
Continuous Magnification
Functions
• Fisheye View, Polyfocal Display
– Can distort boundaries because applied radially
rather than x y
1D Fisheye
Slide adapted from Hornung & Zagreus
2D Polyfocal
36
Fisheye View
• Thresholding
– Information elements have
numbers based on relevance
and distance from point of
focus
– Value then determines what
information is to presented
or suppressed
Polar Fisheye View
Image from Shishir Shaw
University of Texas, Austin
www.adires.com/~castleman/proj_02.html
Slide adapted from Hornung & Zagreus
37
Fisheye Menu
Fisheye Menus, B. Bederson, in the Proceedings of ACM UIST
2000, pp. 217-226.
• Dynamically change the size of a menu
item to provide a focus area around the
mouse pointer, while allowing all menu
items to remain on screen
• All elements are visible but items near
cursor are full-size, further away are
smaller
• “Bubble” of readable items move with
cursor
Slide adapted from Hornung & Zagreus
38
Fisheye Menu
http://www.cs.umd.edu/hcil/fisheyemenu/fisheyemenu-demo.shtml
Slide adapted from Hornung & Zagreus
39
Fisheye Menu
• Distortion Function
– Maximum font size
– Focus length (number of items at full size)
• Together these control the trade-off between the number of
items at full size and the size of the smallest item
– Focus length  small items  distortion 
• Alphabetic Index
– Indexes can decrease search time
– Index is positioned so that if cursor is aligned with it, the
item will be the first one for that letter
• Initial design had current position, but this was confusing
because it moved
Slide adapted from Hornung & Zagreus
40
Focus Lock
• Item are difficult to select because small
mouse movements result in change of focus
• “Focus Lock” allows user to freeze focused
area and move mouse freely
– If cursor moves outside focus area, the area will
expand, and perhaps push ends off the screen
Slide adapted from Hornung & Zagreus
41
Evaluation
• Small 10 person test, ½ programmers
– Compared hierarchy, fisheye, scrollbar, and arrow
bar (scrolling arrows)
– Looking for trends
• Results
– Hierarchy was best for goal-directed task
– Fisheye preferred for browsing
• Not significantly though
• Non-programmers rated it much lower than
programmers
– Only one person discovered Focus Lock
– Index was thought to be interactive
Slide adapted from Hornung & Zagreus
42
Polyfocal Display
• Highest peak is focus of
display
• Distorts shape of
boundaries
• Troughs surrounding
peaks are highly distorted
and can effectively be
shrunk to nothing
Slide adapted from Hornung & Zagreus
43
Comparisons
Bifocal View
Slide adapted from Hornung & Zagreus
Polyfocal View
44
Focus + Context
• Can go hand-in-hand with distortion – like
fisheye
• Works with zooming if animated – Photomesa
• “Allows dynamic interactive positioning of the local
detail without severely compromising spatial
relationships.”
– Leung & Apperley
• “One challenge in navigating through any large
dataspace is maintaining a sense of relationship
between what you are looking at and where it is with
respect to the rest of the data.”
– Bederson & Hollan
Slide adapted from Hornung & Zagreus
45
Robertson, Card & Mackinlay
• The Information Visualizer
• Pioneered many Infoviz concepts
• Definition
“Information Visualization is an attempt to display
structural relationships and context that would be more
difficult to detect by individual retrieval requests.”
Slide adapted from Hornung & Zagreus
46
Information Workspace
• Workspace for information access
Slide adapted from Hornung & Zagreus
47
Information Workspace
• Low-cost, immediate access to stored objects
• Exploits power of new computers
• Intends to answer demand for information
management applications
• Information’s “cost structure”
Slide adapted from Hornung & Zagreus
48
Large workspace
• Add virtual screen space
– Rooms
– Extend the “WIMP” desktop metaphor
• Increase density
– Animation
– 3D perspective
• Increase real-time interaction between user and system
• Visual Abstractions
– Shift cognitive load to application
– Abstract information structures speed user’s ability to
assimilate and retrieve information
Slide adapted from Hornung & Zagreus
49
3D Navigation
•
•
•
•
•
Walking Metaphor
Point of Interest Logarithmic Flight
Object of Interest Logarithmic Manipulation
Doors
Overview
Slide adapted from Hornung & Zagreus
50