Overview and Detail

Inspired from CS 7450 - Information Visualization Jan. 10, 2002 John Stasko Overview and Detail Cours de Visualisation d'Information InfoVis Lecture Overview & Detail Frédéric Vernier Enseignant-Chercheur LIMSI-CNRS Maître de conf Paris XI

From 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

From 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

From 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

From 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

From 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

From 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

From 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

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Nature of Solutions Not just clever visualizations Navigation & interaction just as important Information visualization & navigation

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Confound Devices with even smaller screens are becoming more popular!

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech An Example Detail-only view (from Civilization II game)

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech An Example overview detail Overview and detail (from Civilization II game)

1. Detail-only • Single window with horizontal and vertical panning • Works only when zoom factor is relatively small • Example: Windows From 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 From 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? From 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 From 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 From 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 From 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... From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech

From 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

From 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 masteredExample: Interactive Map Diagnostic: high detail, fluent panning and complete image coverage Example: Circuitry Design

From 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

From 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

From 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

From 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

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

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Magnifier Problem Fix DragMag Image Magnifier Bifocal magnified display without problem of obscuring the neighboring items hello More text hello Ware and Lewis ‘95

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Transparent Overlays Make detailed view semi-transparent, then overlay overviewwith it May even control transparency of each Lieberman‘94,’97

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

From 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

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Drawing the Overview Information Mural 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 Jerding and Stasko ‘95,’98 www.cc.gatech.edu/gvu/softviz/infoviz/information_mural.html

From 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

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Mural Algorithm

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Mural Example Object-oriented code executions

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Mural Example Sunspot activity over 150 years

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Mural Example normal Parallel Coordinates muralized colorized

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Mural Example Messagepassing in parallel program

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Mural Example U.S. Census Data

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Mural Example LaTeX source file

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

From 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

From 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

From 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

From 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

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Projects “Personal ads”

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech References Spence and CMS books All referred to articles S. 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

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

Overview and Detail