Presentation is loading. Please wait.

Presentation is loading. Please wait.

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.

Similar presentations


Presentation on theme: "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."— Presentation transcript:

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


Download ppt "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."

Similar presentations


Ads by Google