1. 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 Focus + Context

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 Challenge  Have context/overview seamlessly and smoothly co-exist with focus/detail  Why?  Easier to move between the two, helps assimilate view updates, …  Not all overview and detail techniques are good at this

4. 4From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Focus + Context Views  Same idea as overview and detail, with one key difference:  Typically, the overview and the detail are combined into a single display  Mimics our natural vision systems more closely

5. 5From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Possible Methods  Filtering  Selective aggregation  Micro-macro readings  Highlighting  Distortion

6. 6From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Prototypical Example  When people think about focus+context views, they typically think of the Fisheye View (distortion)  Introduced by George Furnas in 1981 report, more famous article is 1986 SIGCHI paper

7. 7From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Definition  Fisheye View - “Provide[s] detailed views (focus) and overviews (context) without obscuring anything…The focus area (or areas) is magnified to show detail, while preserving the context, all in a single display.” -(Shneiderman, DTUI, 1998)

8. 8From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Example (Not really a good one. Can you see why? ---just a Photoshop trick---)

9. 9From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Everyday Life Example

10. 10From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Kinda Fisheye - Natural 3D Perspective

11. 11From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Why is it called Fisheye?  Fisheye Camera Lens

12. 12From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Atlanta Journal Real fisheye camera lens

13. 13From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Fisheye Terminology  Focal point  Level of detail  Distance from focus  Degree of interest function

14. 14From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Focal Point  Assume that viewers focus is on some item, some coordinate, some position,... 0.0, 0.0 1.0, 1.0 Focal point 0.8, 0.1

15. 15From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Level of Detail  Some intrinsic value or quantity on each data element  How important is it to you in a general sense?  Simplest example is that all data items have same level of detail

16. 16From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Distance from Focus  Calculation of how far each data item is from the focal point 0.0, 0.0 1.0, 1.0 Focal point 0.8, 0.1 Query position

17. 17From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Degree of Interest Function  Function that determines how items in display are rendered  Degree of Interest = Level of Detail - Distance from Focus Level of Detail / Distance from Focus 0.0, 0.0 1.0, 1.0 Focal point 0.8, 0.1

18. 18From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech DoI Function  Can take on various forms  Continuous - Smooth interpolation away from focus  Filtering - Past a certain point, objects disappear  Step - Levels or regions dictating rendering 0<x<.3 all same,.3<x<.6 all same  Semantic changes - Objects change rendering at different levels

19. 19From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Applications Text/program viewing Furnas’ original example Shown here are examples from Gutwin and Greenberg Step function

20. 20From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Applications Shared text editor for CSCW Gutwin and Greenberg, ‘96

21. 21From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Applications Viewing nodes in networks Gutwin and Greenberg

22. 22From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Applications Fisheye menu Uses a focus-lock mode (move cursor to right) Demo: www.cs.umd.edu/hcil/fisheyemenu Bederson ‘00

23. 23From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Graphical Fisheye Views Sarkar and Brown ‘94  Apply fisheye techniques to 2D graph  Experiment with a variety of distortion factors  Interactive tool that allows user to browse display and change focus

24. 24From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Graphical Fisheye Views

25. 25From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Example Original

26. 26From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Example Focal point

27. 27From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 2D Fisheye deformation  Layout elements in space over rectangles  Between SPACE and PoV on space  Compute distance screen center -> 4 corners  Apply a distortion function to the distance  d’ = Fct(d)  Function d’ = (R*Z/(-Z-d))+R  R = Sphere radius, Z = Deformation factor O C2 d O d’ C’2

28. 28From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Coeff  Coeff = d’ / d  Min  max

29. 29From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Constraining Changes  Continuous zoom  Can change focal point smoothly in graph  Other nodes give up space  Bartram et al ‘95  Constrained fisheye  Make transitions in focus more aesthetically pleasing and easier to track  Storey et al ‘99 Simon Fraser Univ.

30. 30From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Alternative Methodology  We can think of focus and degree of interest as distorting or warping the space upon which data is presented  Such pliable surfaces can provide another form of focus+context display Video Carpendale, Cowperthwaite, Fracchia, ‘97 Carpendale and Montagnese, ‘01

31. 31From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Excellent Survey  Review and Taxonomy of Distortion- Oriented Presentation Techniques  Leung and Apperly, ‘94  Surveys systems  Presents unified theory

32. 32From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Bifocal Display  Interesting application of fisheye view  View office documents  Take items in periphery and fold back in 3-space  Project onto front viewing screen Spence & Apperley ‘82

33. 33From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Bifocal Display Fold Project

34. 34From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Bifocal Display Fold Project

35. 35From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Table Lens Video From Xerox PARC and Inxight A bifocal display

36. 36From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Perspective Wall  Computerized, automated 3D implementation of Bifocal display  Map work charts onto diagram, x-axis is time, y-axis is project Mackinlay, Robertson, Card ‘91

37. 37From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Other 3D Approaches Video Cone Trees 3D views of hierarchies such as file systems Robertson, Mackinlay, Card ‘91

38. 38From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Another Cone Tree Example

39. 39From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Small Displays (PDAs)  Focus+Context technique for web browsers  Flip-Zooming  Cards hold context Focus is in center Items before and after are in corners Björk et al, ‘99

40. 40From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Panacea?  Are there any disadvantages of focus+context or fisheye techniques?

41. 41From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Disadvantages  Distortion can be annoying  Can be very difficult to implement  Any change in focal point potentially requires recalculation of DoI for all objects and hence re-rendering of all objects -> Expensive!

42. 42From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech More to Come...  Will discuss fisheye and focus+context techniques more when we cover trees and distortion techniques

43. 43From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech References  Spence and CMS texts  Shneiderman, B. Designing the User Interface, 1998  All referred to papers  http://www.csi.uottawa.ca/ordal/papers/sander/main.html  http://www.cpsc.ucalgary.ca/grouplab/papers/1996/96-Fisheye.GI/gi96_fisheye.html  Pan & Wang and Green & Lafond-Favieres F ‘99 slides

44. 44From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Upcoming  Panning and Zooming  Hierarchies and trees