Overview and Detail

1
Overview and Detail

• CS 7450 - Information Visualization
• February 10, 2005
• John Stasko

2
Fundamental Problem

• Scale - Many data sets are too large to visualize
  on one screen
• May simply be too many cases
• May be too many variables
• May only be able to highlight particular cases or
  particular variables, but viewers focus may
  change from time to time

3
Overview

• Providing an overview of the data set can be
  extremely valuable
• Helps present overall patterns
• Assists user with navigation and search
• Orients activities
• Generally start with overview

4
Details

• Viewers also will want to examine details,
  individual cases and variables
• How to allow user to find and focus on details of
  interest?
• Generally provide details on demand

5
Providing Both

• Overview detail displays can be combined via
  either time or space
• Time - Alternate between overview and details
  sequentially in same place
• Space - Use different portions of screen to show
  overview and details
• Each has advantages and problems

6
Specific Problem

• Develop visualization and interface techniques to
  show viewers both overview detail, and allow
  flexible alternation between each
• Potential Solutions????
• Discuss.

7
Common Solution

• Scroll
• Provide a larger, virtual screen by allowing user
  to move to different areas
• Still a problem
• Clunky interaction
• Only get to see one piece

8
Worthy Objective

• Allow viewer to examine cases and/or variables in
  detail while still maintaining context of those
  details in the larger whole
• Concession
• You simply cant show everything at once
• Be flexible, facilitate a variety of user tasks

9
Nature of Solutions

• Not just clever visualizations
• Navigation interaction just as important
• Information visualization navigation

10
Confound
Devices with even smaller screens are becoming
more popular!
11
An Example
Detail-only view (from Civilization II game)
12
An Example
overview
detail
Overview and detail (from Civilization II game)
13
Plaisant et al Article

• Good introduction to overview/detail issue
• Application concern viewing and editing large
  images
• Expanding the notion of the one dimensional
  scroll bar zooming, diagonal panning, multiple
  detailed views
• List of visualization/interaction solutions

IEEE Software 95
14
1. Detail-only

• Single window with horizontal and vertical
  panning
• Works only when zoom factor is relatively small
• Example Windows

15
2. Single window with zoom and replace

• Global view with selectable zoom area which then
  becomes entire view
• Variations can let users pan and adjust zoomed
  area and adjust levels of magnification
• Context switch can be disorienting
• Example CAD/CAM

16
3. Single coordinated pair

• Combined display of the overview and local
  magnified view (separate views)
• Some implementations reserve large space for
  overview others for detail
• Issue How big are different views and where do
  they go?

17
4. Tiled multilevel browser

• Combined global, intermediate, and detail views
• Views do not overlap
• Good implementations closely relate the views,
  allowing panning in one view to affect others

18
5. Free zoom and multiple overlap

• Overview presented first user selects area to
  zoom and area in which to create detailed view
• Flexible layout, but users must perform manual
  window management

19
6. Bifocal magnified

• Magnifying glass zoomed image floats over
  overview image
• Neighboring objects are obscured by the zoomed
  window

20
7. Fish-eye view

• Magnified image is distorted so that focus is at
  high magnification, periphery at low
• All in one view
• Distortion can be disorienting
• More details next class...

21
Remain Task-Driven

• The goal is to identify the primary type of task
  the user will be performing and adapt the browser
  to best fit the needs of that user

22
Task Taxonomy

• Image generation overview is important, but most
  of time is spent at detail level
• Example CAD/CAM
• Open-ended exploration overview not always
  complete navigation must be fluent and easily
  mastered
• Example Interactive Map
• Diagnostic high detail, fluent panning and
  complete image coverage
• Example Circuitry Design

23
Task Taxonomy

• Navigation global view with increased
  magnification detail areas panning and zooming
  less important
• Example Geographic Information System
• Monitoring Global view with multiple detailed
  views for local troubleshooting window
  management is critical
• Example Network management

24
Browser Taxonomy

• Once the user task has been determined, a browser
  appropriate to that task can be identified
• Plaisant suggests a browser taxonomy to classify
  and group browsers with similar features

25
Browser Taxonomy

• Static Presentation Browsers
• Single View
• Detail-only
• Zoom-and-replace
• Fish-eye
• Superimposition
• Multiple View
• Window-placement strategy
• Ratio of sizes
• Coordination (none / unidirectional /
  bidirectional)
• Global view

26
Browser Taxonomy

• Dynamic Presentation Browsers
• Quality of the Update
• Nature of the Update (Level of Detail)
• Zooming Factor

27
Additions/Variations

• Since the writing of the article, new techniques
  and many variations have been developed...

28
Magnifier Problem Fix
DragMag Image Magnifier
Bifocal magnified display without problem
of obscuring the neighboring items
More text
hello
hello
Video
Ware and LewisCHI 95
29
Transparent Overlays
Make detailed view semi-transparent, then overlay
overviewwith it
May even control transparency of each
Lieberman UIST 94
30
Important Issue

• The overview display may need to present huge
  number of data elements
• What if there simply isnt enough room?
• The number of data elements is larger than the
  number of pixels
• Approaches?

31
Two Main Approaches

• 1. Interactive display (add scrolling)
• Is it still an overview?
• 2. Reduce the data
• Eliminate data elements
• But then is it still an overview?
• Aggregate data elements
• 3. Reduce the visual representation
• Smart ways to draw large numbers of data elements

32
Drawing the Overview
Information Mural
What do you do when your data set is too large
foryour overview window? --- More data points
than pixels --- Dont want to fall back on
scrolling
Jerding and Stasko InfoVis 95, IEEE ToVCG
98 www.cc.gatech.edu/gvu/softviz/infoviz/informat
ion_mural.html
33
Information Mural

• Use techniques of computer graphics (shading and
• antialiasing) to more carefully draw overview
  displays
• of large data sets
• Think of each data point as ink and each screen
  pixel
• as a bin
• Data points (ink) dont fit cleanly into one bin,
  some
• ink may go into neighboring bins
• Can map density to gray or color scale

34
Mural Algorithm
35
Mural Example
Object-oriented code executions
36
Mural Example
Sunspot activity over 150 years
37
Mural Example
normal
Parallel Coordinates
muralized
colorized
38
Mural Example
Message passing in parallel program
39
Mural Example
U.S. Census Data
40
Mural Example
LaTeX source file
Video
41
Multiple Windows/Views

• Fundamentally, (good) overview detail involves
  multiple views
• When should you use multiple views?
• What makes a good multiple view system?

42
Design Guidance

• Nice paper with many design guidelines
• Model of multiple view system
• 1. Selection of views
• 2. Presentation of views
• 3. Interaction among views

Wang Baldonado, Woodruff, and Kuchinsky AVI 2000
43
When to Use Mult. Views

• Diversity - Use m.v. when there is a diversity of
  attributes, models, user profiles, levels of
  abstraction or genres
• Complementarity - Use m.v. when different views
  bring out correlations and/or disparities
• Decomposition - Partition complex data into m.v.
  to create manageable chunks and to provide
  insight into the interaction among different
  dimensions
• Parsimony - Use m.v. minimally

44
How to Use Multiple Views

• Space/Time Resource Optimization - Balance the
  spatial and temporal costs of presenting m.v.
  with the spatial and temporal benefits of using
  the views
• Self Evidence - Use perceptual cues to make
  relationships among m.v. more apparent to the
  user
• Consistency - Make interfaces for m.v.
  consistent, and make the states of m.v.
  consistent
• Attention Management - Use perceptual cues to
  focus the users attention on the right view at
  the right time

45
Still to come...

• Related topics coming up
• Focus Context views
• Typically one display window or view for both
  overview and detail that uses some form of
  distortion to combine them
• Panning and zooming
• More detailed study of interaction techniques to
  support overview and detail displays

46
HW4

• Questions?
• Due Tuesday
• Submit 2 hardcopies in class
• Email pdf of report to eaganj_at_cc

47
Final Project

• Contest data set
• Advertising of topics teams

48
Upcoming

• Tools discussion design session
• Time series data

49
References

• Spence and CMS books
• All referred to articles
• S. Meier, Civilization II. MicroProse1998
  http//www.civ2.com
• Demonstration maps generated at MapQuest,
  http//www.mapquest.com
• F99 slides from Voida, Zhang, Zook and Stenger