Overview and Detail Inspired from CS Information Visualization Jan. 10, 2002 John Stasko Frédéric Vernier Enseignant-Chercheur LIMSI-CNRS Maître de conf Paris XI Cours de Visualisation d'Information InfoVis 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 screen  May simply be too many cases  May be too many variables  May 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 valuable  Helps present overall patterns  Assists user with navigation and search  Orients 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 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

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

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  Concession  You simply can’t show everything at once  Be flexible, facilitate a variety of user tasks

9From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Nature of Solutions  Not just clever visualizations  Navigation & 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 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

22From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 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

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 magnified display without problem of obscuring the neighboring items

28From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Transparent Overlays Lieberman ‘94,’97 Make detailed view semi-transparent, then overlay overview with 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 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

31From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Drawing the Overview Information Mural Jerding and Stasko ‘95,’98 What do you do when your data set is too large for your 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 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) don’t fit cleanly into one bin, some ink 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 Parallel Coordinates 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 LaTeX source file

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 system  1. Selection of views  2. Presentation of views  3. Interaction among views Wang Baldonado, Woodruff, and Kuchinsky AVI 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 zooming  More 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 books  All referred to articles  S. Meier, Civilization II. MicroProse:  Demonstration maps generated at MapQuest,  F’99 slides from Voida, Zhang, Zook and Stenger

47From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Upcoming  Focus & context  Panning and zooming