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: – how the representation is to be displayed – whether it is to be displayed (Spence, 2014) • Links to representation and interaction are important

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

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 o up le o f chair s. • Scrolling is an obvious solution when a document is 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, larger than the display area 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 or 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 • A long document can be moved past a “window” 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 or 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 • Often it is not a satisfactory solution pro blem . H ow can it b e solv ed, mi nd ful of 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) • Scrolling hides most of a document: 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 there is not a view of context as well as detail 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 of 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 .

• Two separate views of detail and of context can be combined in a overview + detail view “You are here”

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

• In DragMag (Ware and Lewis, 1995) a small region of interest a context map can be flexibly positioned to provide a magnified view DragMag used with satelite imagery http://www.ibiblio.org/openvideo/video/chi/chi95_03_m1.mpg • The use of a magnifying glass masks detail around the magnified region: the focus + context problem

• Distortion offers a way of solving the focus + context problem (a) An information space containing documents, emails, etc. • The bifocal display (Spence and Apperley, 1982) is based on a simple metaphor direction of view • Part of an information space can be (b) The same space wrapped around two uprights. viewed in detail; a bird’s eye view is provided of the remainder http://www.youtube.com/watch?v=DaF5brrdpJw http://www.youtube.com/watch?v=gNTQaH8MM98&NR=1 (c) Appearance of the information space when viewed from an appropriate direction

An early illustration of the Bifocal display principle (Spence, 2007) http://www.youtube.com/watch?v=RN3Z4XojDP4

Application example: Distortion generated without discontinuities (Spence, 2007) 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

The Table Lens (Rao and Card, 1995) - without distortion; - with distortion (expansion) to show names http://www.youtube.com/watch?v=qWqTrRAC52U

• This simple but powerful concept can be generalized X-distortion • It is possible to use X and Y distortion July Mar Apri l May Jun e Aug Sep t Oct 11Sun Ch eck slid es, n ote s. Fam il y b arbe que 12 Mon Fly LA Kath y to airp ort Mod el Make r 13 Tue 14 Wed 15 Thur 16 Fri X and Y -distortion 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 17Sat Fly LHR Ka thy to collect Ch ap ter 2 / see Da ve March Calendar interface using X and Y distortion (Bederson et al., 2003, 2004)

Examples of continuity across the boundary of the distorted region (Spence, 2007) http://www.youtube.com/watch?v=FDYo9uvrNJ0&NR=1

Equal X- and Y-distortion centred around a manually chosen location in the Macintosh OSX ‘dock’ (Spence, 2007) (Spence, 2007) Distorted map on a Table http://www.youtube.com/watch?v=m0LNHtRbaCA&NR=1

The Perspective Wall applies a 3D effect to the Bifocal Display (Mackinlay et al.,1991) http://www.youtube.com/watch?v=hYUZbrWtCZg

• 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

Example (Spence, 2007) 3- The context defined by setting an upper threshold of unity for distance from a focus Considering only Distance : 1-The organization tree of a company Context President S Focus S P P K M N N K M F G 4- Display that might be associated with the focus and context defined 2- Distance ’D ’ of each node from the focus of attention 2 1 3 3 Focus P 2 2 4 4 1 1 1 2 2

10 9 9 9 Considering a priori importance: Each node in the organization tree 8 has been assigned an API 8 8 8 8 7 7 7 6 6 8 Context 8 6 6 Nodal values of Degree of Interest : 8 DoI =API – D Focus 6 6 4 4 Setting a lower limit of 6 for DoI identifies 6 the nodes within the shaded region 6 6 4 4

Example: Part of an engineering drawing The engineering drawing simplified in the context of a suspected fault (Spence, 2007)

Suppression finds valuable application in the Magic Lens (Stone et al., 1994) 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)

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)