Presentation InfoVis, Universidade de Aveiro Beatriz Sousa Santos - - PowerPoint PPT Presentation

presentation
SMART_READER_LITE
LIVE PREVIEW

Presentation InfoVis, Universidade de Aveiro Beatriz Sousa Santos - - PowerPoint PPT Presentation

Presentation InfoVis, Universidade de Aveiro Beatriz Sousa Santos The presentation issue The issue of layout is important due to the limited screen real estate Irrespective of how data may be represented decisions have to be made:


slide-1
SLIDE 1

Presentation

InfoVis, Universidade de Aveiro Beatriz Sousa Santos

slide-2
SLIDE 2

The presentation issue

  • The issue of layout is important due to the limited screen real estate
  • Irrespective of how data may be represented decisions have to be made:

– how the representation is to be displayed – whether it is to be displayed

  • Links to representation and

interaction are important (Spence, 2014)

slide-3
SLIDE 3

Space limitations

– Scrolling – Overview + detail – Distortion – Suppression suppression + distortion – Zoom and pan

slide-4
SLIDE 4
  • Scrolling is an obvious solution when a document is

larger than the display area

  • A long document can be moved past a “window”
  • Often it is not a satisfactory solution
  • Scrolling hides most of a document:

there is not a view of context as well as detail

  • 7. 1 A PROBL EM

Many of us hav e fou nd ou rselves wi th a rep ort that has to be co mpleted by a dead line, with th e result (Fi gur e 7.1 ) th at th e din in g ro om table, e x tend ed t o it s 12 - gu est state, i s covered by p iles of paper as well a s r epor ts, b ook s, clip pi ngs a n d slid es; perh aps wit h mo re arran ged on th e flo or a n d o n a c

  • up le o f chair s.

Th ere may e v en b e pi les on top o f pi les. Su ch a p resentati on of vital inf ormati on makes a l ot o f sense: e v eryt hin g r e l e v ant is t o h a n d (ho pefu lly !) and , mo reov er, its very visib ili ty acts as a r e mi nd e r (Bo lt, 19 84 , p age 2) of what migh t b e relevan t at an y p articul ar ju nctu re, p ossibl y tri gg e r ing a situ ated actio n (Su c h man, 19 87 ). In this e n vir on me n t I ca n con ce n trate o n c r e ati ve task s rather than

  • r gani sat ion .

Despit e the av ailabil ity of hig h-r eso lut ion di splays a n d p owerf ul work statio ns I stil l writ e most of my rep ort s in t his way . Wh y? Because th e di sp lay a r e a p ro vid ed by th e ty pical wo rkst a t ion is far too small to sup po rt, v isib ly, all th e sou rces that a r e relev a n t t o my comp ositi on .

  • 7. 2 THE PRE SENTATION

PR OBLEM I am not alon e in the sen se of h avin g t oo mu c h dat a to f it o nto a small screen . A ver y larg e and exp e n sive screen, fo r examp le, wo uld be n eeded to d ispl a y th e Lo nd on Und ergr oun d ma p in suf ficient detail (Fig ur e 1.1 ), an d i t wou ld be diff icult or impo ssible t o p resent, on a no rmal d ispl a y , t he comp lete

  • r gani sat ion chart of IBM or ICI.

Moreo ver, the r e cent emergen c e o f small and mob ile i nfo rmatio n an d commu ni c ati on devi ce s su ch as P DAs and wearable d ispl a y s has ad diti on a l ly id entif ied a p ressing need for a solu tio n to th e ‘ to o mu ch d ata, to o littl e disp lay area’ p rob lem: t he presenta tio n pro blem . H ow can it b e solv ed, mi nd ful

  • f th e

need t o su ppo rt the activ ity of vi sualisin g t he u nder lyin g data?

  • 7. 2.1 Scro llin g

An ob vio us so luti on is to scroll th e data in to a n d out of the v isib le area. I n o ther wo rds, t o p rov id e a mea n s whereb y a lo ng do cument ca n b e mov e d past a win do w un til it r e ach e s t he req uir e d ‘p age’ (F ig ure 7 .2) . T his mechan ism is wid ely u sed, b ut ca r ries wit h it many pen alties. One relates t o th e "Wh e r e a m I?" p rob lem: I’ m wor kin g o n Chapt e r 2, (it may b e sec t ion 2. 3, I do n’ t kn ow) and I wan t to remin d myself o f a f igu re th at is in chap ter 5 , it may b e in se cti on 5.3 – or wa s it 5 .6? All I ca n d o is o perate the scrol ling mechan ism and lo ok ou t fo r th e fig ure I need, albeit assi st e d b y var iou s cues such a s the p age nu mber in dicated in the scro llin g m e ch a n ism. Wi th a scro llin g me ch anism, most o f a do cumen t is hi dd e n fr om v iew. I h a v e th e sa me pro blem wh en u sing a micro film reader, with the ad dit ion al comp licatio n t hat i f I move the tr ay to th e left , th e image mo ves to th e rig ht. A simil a r di fficul ty a p pl ies to my u se

  • f t he

famo us Lond on ‘Ato Z’ street d irector y. I’m dri vin g alo ng a ro ad th at g oes of f th e edge of t he p a g e, so I d e sp e r ately need whatev e r pag e cont a i ns th e con tin uatio n o f t hat r oad ( and qu ickly !). Ev en i f I get it , I will typ ically have tro ub le lo ca t ing th e sa me r oad on the new page. Th ese an d o ther similar pr ob lems ca n b e a mel iorated by th e pr ov ision of con text. Mu c h o f th is chap ter, i n fact, is con ce r ned with decid ing h ow t o p ro vide co ntext .

slide-5
SLIDE 5
  • Two separate views of detail and of context can be combined in a
  • verview + detail view

“You are here”

slide-6
SLIDE 6

Detail plus Overview. Miniatures of pages of a pdf document provide useful context while attention is paid to detail of one page (Spence, 2007) Another example

slide-7
SLIDE 7

DragMag used with satelite imagery

http://www.ibiblio.org/openvideo/video/chi/chi95_03_m1.mpg

  • In DragMag (Ware and Lewis, 1995)

a small region of interest a context map can be flexibly positioned to provide a magnified view

  • The use of a magnifying glass masks detail around the magnified region:

the focus + context problem

slide-8
SLIDE 8
  • Distortion offers a way of solving

the focus + context problem

  • The bifocal display (Spence and

Apperley, 1982) is based on a simple metaphor

  • Part of an information space can be

viewed in detail; a bird’s eye view is provided of the remainder

(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

  • f view

http://www.youtube.com/watch?v=DaF5brrdpJw http://www.youtube.com/watch?v=gNTQaH8MM98&NR=1

slide-9
SLIDE 9

An early illustration of the Bifocal display principle

(Spence, 2007) http://www.youtube.com/watch?v=RN3Z4XojDP4

slide-10
SLIDE 10

A sequence of amino acids within a protein:

  • each letter refers to an amino acid
  • color denotes an attribute

The one dimensional long sequences encode three dimensional information The user needs to be aware of the complete sequence when comparing it with other representations of the protein

Application example:

(Spence, 2007) Distortion generated without discontinuities

slide-11
SLIDE 11

The Table Lens

(Rao and Card, 1995)

  • without distortion;
  • with distortion (expansion)

to show names

http://www.youtube.com/watch?v=qWqTrRAC52U

slide-12
SLIDE 12
  • This simple but powerful concept can

be generalized

  • It is possible to use X and Y distortion

11Sun 12 Mon 13 Tue 14 Wed 15 Thur 16 Fri 17Sat

Fly LA Kath y to airp

  • rt Mod

el Make r Ch eck slid es, n

  • te

s. Fam il y b arbe que Fly LHR Ka thy to collect Ch ap ter 2 / see Da ve March

July

Jun e May Apri l Mar Aug Sep t Oct Fli gh t to SF O Tuto rial se t-up Tuto rial Un ite d flight He athrow Poin ter Co lor OHs Jan e+Joh n Ca ll Ka th y

Calendar interface using X and Y distortion (Bederson et al., 2003, 2004)

X-distortion X and Y -distortion

slide-13
SLIDE 13

Examples of continuity across the boundary of the distorted region (Spence, 2007)

http://www.youtube.com/watch?v=FDYo9uvrNJ0&NR=1

slide-14
SLIDE 14

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

(Spence, 2007) http://www.youtube.com/watch?v=m0LNHtRbaCA&NR=1 (Spence, 2007)

slide-15
SLIDE 15

The Perspective Wall applies a 3D effect to the Bifocal Display

(Mackinlay et al.,1991)

http://www.youtube.com/watch?v=hYUZbrWtCZg

slide-16
SLIDE 16
  • Furnas proposed a Degree of Interest (DoI) to determine which data should

be represented and presented and which should not

  • The Degree of Interest of any item is expressed as a function of:

– A priori importance (API) – Distance (D) between that item and the item which is currently the user’s focus of interest

slide-17
SLIDE 17

1-The organization tree of a company G P President S M N F K

Example (Spence, 2007) Considering only Distance: 1 2 3 3 4 4 2 2 1 1 1 2 2 P Focus

2- Distance ’D’ of each node from the focus of attention

Focus Context P S M N K

3- The context defined by setting an upper threshold

  • f unity for distance from a focus

4- Display that might be associated with the focus and context defined

slide-18
SLIDE 18

Considering a priori importance: Each node in the organization tree has been assigned an API

10 9 9 8 7 7 7 8 8 6 8 8 6 9

8 6 6 8 6 6 6 4 4 4 6 6 4 8 Focus Context

Nodal values of Degree of Interest : DoI =API – D Setting a lower limit of 6 for DoI identifies the nodes within the shaded region

slide-19
SLIDE 19

Example: Part of an engineering drawing The engineering drawing simplified in the context of a suspected fault

(Spence, 2007)

slide-20
SLIDE 20

Magic Lens: (a) shows a conventional map of an area, (b) shows the location of services (gas, water and electricity pipes) (c) a (movable) Magic Lens shows services in an area of interest, in context (Spence, 2007) Suppression finds valuable application in the Magic Lens (Stone et al., 1994)

slide-21
SLIDE 21

A molecular surface of the protein transferase colored by electrostatic potential bound to DNA shown as a schematic. (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 (Spence, 2007)

slide-22
SLIDE 22

The Magic Lens in Augmented Reality for Data Visualization

http://www.youtube.com/watch?v=3zIq_qb8CSE&NR=1

slide-23
SLIDE 23

A combination of distortion and suppression can be beneficial It is a map appropriate to a journey from one city to another This example uses the concept of rubber sheet distortion

detail distortion (Spence, 2007)

slide-24
SLIDE 24

Panning is the smooth movement of a viewing frame over a 2D image 1 2 3

slide-25
SLIDE 25

Zooming is the increasing magnification of a decreasing fraction of an image (or vice versa) 1 1 2 2 3 3

slide-26
SLIDE 26

60 50 20 10 Pri ce (£ K) 40 30

40 30 35

Ford Niss an VW M erc Jag Jag Ford SE AT

(Spence, 2007)

In semantic zoom the meaning conveyed by the new view differs from the conveyed by the previous

  • ne
slide-27
SLIDE 27

Semantic Zoom

https://channel9.msdn.com/Blogs/One-Dev- Minute/Semantic-zoom-C-and-XAML

slide-28
SLIDE 28

Example: Portuguese Higher Education access data

http://www.portugal- migration.info/ Candidates and institutions data were provided by Direcção Geral do Ensino Superior (2012, 2013 and 2014) of Portuguese students applications to Higher Education (115636 students applications from 20 districts to 305 institutions). by Tiago Brito (MSc thesis, UA)

slide-29
SLIDE 29

Main bibliography

  • Spence, R., Information Visualization, Design for Interaction, 2nd ed., Prentice Hall,

2007

  • Spence, R., Information Visualization, An Introduction, 3rd ed., Springer, 2014
  • Mazza, R., Introduction to Information Visualization, Springer, 2009
  • Ware, C., Information Visualization, Perception to Design, 2nd ed.,Morgan

Kaufmann,2004

  • http://www.wikiviz.org/wiki/Main_Page

Acknowledgement

The author of these slides is very grateful to Professor Robert Spence as he provided the electronic version of his book figures