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