13/03/14 pag. 1

Information visualization lecture 4

presentation

Katrien Verbert Department of Computer Science

Faculty of Science Vrije Universiteit Brussel

katrien.verbert@vub.ac.be

13/03/14 pag. 2

Support  for  report  prepara+on.  Many  sources  of  content  are  visible  and  ready  to  hand  

A problem

13/03/14 pag. 3

The presentation issue

present (tr.v): to offer to view; display.

13/03/14 pag. 4

overview

Space  limita+ons    

•  Scrolling  •  Overview  +  detail  •  Distor+on  •  Suppression  •  Zoom  and  pan  

       

Time  limita+ons    

•  Rapid  serial  visual  presenta+on  

•  Eye-­‐gaze                

13/03/14 pag. 5

Space limitations

13/03/14 pag. 6

7.1 A PROBLEM

Many of us have found ourselves with a report that has to be completed by a deadline, with the result (Figure 7.1) that the dining room table, extended to its 12-guest state, is covered by piles of paper as well as reports, books, clippings and slides; perhaps with more arranged on the floor and on a couple of chairs. There may even be piles on top of piles. Such a presentation of vital information makes a lot of sense: everything relevant is to hand (hopefully!) and, moreover, its very visibility acts as a reminder (Bolt, 1984, page 2) of what might be relevant at any particular juncture, possibly triggering a situated action (Suchman, 1987). In this environment I can concentrate on creative tasks rather than organisation.

Despite the availability of high-resolution displays and powerful workstations I still write most of my reports in this way. Why? Because the display area provided by the typical workstation is far too small to support, visibly, all the sources that are relevant to my composition.

7.2 THE PRESENTATION PROBLEM

I am not alone in the sense of having too much data to fit onto a small screen. A very large and expensive screen, for example, would be needed to display the London Underground map in sufficient detail(Figure 1.1), and it would be difficult or impossible to present, on a normal display, the complete organisation chart of IBM or ICI. Moreover, the recent emergence of small and mobile information and communication devices such as PDAs and wearable displays has additionally identified a pressing need for a solution to the ‘ too much data, too little display area’ problem: the presentation problem. How can it be solved, mindful of the need to support the activity of visualising the underlying data?

7.2.1 Scrolling

An obvious solution is to scroll the data into and out of the visible area. In other words, to provide a means whereby a long document can be moved past a window until it reaches the required ‘page’ (Figure 7.2). This mechanism is widely used, but carries with it many penalties. One relates to the "Where am I?" problem: I’m working on Chapter 2, (it may be section 2.3, I don’t know) and I want to remind myself of a figure that is in chapter 5, it may be in section 5.3 – or was it 5.6? All I can do is operate the scrolling mechanism and look out for the figure I need, albeit assisted by various cues such as the page number indicated in the scrolling mechanism. With a scrolling mechanism, most of a document is hidden from view. I have the same problem when using a microfilm reader, with the additional complication that if I move the tray to the left, the image moves to the right. A similar difficulty applies to my use of the famous London ‘AtoZ’ street directory. I’m driving along a road that goes off the edge of the page, so I desperately need whatever page contains the continuation of that road (and quickly!). Even if I get it, I will typically have trouble locating the same road on the new page. These and other similar problems can be ameliorated by the provision of context. Much of this chapter, in fact, is concerned with deciding how to provide context.

Scrolling

13/03/14 pag. 7

Overview + detail

13/03/14 pag. 8

Source:  Courtesy  Colin  Grimshaw  

Overview + detail

13/03/14 pag. 9

Overview + detail

hDp://www.datavis.ca/milestones/    

13/03/14 pag. 10 A  journey  north  towards  Halifax  requires  detail  of  the  town  (Huddersfield)  through  which  the  traveller  passes  

Overview + detail

13/03/14 pag. 11

The  use  of  a  real  or  digitally  simulated  magnifying  glass  masks  detail  around  the  magnified  region    

Overview + detail

13/03/14 pag. 12 The  DragMag  technique  allows  flexible  posi+oning  of  the  region  to  be  magnified    

Overview + detail

13/03/14 pag. 13

Connection between the detail and overview presentations missing

 

Overview + detail

Issues?  

13/03/14 pag. 14

Focus + context

13/03/14 pag. 15

Metaphor  illustra+ng  the  principle  of  the  Bifocal  Display  

(a) An information space containing documents, emails, etc.

(b) The same space wrapped around two uprights.

(c) Appearance of the information space when viewed from an appropriate direction

direction of view

Distortion

13/03/14 pag. 16

An early illustration of the bifocal display principle

13/03/14 pag. 17

An early illustration of the bifocal display principle

13/03/14 pag. 18

Bifocal display features

1.  Distortion: available display area is allocated to two different regions –  Focus  (undistorted)  –  Context  (distorted)  

2.  Information moves smoothly and continuously from context to focus 3.  Display affords for representation

–  opportunity  to  use  two  dimensions  –  for  instance,  +me  assigned  to  horizontal  axis  –  type  of  item  to  Y-­‐axis  

4.  Main purpose –  Focus:  provide  detail  –  Context:  awareness  and  iden6fica6on    

5.  Manual control

13/03/14 pag. 19

What is the Bifocal Display Doing?

Transforming the information space to the display space

7.19  

Informa+on  space  

Display  Space   Normal

display

Informa+on  space  

Display  Space  

Bifocal  display  

context  

focus  

Slide  source:  Ken  Brodlie  

13/03/14 pag. 20

A  sequence  of  amino  acids  within  a  protein  Source:  Courtesy  of  Tom  Oldfield  

Applications of distortion technique

13/03/14 pag. 21

Table lens without distortion

13/03/14 pag. 22

Table lens with distortion

13/03/14 pag. 23

Table Lens: demo hD

p://www.youtube.com

/watch?v=qW

qTrRAC52U  

 

13/03/14 pag. 24

Schematic representation of X-distortion

13/03/14 pag. 25

Schematic representation of combined X- and Y-distortion

13/03/14 pag. 26

hDp://www.youtube.com/watch?v=D1ediZXIDkc    

13/03/14 pag. 27

Distorted presentation of the London Underground map

13/03/14 pag. 28

11Sun

12 Mon

13 Tue

14 Wed

15 Thur

16 Fri

17Sat

Fly LAKathy to airport Model Maker

Check slides, notes.Family barbeque

Fly LHR Kathy to collectChapter 2/ see Dave March

JulyJuneMayAprilMar Aug Sept Oct

Flight to SFOTutorial set-upTutorialUnited flight Heathrow

PointerColor OHsJane+John

Call Kathy

Combined X- and Y-distortion provides a convenient calendar interface

13/03/14 pag. 29

Visual  designer’s  sketch  of  the  applica+on  of  the  flip-­‐zoom  technique  to  the  presenta+on  of  photographs  on  a  Nokia  mobile  phone  Source:  Courtesy  Ron  Bird  

13/03/14 pag. 30

Source:  Courtesy  David  Baar,  IDELIX  SoFware  Inc.  

Distorted map on a PDA, showing the continuity of transportation links

13/03/14 pag. 31 Source:  Courtesy  IDELIX  and  Mitsubishi  

Distorted map on a table

13/03/14 pag. 32

Equal X- and Y-distortion centred around a manually chosen location in the Macintosh OSX ‘dock’

13/03/14 pag. 33

The Perspective Wall applies a 3D effect to the bifocal display

13/03/14 pag. 34

Advantages Perspective Wall

•  User can adjust ratio of detail to context •  Smooth animation helps user perceive object constancy •  Relationship between detail and context is consistent: objects

bend around the corner

Slide  source:  Ken  Brodlie  

13/03/14 pag. 35

Perspective Wall

Perspective gives smoother transition from focus to context

Informa+on  space  

Display  Space  

Perspective Wall

context

focus

Slide  source:  Ken  Brodlie  

13/03/14 pag. 36

overview

Space  limita+ons    

•  Scrolling  •  Overview  +  detail  •  Distor+on  •  Suppression  •  Zoom  and  pan  

       

Time  limita+ons    

•  Rapid  serial  visual  presenta+on  

•  Eye-­‐gaze                

13/03/14 pag. 37

Suppression

•  Applies a distance function and relevance function

•  Less relevant other items are dropped from the display

•  Classic example: New Yorker’s idea of the world

13/03/14 pag. 38

Suppression

•  Originally proposed by Furnas (1986), but many variations of applications.

•  Basic idea: more relevant information presented in great detail; the less relevant information presented as an abstraction.

•  Relevance is computed on basis of the importance of information elements and their distance to the focus.

13/03/14 pag. 39

Degree of interest (DOI) function:

DOI(a|.=b)  =  API(a)  –  D(A,b)  •  DOI(a|.=b):  DOI  of  a,  given  the  current  focus  is  b.  •  API(a):  sta+c  global  a  priori  importance  measure.  •  D(a,b):  distance  between  a  and  b.  

13/03/14 pag. 40

G

P

President

S

M N

F

K

The organization tree of a company

13/03/14 pag. 41

1

2

3 3

4 422

1 11

22

P Focus

Showing the ‘distance’ of each node from the focus of attention

13/03/14 pag. 42

Focus

Context

P

S

M NK

The context defined by setting an upper threshold of unity for distance from a focus

13/03/14 pag. 43

Example of a display that might be associated with the focus and context

13/03/14 pag. 44

Each  node  in  the  organiza+on  tree  has  been  assigned  an  a  priori  importance  (API)        

10

9 9

8

7 77

8 8

6

8 8

6

9

API

13/03/14 pag. 45

Degree of Interest (DoI)

DoI = API – D Expressed as a function of two quantities: •  A priori importance (API) •  Distance (D) between an item and the item currently in focus

13/03/14 pag. 46

Segng  a  lower  limit  of  6  for  DoI  iden+fies  the  nodes  within  the  shaded  region  

8

6 6

8

6 66

4 4

4

6 6

4

8

Focus

Context

Nodal values of degree of interest (=API – D)

13/03/14 pag. 47

Part  of  an  engineering  drawing  

Applications of DoI concept

13/03/14 pag. 48

The  engineering  drawing  simplified  in  the  context  of  a  suspected  fault  

Applications of DoI concept

13/03/14 pag. 49

Illustra+ng  the  concept  of  a  magic  lens.  (a)  shows  a  conven+onal  map  of  an  area,  (b)  shows  the  loca+on  of  services  (gas,  water  and  electricity  pipes)  in  the  same  area,  and  (c)  a  (movable)  magic  lens  shows  services  in  an  area  of  interest,  in  context    

Application in magic lens technique

13/03/14 pag. 50

hDp://www.youtube.com/watch?v=2bYDKbzocSg    

13/03/14 pag. 51

A  molecular  surface  of  the  protein  transferase  coloured  by  electrosta+c  poten+al  bound  to  DNA  shown  as  a  schema+c.  (ID  =  10mh).  The  magic  lens  window  allows  a  view  of  the  atomic  structure  bonding  to  be  shown,  with  the  bound  ligand  structure  highlighted  as  cylinders,  thereby  providing  a  view  inside  the  protein  Source:  By  kind  permission  of  Tom  Oldfield  and  Michael  Hartshorn  

Magic lens

13/03/14 pag. 52

A 3D Flexible and Tangible Magic Lens in Augmented Reality

www.youtube.com/watch?v=PKegByAZ0kM    

13/03/14 pag. 53

   

A  combina+on  of  rubber-­‐sheet  distor+on  and  suppression  lead  to  a  map  appropriate  to  a  journey  from  one  city  to  another  

   

Combined distortion and suppression

13/03/14 pag. 54

The rubber-sheet distortion technique employed in the map

13/03/14 pag. 55

Historical note

•  Distortion and suppression appeared in early 1980s •  Need to maintain a balanced view of focus + context

identified earlier – for example by Farrand (1973)

“an effective transformation must somehow maintain global awareness while providing detail”

“… there is a need for presenting a display with 1. sufficient

detail for interaction, while 2. maintaining global vision of the entire scene.”

13/03/14 pag. 56

Fisheye view

•  Farrand also coined the term “fisheye” •  Nowadays appears to refer to both distortion and suppression

13/03/14 pag. 57

Fisheye Menus

•  Here is the same idea applied to menus –  Ben  Bederson,  University  of  Maryland  

•  See also: –  hDp://www.cs.umd.edu/hcil/fisheyemenu/fisheyemenu-­‐demo.shtml  

ENV  2006  

13/03/14 pag. 58

Fisheye View, Polyfocal Display

Can  distort  boundaries  because  applied  radially  rather  than  x  y  

1D  Fisheye  2D  Polyfocal  

Slide  source:  Hornung  and  Zagreus    

13/03/14 pag. 59

hDp://w

ww.cs.um

d.edu/class/fall2002/cm

sc838s/+chi/fisheye.html  

 

13/03/14 pag. 60

hDp://www.youtube.com/watch?v=dEowKzbDpKU  

hDps://plus.google.com/+MiguelRodriguez/posts/YqBm18xQgQc    

13/03/14 pag. 62 Source:  By  kind  permission  of  Patrick  Baudisch  

The use of representation (by a ‘halo’) to provide context for a small display

13/03/14 pag. 63

overview

Space  limita+ons    

•  Scrolling  •  Overview  +  detail  •  Distor+on  •  Suppression  •  Zoom  and  pan  

       

Time  limita+ons    

•  Rapid  serial  visual  presenta+on  

•  Eye-­‐gaze                

13/03/14 pag. 64 Panning  is  the  smooth  movement  of  a  viewing  frame  over  a  2D  image    

Zoom and pan

13/03/14 pag. 65  Zooming  is  the  increasing  magnifica+on  of  a  decreasing  frac+on  of  an  image  (or  vice  versa)  

   

Zoom and pan

13/03/14 pag. 66

Zooming

•  Conventional zooming-in –  No  change  in  data  or  representa+on  –  only  filtering  –  Loss  of  context    

•  ≠distortion whose purpose is to permit focusing rather than filtering

•  Supports two cognitive tasks (Cairns and Craft 2005) –  Zooming-­‐in:  extraneous  informa+on  is  removed  from  visual  field  –  more  

manageable  view  –  Zooming-­‐out:  reveals  hidden  informa+on  

13/03/14 pag. 67

A space-scale diagram relevant to combined zooming and panning

Furnas  and  Bederson  (1995)  

13/03/14 pag. 68

Google earth

13/03/14 pag. 69

Exploring Information Spaces by Using Tangible Magic Lenses

hDp://w

ww.youtube.com

/watch?v=h-­‐m

F4_OAhU

0    

13/03/14 pag. 70

Semantic zoom

•  Previous example: geometric zoom –  Con+nuous  –  Zooming-­‐in:  filtering  and  loss  of  context  

•  Semantic zoom –  Discrete  transi+on  –  Addi+onal  detail  

13/03/14 pag. 71

A combination of geometric and semantic zoom

13/03/14 pag. 72

overview

Space  limita+ons    

•  Scrolling  •  Overview  +  detail  •  Distor+on  •  Suppression  •  Zoom  and  pan  

       

Time  limita+ons    

•  Rapid  serial  visual  presenta+on  

•  Eye-­‐gaze                

13/03/14 pag. 73

A  collec+on  of  images  is  presented,  one  at  a  +me,  at  a  rapid  rate  (e.g.,  ten  per  second)        

time

Rapid serial visual presentation

13/03/14 pag. 74

Tile mode: concurrent presentation of images opposed to ‘slide show mode’

13/03/14 pag. 75

‘Floa+ng  RSVP’  in  which  images  appear  to  approach  the  viewer  from  a  distance.  Sensi+ve  arrows  allow  the  speed  and  direc+on  of  ‘movement’  to  be  controlled  by  a  user  Source:  Courtesy  Kent  WiNenburg  

Floating RSVP

13/03/14 pag. 76

The  contents  of  an  online  bookstore  are  presented  in  ‘collage  mode’  RSVP,  simula+ng  the  placing  of  book  covers  on  a  table  in  sequence.  The  set  of  arrows  just  under  the  presenta+on  allows  control  of  the  speed  and  direc+on  of  presenta+on  Source:  Courtesy  Kent  WiNenburg  

Collage mode RSVP

13/03/14 pag. 77

An  interface  facilita+ng  the  browsing  of  posters  adver+sing  videos.    Cursor  movement  along  the  stacks  causes  posters  to  briefly  ‘pop  out’  sideways,  and  the  whole  bifocal  structure  can  be  scrolled  to  bring  a  video  of  interest  to  the  central  region,  where  a  mouse  click  will  cause  a  clip  from  a  video  to  be  played  (Lam  and  Pence  1997)  

RSVP + bifocal principle

13/03/14 pag. 78

Space-time trade-off

13/03/14 pag. 79

Space-time trade-off

13/03/14 pag. 80

 An  experiment  to  test  a  subject’s  ability  to  recognise  the  presence  or  absence  of  a  previously  viewed  target  image  within  a  collec+on  presented  sequen+ally  at  a  rate  of  around  ten  per  sec.    

Prior instruction to subject

Subjectsʼ performance

“Here is a target image. Tell me if this image appears in the sequence of N images youʼre about to see”

Recognition about 80% to 90% successful

time

about 100 ms

unrelated images

Presentation of images

Briefly glimpsed images

13/03/14 pag. 81

Representa+on  of  limits  on  display  area  and  total  presenta+on  +me  by  a  ‘resource  box’    

Display area

Presentationtime

Space and time resources

13/03/14 pag. 82 Source:  Courtesy  of  Katy  Cooper  

Three ‘static’ image presentation modes (A, B, C) and three ‘moving’ image presentation modes (D, E, F)

13/03/14 pag. 83

Slide show

13/03/14 pag. 84

Mixed

13/03/14 pag. 85

Tile

13/03/14 pag. 86

Diagonal

13/03/14 pag. 87

Ring

13/03/14 pag. 88

Stream

13/03/14 pag. 89 Source:  Courtesy  of  Katy  Cooper  

Favorite mode?

13/03/14 pag. 90

The  accuracy  with  which  the  presence  or  absence  of  a  target  image  was  reported  for  the  six  presenta+on  modes,  averaged  over  all  tasks  and  presenta+on  +mes.        

1.00.90.80.7

0.60.50.40.3

0.20.1

Slide-show Mixed Tile Diagonal Ring Stream

Recognition accuracy

Presentation modes

13/03/14 pag. 91 The  (sta+c)  slide-­‐show,  mixed  and  +le  image  presenta+on  modes  account  for  three-­‐quarters  of  the  preferred  modes  (Cooper  et  al.  2006)  

13/03/14 pag. 92

Almost  all  the  least  preferred  image  presenta+on  modes  were  moving  modes  and  the  stream  mode  accounted  for  over  half    

13/03/14 pag. 93

 A  simple  representa+on  of  eye-­‐gaze  behaviour.  The  rapid  saccades  are  shown  green,  the  fixa+ons  (F)  of  varying  dura+on  by  circles  of  propor+onate  size    

F

F

F

F

FF F

F

Eye-gaze

13/03/14 pag. 94

Eye-gaze trajectory slide show

13/03/14 pag. 95

Eye-gaze trajectory tile mode

13/03/14 pag. 96

Eye-gaze trajectories mixed mode

13/03/14 pag. 97

Eye-gaze trajectories diagonal mode for subject who disliked the mode

13/03/14 pag. 98

Eye-gaze trajectories diagonal mode for subject who liked the mode

13/03/14 pag. 99

Eye-gaze trajectory stream for subject who disliked the mode

13/03/14 pag. 100

The  acquisi+on  of  an  expanding  target.  (a)  The  dormant  appearance  of  the  image  collec+on,  and  (b)  its  appearance  when  the  cursor  rests  over  image  6      

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

10 11 12 13 14 15 16 17 18 19 209861 2 3 4

(a)

(b)

Manual control: ‘expanding target’ presentation mode

13/03/14 pag. 101

An  experiment  in  which  a  subject  first  views  the  rapid  (e.g.,  10  per  second)  presenta+on  of  a  collec+on  of  images,  is  then  shown  a  single  image  and  asked  to  say  whether  that  image  was  part  of  the  collec+on.  Iden+fica+on  success  is  highly  dependent  upon  the  +me  elapsing  between  the  end  of  the  presenta+on  and  the  ques+oning  of  the  subject  

Prior instruction

to subjectPresentation of image collection Subject’s performance

about 100ms

unrelated images

time

None

The subject was shown an image and then

asked, ‘Was this image present in the

sequence you have just seen?’

Recognition success was 10% to 20%

unless the question was aksed within about

4 seconds of the end of the presentation

Models of human visual performance

13/03/14 pag. 102

An  experiment  in  which  a  collec+on  of  images  is  presented  to  a  subject.  Each  image  is  presented  briefly  (e.g.,  for  100ms)  and  followed  by  a  ‘visual  mask’  las+ng  about  300ms.  Subjects  were  able  to  say,  with  a  considerable  degree  of  success,  whether  an  image  shown  arerwards  had  been  part  of  the  presenta+on  

Prior  instruc+on    to  subject  

Presenta+on  of  image  collec+on   Subject’s  performance  

about  300ms  

unrelated  images   +me  

None  

The  subject  was  shown  an  image  and  then    asked,  ‘Was  this  image  present  in  the    sequence  you  have  just  seen?’  

Up  to  92%  recogni+on  success  etc  .  .  .  .  

Visual  mask    .    

Visual  mask      

Visual  mask  

about  100ms  

Models of human visual performance

13/03/14 pag. 103

A  third  palleDe  for  the  interac+on  designer,  addressing  issues  of  presenta+on  

Presentation  concepts and  techniques   Scrolling  

Overview+detail  

Distortion  

Suppression  

Zoom  Pan  

RSVP  Eye gaze  

Recap

13/03/14 pag. 104

Visual Information Seeking: Mantra

Overview, zoom & filter, details-on-demand Overview, zoom & filter, details-on-demand Overview, zoom & filter, details-on-demand Overview, zoom & filter, details-on-demand Overview, zoom & filter, details-on-demand Overview, zoom & filter, details-on-demand Overview, zoom & filter, details-on-demand Overview, zoom & filter, details-on-demand Overview, zoom & filter, details-on-demand Overview, zoom & filter, details-on-demand

Ben  Shneiderman,  1996  

13/03/14 pag. 105

Shneiderman’s “7 Tasks”

•  Overview task –  overview of entire collection

•  Zoom task –  zoom in on items of interest

•  Filter task –  filter out uninteresting items

•  Details-on-demand task –  select an item or group to get details

•  Relate  task  –  relate  items  or  groups  within  the  

collec+on  

•  History  task    –  keep  a  history  of  ac+ons  to  support  

undo,  replay,  and  progressive  refinement  

•  Extract  task  –  allow  extrac+on  of  sub-­‐collec+ons  and  

of  the  query  parameters  

13/03/14 pag. 106

Questions?

13/03/14 pag. 107

Readings

•  Chapter 4

13/03/14 pag. 108

References

•  Furnas, G. W., & Bederson, B. B. (1995, May). Space-scale diagrams: Understanding multiscale interfaces. In Proceedings of the SIGCHI conference on Human factors in computing systems (pp. 234-241). ACM Press/Addison-Wesley Publishing Co..

•  Shneiderman, B. (1996, September). The eyes have it: A task by data type taxonomy for information visualizations. In Visual Languages, 1996. Proceedings., IEEE Symposium on (pp. 336-343). IEEE.

•  Some relevant notes:http://jcsites.juniata.edu/faculty/rhodes/ida/presentation.html

13/03/14 pag. 109

Research presentations

13/03/14 pag. 110

Research presentations

•  Schedule on PointCarré

•  Select a second paper in the same slot for questions: e.g. session 1: http://doodle.com/rmpc9g8u3p2qzsy4

•  Links to doodle polls for all six sessions will be included in the schedule.

13/03/14 pag. 111

Team project

13/03/14 pag. 112

Team project milestones

1.  Form teams 2.  Project proposal 3.  Intermediate presentation 4.  Final presentation 5.  Short report

due  27  Feb.  

due  13  March  

due  3  April  

22  May  

due  29  May  

13/03/14 pag. 113

Project proposal

1 page description of your intended project: –  mo+va+on  –  which  datasets  you  will  use  –  current  status.  If  available,  first  designs.  –  problems/ques+ons  

due 13 March If you want earlier feedback, send us your proposal earlier ;-)

13/03/14 pag. 114

Data collection

•  https://docs.google.com/forms/d/1gHwVWHZLzWdSz1F37jA1Gungrl56bT215M6FYW3YqGY/viewform Or

•  bit.ly/N6JTyD

Anonymous! Choose your own ID.

•  Please report your data ;-)