1. Overview and Detail Inspired from CS 7450 - 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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