Overview and Detail
description
Transcript of Overview and Detail
![Page 1: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/1.jpg)
Overview and Detail
Inspired from CS 7450 - Information VisualizationJan. 10, 2002
John Stasko
Frédéric Vernier
Enseignant-Chercheur LIMSI-CNRS
Maître de conf Paris XI
Cours de Visualisation d'InformationInfoVis Lecture
Overview & Detail
![Page 2: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/2.jpg)
2From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Fundamental Problem
Scale - Many data sets are too large to visualize on one screenMay simply be too many casesMay be too many variablesMay only be able to highlight particular
cases or particular variables, but viewer’s focus may change from time to time
![Page 3: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/3.jpg)
3From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Overview
Providing an overview of the data set can be extremely valuableHelps present overall patternsAssists user with navigation and searchOrients activities
Generally start with overview
![Page 4: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/4.jpg)
4From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
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
![Page 5: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/5.jpg)
5From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Providing Both
Overview + detail displays can be combined via either time or spaceTime - Alternate between overview and
details sequentially in same placeSpace - Use different portions of screen
to show overview and details
Each has advantages and problems
![Page 6: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/6.jpg)
6From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Specific Problem
Develop visualization and interface techniques to show viewers both overview + detail, and allow flexible alternation between each
![Page 7: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/7.jpg)
7From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Common Solution
ScrollProvide a larger, virtual screen by
allowing user to move to different areas
Still a problemClunky interactionOnly get to see one piece
![Page 8: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/8.jpg)
8From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Worthy Objective
Allow viewer to examine cases and/or variables in detail while still maintaining context of those details in the larger whole
ConcessionYou simply can’t show everything at
onceBe flexible, facilitate a variety of user
tasks
![Page 9: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/9.jpg)
9From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Nature of Solutions
Not just clever visualizationsNavigation & interaction just as
important
Information visualization & navigation
![Page 10: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/10.jpg)
10From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Confound
Devices with even smaller screens are becoming more popular!
![Page 11: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/11.jpg)
11From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
An Example
Detail-only view (from Civilization II game)
![Page 12: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/12.jpg)
12From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
An Example
Overview and detail (from Civilization II game)
overview
detail
![Page 13: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/13.jpg)
13From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
1. Detail-only
Single window with horizontal and vertical panning
Works only when zoom factor is relatively small
Example: Windows
![Page 14: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/14.jpg)
14From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
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
![Page 15: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/15.jpg)
15From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
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?
![Page 16: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/16.jpg)
16From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
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
![Page 17: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/17.jpg)
17From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
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
![Page 18: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/18.jpg)
18From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
6. Bifocal magnified
“Magnifying glass” zoomed image floats over overview image
Neighboring objects are obscured by the zoomed window
![Page 19: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/19.jpg)
19From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
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...
![Page 20: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/20.jpg)
20From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
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
![Page 21: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/21.jpg)
21From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Task Taxonomy
Image generation: overview is important, but most of time is spent at detail levelExample: CAD/CAM
Open-ended exploration: overview not always complete; navigation must be fluent and easily masteredExample: Interactive Map
Diagnostic: high detail, fluent panning and complete image coverageExample: Circuitry Design
![Page 22: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/22.jpg)
22From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Task Taxonomy
Navigation: global view with increased magnification detail areas; panning and zooming less importantExample: Geographic Information System
Monitoring: Global view with multiple detailed views for local troubleshooting; window management is criticalExample: Network management
![Page 23: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/23.jpg)
23From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
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
![Page 24: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/24.jpg)
24From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
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
![Page 25: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/25.jpg)
25From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Browser Taxonomy
Dynamic Presentation Browsers Quality of the Update Nature of the Update (“Level of Detail”) Zooming Factor
![Page 26: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/26.jpg)
26From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Additions/Variations
Since the writing of the article, new techniques and many variations have been developed...
![Page 27: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/27.jpg)
27From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Magnifier Problem Fix
DragMag Image Magnifier
Ware and Lewis ‘95
hello
More text
hello
Bifocal magnifieddisplay withoutproblem ofobscuring theneighboring items
![Page 28: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/28.jpg)
28From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Transparent Overlays
Lieberman ‘94,’97
Make detailed view semi-transparent, then overlay overviewwith it
May even control transparency of each
![Page 29: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/29.jpg)
29From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Important Issue
The “overview” display may need to present huge number of data elements
What if there simply isn’t enough room?The number of data elements is larger
than the number of pixels
Approaches?
![Page 30: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/30.jpg)
30From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Two Main Approaches
1. Interactive display (add scrolling)Is it still an overview?
2. Reduce the dataEliminate data elements
But then is it still an overview?
Aggregate data elements3. Reduce the visual representation
Smart ways to draw large numbers of data elements
![Page 31: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/31.jpg)
31From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Drawing the Overview
Information Mural
Jerding and Stasko ‘95,’98www.cc.gatech.edu/gvu/softviz/infoviz/information_mural.html
What do you do when your data set is too large foryour overview window?--- More data points than pixels--- Don’t want to fall back on scrolling
![Page 32: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/32.jpg)
32From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Information Mural
Use techniques of computer graphics (shading andantialiasing) to more carefully draw overview displaysof large data sets
Think of each data point as ink and each screen pixelas a bin
Data points (ink) don’t fit cleanly into one bin, someink may go into neighboring bins
Can map density to gray or color scale
![Page 33: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/33.jpg)
33From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Mural Algorithm
![Page 34: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/34.jpg)
34From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Mural Example
Object-oriented code executions
![Page 35: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/35.jpg)
35From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Mural Example
Sunspot activity over 150 years
![Page 36: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/36.jpg)
36From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Mural Example
ParallelCoordinates
normal
muralized
colorized
![Page 37: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/37.jpg)
37From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Mural Example
Message passing in parallel program
![Page 38: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/38.jpg)
38From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Mural Example
U.S. Census Data
![Page 39: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/39.jpg)
39From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Mural Example
LaTeXsourcefile
![Page 40: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/40.jpg)
40From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Multiple Windows/Views
Fundamentally, (good) overview & detail involves multiple views
When should you use multiple views?What makes a good multiple view
system?
![Page 41: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/41.jpg)
41From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Design Guidance
Nice paper with many design guidelines
Model of multiple view system1. Selection of views2. Presentation of views3. Interaction among views
Wang Baldonado, Woodruff, and KuchinskyAVI 2000
![Page 42: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/42.jpg)
42From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
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
![Page 43: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/43.jpg)
43From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
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 user’s attention on the right view at the right time
![Page 44: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/44.jpg)
44From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
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 zoomingMore detailed study of interaction
techniques to support overview and detail displays
![Page 45: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/45.jpg)
45From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Projects
“Personal ads”
![Page 46: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/46.jpg)
46From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
References
Spence and CMS booksAll referred to articlesS. Meier, Civilization II.
MicroProse:1998 http://www.civ2.com
Demonstration maps generated at MapQuest, http://www.mapquest.com
F’99 slides from Voida, Zhang, Zook and Stenger
![Page 47: Overview and Detail](https://reader035.fdocuments.us/reader035/viewer/2022062321/56813a1c550346895da1f6fe/html5/thumbnails/47.jpg)
47From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Upcoming
Focus & contextPanning and zooming