Download presentation
Presentation is loading. Please wait.
Published byDinah Goodwin Modified over 9 years ago
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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.