SIMS 247: Information Visualization and Presentation Marti Hearst

1
SIMS 247 Information Visualization and
PresentationMarti Hearst
Feb 25, 2004    
2
Today

• Visualization for Analysis (Carlis Konstan)
• Zooming
• Focus Context / Distortion-based Views
• The Information Visualizer (Card et al.)

3
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?

4
Analyzing Complex Periodic Data
Carlis Konstan, UIST 1998.
5

• All 112 foods, alphabetical
• Color corresponds to food type
• Rings rather than blots to aid visibility

• Carlis Konstan, UIST 1998.

6
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.
7
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.
8
Analyzing Complex Periodic Data
Analyzing properties of sound
Carlis Konstan, UIST 1998.
9
Analyzing Complex Periodic Data
Carlis Konstan, UIST 1998.
10
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

11
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
• Todays tools use one, two or all three of these
  techniques

12
Do These Work?

• The existing studies indicate that we dont yet
  know how to make the following work well for
  every-day tasks
• Pan-and-Zoom
• 3D Navigation

13
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 FocusContext)

14
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/in
  dex.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

15
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
  scaled-down version of an object, see a different
  representation
• The representation shown depends on the meaning
  to be imparted.

16
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

17
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

18
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

19
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.

20
PhotoMesa
http//www.cs.umd.edu/hcil/photomesa
21
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

22
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

23
Bubblemaps

• Like Quantum Treemaps, elements guaranteed to be
  same size
• Arbitrary shapes
• No wasted space
• May be harder to visually parse than QT

24
How to Pan While Zooming?
25
How to Pan While Zooming?
26
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

27
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 (successful in a small
  study)
• Image Collection (not successful)
• Maps (mixed, needs work)
• Dictionary (not successful)
• Sound Editor (not successful)
• Demo and Movie
• http//www-ui.is.s.u-tokyo.ac.jp/takeo/research/
  autozoom/autozoom.htm

28
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?

29
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.

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.

31
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 arent 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.

32
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

33
Piecewise Non-Continuous Magnification Functions

• Bifocal Display, Perspective Wall

Bifocal Display
Perspective Wall
34
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, its just scaled, not distorted

35
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

36
Continuous Magnification Functions

• Fisheye View, Polyfocal Display
• Can distort boundaries because applied radially
  rather than x y

1D Fisheye
2D Polyfocal
37
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/c
astleman/proj_02.html
38
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

39
Fisheye Menu
http//www.cs.umd.edu/hcil/fisheyemenu/fisheyemenu
-demo.shtml
40
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

41
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

42
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

43
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

44
Comparisons
Bifocal View
Polyfocal View
45
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

46
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.

47
Information Workspace

• Workspace for information access

48
Information Workspace

• Low-cost, immediate access to stored objects
• Exploits power of new computers
• Intends to answer demand for information
  management applications
• Informations cost structure

49
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 users
  ability to assimilate and retrieve information

50
3D Navigation

• Walking Metaphor
• Point of Interest Logarithmic Flight
• Object of Interest Logarithmic Manipulation
• Doors
• Overview