Post on 18-Jan-2018
description
Inspired from CS 7450 - Information VisualizationJan. 10, 2002
John Stasko
Frédéric VernierEnseignant-Chercheur LIMSI-CNRS
Maître de conf Paris XI
Cours de Visualisation d'InformationInfoVis Lecture
Focus + Context
2From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Fundamental ProblemScale - Many data sets are too large
to visualize on one screenMay simply be too many casesMay be too many variablesMay only be able to highlight particular
cases or particular variables, but viewer’s focus may change from time to time
3From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
ChallengeHave 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
4From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Focus + Context ViewsSame idea as overview and detail,
with one key difference:Typically, the overview and the detail
are combined into a single displayMimics our natural vision systems more
closely
5From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Possible MethodsFilteringSelective aggregationMicro-macro readingsHighlightingDistortion
6From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Prototypical ExampleWhen 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
7From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
DefinitionFisheye 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)
8From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Example
(Not reallya good one.Can you seewhy?---just a Photoshoptrick---)
9From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Everyday Life Example
10From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Kinda Fisheye - Natural 3D Perspective
11From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Why is it called Fisheye?
Fisheye Camera Lens
12From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Atlanta Journal
Real fisheyecamera lens
13From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Fisheye TerminologyFocal pointLevel of detailDistance from focusDegree of interest function
14From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Focal PointAssume that viewers focus is on
some item, some coordinate, some position,...
0.0, 0.0
1.0, 1.0
Focal point0.8, 0.1
15From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Level of DetailSome intrinsic value or quantity on
each data elementHow important is it to you in a
general sense?
Simplest example is that all data items have same level of detail
16From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Distance from FocusCalculation of how far each data item
is from the focal point
0.0, 0.0
1.0, 1.0
Focal point0.8, 0.1
Query position
17From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Degree of Interest FunctionFunction 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 point0.8, 0.1
18From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
DoI FunctionCan 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
19From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
ApplicationsText/programviewing
Furnas’ originalexample
Shown here are examples fromGutwin and Greenberg
Step function
20From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Applications
Shared text editorfor CSCW
Gutwin and Greenberg, ‘96
21From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Applications
Viewing nodes innetworks
Gutwin and Greenberg
22From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
ApplicationsFisheye menu
Uses a focus-lock mode(move cursor to right)
Demo:www.cs.umd.edu/hcil/fisheyemenu
Bederson ‘00
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
24From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Graphical Fisheye Views
25From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Example
Original
26From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Example
Focal point
27From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
2D Fisheye deformationLayout elements in space over
rectanglesBetween SPACE and PoV on space
Compute distance screen center -> 4 corners
Apply a distortion function to the distanced’ = Fct(d)
Function d’ = (R*Z/(-Z-d))+RR = Sphere radius, Z = Deformation factor
O
C2d
O
C2
d’ C’2
28From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
CoeffCoeff = d’ / dMin max
29From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Constraining ChangesContinuous zoom
Can change focal point smoothly in graph
Other nodes give up spaceBartram et al ‘95
Constrained fisheyeMake transitions in focus more
aesthetically pleasing and easier to track
Storey et al ‘99Simon Fraser Univ.
30From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Alternative MethodologyWe 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
VideoCarpendale, Cowperthwaite, Fracchia, ‘97
Carpendale and Montagnese, ‘01
31From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Excellent SurveyReview and Taxonomy of Distortion-
Oriented Presentation TechniquesLeung and Apperly, ‘94Surveys systemsPresents unified theory
32From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Bifocal DisplayInteresting application of fisheye
viewView office documentsTake items in periphery and fold
back in 3-spaceProject onto front viewing screen
Spence & Apperley ‘82
33From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Bifocal Display
Fold
Project
34From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Bifocal Display
Fold
Project
35From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Table Lens
Video
From Xerox PARCand Inxight
A bifocal display
36From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Perspective WallComputerized, automated 3D
implementation of Bifocal displayMap work charts onto diagram, x-
axis is time, y-axis is project
Mackinlay, Robertson, Card ‘91
37From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Other 3D Approaches
Video
Cone Trees
3D views ofhierarchiessuch as filesystems
Robertson, Mackinlay, Card ‘91
38From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Another Cone Tree Example
39From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Small Displays (PDAs)Focus+Context technique for web
browsersFlip-ZoomingCards hold context
Focus is in centerItems before andafter are in corners
Björk et al, ‘99
40From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
Panacea?Are there any disadvantages of
focus+context or fisheye techniques?
41From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
DisadvantagesDistortion can be annoyingCan be very difficult to implementAny change in focal point potentially
requires recalculation of DoI for all objects and hence re-rendering of all objects -> Expensive!
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
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
44From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia
Tech
UpcomingPanning and ZoomingHierarchies and trees