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

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

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

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

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

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

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

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

9From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia

Tech

Nature of Solutions

Not just clever visualizationsNavigation & interaction just as

important

Information visualization & navigation

10From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia

Tech

Confound

Devices with even smaller screens are becoming more popular!

11From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia

Tech

An Example

Detail-only view (from Civilization II game)

12From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia

Tech

An Example

Overview and detail (from Civilization II game)

overview

detail

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

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

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?

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

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

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

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

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

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

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

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

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

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

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

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

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

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?

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

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

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

33From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia

Tech

Mural Algorithm

34From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia

Tech

Mural Example

Object-oriented code executions

35From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia

Tech

Mural Example

Sunspot activity over 150 years

36From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia

Tech

Mural Example

ParallelCoordinates

normal

muralized

colorized

37From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia

Tech

Mural Example

Message passing in parallel program

38From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia

Tech

Mural Example

U.S. Census Data

39From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia

Tech

Mural Example

LaTeXsourcefile

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?

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

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

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

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

45From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia

Tech

Projects

“Personal ads”

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

47From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia

Tech

Upcoming

Focus & contextPanning and zooming