information visualization: presentation
TRANSCRIPT
![Page 1: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/1.jpg)
13/03/14 pag. 1
Information visualization lecture 4
presentation
Katrien Verbert Department of Computer Science
Faculty of Science Vrije Universiteit Brussel
![Page 2: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/2.jpg)
13/03/14 pag. 2
Support for report prepara+on. Many sources of content are visible and ready to hand
A problem
![Page 3: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/3.jpg)
13/03/14 pag. 3
The presentation issue
present (tr.v): to offer to view; display.
![Page 4: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/4.jpg)
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
![Page 5: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/5.jpg)
13/03/14 pag. 5
Space limitations
![Page 6: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/6.jpg)
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
![Page 7: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/7.jpg)
13/03/14 pag. 7
Overview + detail
![Page 8: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/8.jpg)
13/03/14 pag. 8
Source: Courtesy Colin Grimshaw
Overview + detail
![Page 9: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/9.jpg)
13/03/14 pag. 9
Overview + detail
hDp://www.datavis.ca/milestones/
![Page 10: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/10.jpg)
13/03/14 pag. 10 A journey north towards Halifax requires detail of the town (Huddersfield) through which the traveller passes
Overview + detail
![Page 11: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/11.jpg)
13/03/14 pag. 11
The use of a real or digitally simulated magnifying glass masks detail around the magnified region
Overview + detail
![Page 12: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/12.jpg)
13/03/14 pag. 12 The DragMag technique allows flexible posi+oning of the region to be magnified
Overview + detail
![Page 13: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/13.jpg)
13/03/14 pag. 13
Connection between the detail and overview presentations missing
Overview + detail
Issues?
![Page 14: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/14.jpg)
13/03/14 pag. 14
Focus + context
![Page 15: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/15.jpg)
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
![Page 16: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/16.jpg)
13/03/14 pag. 16
An early illustration of the bifocal display principle
![Page 17: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/17.jpg)
13/03/14 pag. 17
An early illustration of the bifocal display principle
![Page 18: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/18.jpg)
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
![Page 19: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/19.jpg)
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
![Page 20: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/20.jpg)
13/03/14 pag. 20
A sequence of amino acids within a protein Source: Courtesy of Tom Oldfield
Applications of distortion technique
![Page 21: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/21.jpg)
13/03/14 pag. 21
Table lens without distortion
![Page 22: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/22.jpg)
13/03/14 pag. 22
Table lens with distortion
![Page 23: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/23.jpg)
13/03/14 pag. 23
Table Lens: demo hD
p://www.youtube.com
/watch?v=qW
qTrRAC52U
![Page 24: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/24.jpg)
13/03/14 pag. 24
Schematic representation of X-distortion
![Page 25: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/25.jpg)
13/03/14 pag. 25
Schematic representation of combined X- and Y-distortion
![Page 26: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/26.jpg)
13/03/14 pag. 26
hDp://www.youtube.com/watch?v=D1ediZXIDkc
![Page 27: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/27.jpg)
13/03/14 pag. 27
Distorted presentation of the London Underground map
![Page 28: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/28.jpg)
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
![Page 29: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/29.jpg)
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
![Page 30: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/30.jpg)
13/03/14 pag. 30
Source: Courtesy David Baar, IDELIX SoFware Inc.
Distorted map on a PDA, showing the continuity of transportation links
![Page 31: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/31.jpg)
13/03/14 pag. 31 Source: Courtesy IDELIX and Mitsubishi
Distorted map on a table
![Page 32: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/32.jpg)
13/03/14 pag. 32
Equal X- and Y-distortion centred around a manually chosen location in the Macintosh OSX ‘dock’
![Page 33: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/33.jpg)
13/03/14 pag. 33
The Perspective Wall applies a 3D effect to the bifocal display
![Page 34: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/34.jpg)
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
![Page 35: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/35.jpg)
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
![Page 36: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/36.jpg)
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
![Page 37: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/37.jpg)
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
![Page 38: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/38.jpg)
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.
![Page 39: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/39.jpg)
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.
![Page 40: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/40.jpg)
13/03/14 pag. 40
G
P
President
S
M N
F
K
The organization tree of a company
![Page 41: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/41.jpg)
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
![Page 42: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/42.jpg)
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
![Page 43: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/43.jpg)
13/03/14 pag. 43
Example of a display that might be associated with the focus and context
![Page 44: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/44.jpg)
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
![Page 45: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/45.jpg)
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
![Page 46: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/46.jpg)
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)
![Page 47: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/47.jpg)
13/03/14 pag. 47
Part of an engineering drawing
Applications of DoI concept
![Page 48: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/48.jpg)
13/03/14 pag. 48
The engineering drawing simplified in the context of a suspected fault
Applications of DoI concept
![Page 49: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/49.jpg)
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
![Page 50: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/50.jpg)
13/03/14 pag. 50
hDp://www.youtube.com/watch?v=2bYDKbzocSg
![Page 51: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/51.jpg)
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
![Page 52: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/52.jpg)
13/03/14 pag. 52
A 3D Flexible and Tangible Magic Lens in Augmented Reality
www.youtube.com/watch?v=PKegByAZ0kM
![Page 53: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/53.jpg)
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
![Page 54: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/54.jpg)
13/03/14 pag. 54
The rubber-sheet distortion technique employed in the map
![Page 55: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/55.jpg)
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.”
![Page 56: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/56.jpg)
13/03/14 pag. 56
Fisheye view
• Farrand also coined the term “fisheye” • Nowadays appears to refer to both distortion and suppression
![Page 57: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/57.jpg)
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
![Page 58: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/58.jpg)
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
![Page 59: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/59.jpg)
13/03/14 pag. 59
hDp://w
ww.cs.um
d.edu/class/fall2002/cm
sc838s/+chi/fisheye.html
![Page 60: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/60.jpg)
13/03/14 pag. 60
hDp://www.youtube.com/watch?v=dEowKzbDpKU
![Page 61: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/61.jpg)
hDps://plus.google.com/+MiguelRodriguez/posts/YqBm18xQgQc
![Page 62: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/62.jpg)
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
![Page 63: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/63.jpg)
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
![Page 64: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/64.jpg)
13/03/14 pag. 64 Panning is the smooth movement of a viewing frame over a 2D image
Zoom and pan
![Page 65: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/65.jpg)
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
![Page 66: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/66.jpg)
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
![Page 67: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/67.jpg)
13/03/14 pag. 67
A space-scale diagram relevant to combined zooming and panning
Furnas and Bederson (1995)
![Page 68: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/68.jpg)
13/03/14 pag. 68
Google earth
![Page 69: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/69.jpg)
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
![Page 70: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/70.jpg)
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
![Page 71: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/71.jpg)
13/03/14 pag. 71
A combination of geometric and semantic zoom
![Page 72: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/72.jpg)
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
![Page 73: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/73.jpg)
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
![Page 74: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/74.jpg)
13/03/14 pag. 74
Tile mode: concurrent presentation of images opposed to ‘slide show mode’
![Page 75: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/75.jpg)
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
![Page 76: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/76.jpg)
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
![Page 77: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/77.jpg)
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
![Page 78: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/78.jpg)
13/03/14 pag. 78
Space-time trade-off
![Page 79: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/79.jpg)
13/03/14 pag. 79
Space-time trade-off
![Page 80: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/80.jpg)
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
![Page 81: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/81.jpg)
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
![Page 82: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/82.jpg)
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)
![Page 83: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/83.jpg)
13/03/14 pag. 83
Slide show
![Page 84: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/84.jpg)
13/03/14 pag. 84
Mixed
![Page 85: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/85.jpg)
13/03/14 pag. 85
Tile
![Page 86: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/86.jpg)
13/03/14 pag. 86
Diagonal
![Page 87: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/87.jpg)
13/03/14 pag. 87
Ring
![Page 88: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/88.jpg)
13/03/14 pag. 88
Stream
![Page 89: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/89.jpg)
13/03/14 pag. 89 Source: Courtesy of Katy Cooper
Favorite mode?
![Page 90: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/90.jpg)
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
![Page 91: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/91.jpg)
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)
![Page 92: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/92.jpg)
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
![Page 93: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/93.jpg)
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
![Page 94: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/94.jpg)
13/03/14 pag. 94
Eye-gaze trajectory slide show
![Page 95: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/95.jpg)
13/03/14 pag. 95
Eye-gaze trajectory tile mode
![Page 96: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/96.jpg)
13/03/14 pag. 96
Eye-gaze trajectories mixed mode
![Page 97: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/97.jpg)
13/03/14 pag. 97
Eye-gaze trajectories diagonal mode for subject who disliked the mode
![Page 98: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/98.jpg)
13/03/14 pag. 98
Eye-gaze trajectories diagonal mode for subject who liked the mode
![Page 99: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/99.jpg)
13/03/14 pag. 99
Eye-gaze trajectory stream for subject who disliked the mode
![Page 100: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/100.jpg)
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
![Page 101: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/101.jpg)
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
![Page 102: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/102.jpg)
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
![Page 103: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/103.jpg)
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
![Page 104: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/104.jpg)
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
![Page 105: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/105.jpg)
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
![Page 106: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/106.jpg)
13/03/14 pag. 106
Questions?
![Page 107: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/107.jpg)
13/03/14 pag. 107
Readings
• Chapter 4
![Page 108: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/108.jpg)
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
![Page 109: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/109.jpg)
13/03/14 pag. 109
Research presentations
![Page 110: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/110.jpg)
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.
![Page 111: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/111.jpg)
13/03/14 pag. 111
Team project
![Page 112: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/112.jpg)
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
![Page 113: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/113.jpg)
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 ;-)
![Page 114: Information visualization: presentation](https://reader034.vdocuments.site/reader034/viewer/2022052618/554fa0a0b4c905ad218b49f6/html5/thumbnails/114.jpg)
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 ;-)