Week 06 Interaction / Overview & Detail 2015 Fall human-computer interaction + design lab. Joonhwan Lee
Interaction
Interaction The communication between user and the system Dix et al., 1998 Direct manipulation and instantaneous change Becker et al., 1987 3
Main Components of InfoVis The effectiveness of information visualization hinges on two things: its ability to clearly and accurately represent information and our ability to interact with it to figure out what the information means. - S. Few, Now You See It, p.55 4
Main Components of InfoVis Two main components of InfoVis Representation Interaction action 5
Interaction Example http://www.meandeviation.com/dancing-histograms/hist.html 6
Interaction Few s taxonomy Comparing Sorting Adding variables Filtering Highlighting Aggregating Re-expressing Re-visualizing Zooming and panning Re-Scaling Accessing details on demand Annotating Bookmarking S. Few, Now You See It, Chapter 4 7
Yi s Taxonomy GATech John Stasko Yi, Kang, Stasko & Jacko, 2007 Review paper 59 papers InfoVis 59 51 systems SeeIT, Spotfire, TableLens, InfoZoom 51 InfoVis collected 311 individual interactions Affinity diagram method 8
Yi s Taxonomy Focus What a user wants to achieve through a specific interaction technique? User Intent, (purpose) 9
Yi s Taxonomy 7 categories Select Explore Reconfigure Encode Abstract/Elaborate Filter Connect 10
Select Mark something as interesting Select interaction techniques provide users with the ability to mark a data item(s) of interest to keep track of it., representation. e.g., placemark Gap Minder 11
Select Hans Rosling, Gap Minder, 2007 12
Select Generalized Selection via Interactive Query Relaxation http://vis.berkeley.edu/papers/generalized_selection/ 13
Explore Show me something different Explore interaction techniques enable users to examine a different subset of data cases. e.g., panning in google earth direct walking in visual thesaurus 14
Explore Google Earth - panning 15
Explore http://www.visualthesaurus.com - direct walk 16
Reconfigure Show me a different arrangement Reconfigure interaction techniques provide users with different perspectives onto the data set by changing the spatial arrangement of representations. e.g., Sorting and rearranging columns in TableLens Changing attributes in a scatter plot The baseline adjustment in Stacked Histogram 17
Reconfigure http://www.meandeviation.com/dancing-histograms/hist.html 18
Reconfigure Sort data in TableLens (slide courtesy, John Stasko) 19
Encode Show me a different representation Encode techniques enable users to alter the fundamental visual representation of the data including visual appearance (e.g., color, size, and shape) of each data element. e.g., change color encoding change size change orientation change font / shape 20
Encode encode example (slide courtesy, John Stasko) 21
Abstract/Elaborate Show me more or less detail Abstract/Elaborate interaction techniques provide users with the ability to adjust the level of abstraction of a data representation. e.g., zoom in/out Treemap zoom in/out unfolding sub-categories 22
Abstract/Elaborate Hand-drawn map Joonhwan Lee, 2005 23
Filter Show me something conditionally Filter interaction techniques enable users to change the set of data items being presented based on some specific conditions. e.g., dynamic query attribute explorer keystroke based filtering in NameVoyager 24
Filter http://www.babynamewizard.com/voyager# 25
Filter http://www.babynamewizard.com/voyager# 26
Filter http://www.trulia.com/ 27
Filter http://www.trulia.com/ 27
Filter Home finder / Film finder, University of Maryland, CHI 94 http://www.open-video.org/details.php?videoid=8161 28
Filter The Attribute Explorer, Imperial College UK, CHI 94 http://www.open-video.org/details.php?videoid=8162 29
Filter Magic Lens & See Through Tools, Xerox PARC, CHI 94 & 95 http://www.open-video.org/details.php?videoid=8167 30
Connect Show me related items Connect refers to interaction techniques that are used to (1) highlight associations and relationships between data items that are already represented and (2) show hidden data items that are relevant to a specified item. e.g., highlighting directly connected nodes brusing in InfoScope 31
Connect Highlighting connections perspective representation e.g., Vizster 32
Connect Vizster, http://www.youtube.com/watch?v=uxsacr2d-ia 33
Connect Brushing multiple view view case view. A screen shot of Spotfire showing a brushing technique 34
Connect Brushing in InfoScope, http://www.macrofocus.com/ 35
Overview & Detail
Screen Size Matter (screen real-estate issue).. Human Vision: 200 x120 Typical computer displays: 200 50 x50 vision 50 display 120 50 37
Solutions...? 38
Solutions...? 38
Solutions...? Traditional solutions... move information paging scrolling panning spatially partitioned windowing menus problems? discontinuity between the information displayed at different times and places can cause cognitive and mechanical burdens for users 39
Overview navigation search infovis overview 40
Detail (= user s intent) 41
Overview + Detail Spatial Separation An overview+detail interface design is characterized by the simultaneous display of both an overview and detailed view of an information space, each in a distinct presentation space. e.g., Scrollbars, thumbnails overviews 42
Overview + Detail Scrollbars, Thumbnails Overviews 43
Overview + Detail Embellished Scrollbars 44
Overview + Detail Game Interface - small map overview 45
Overview + Detail MOVE (Maps Optimized for Vehicular Environments) Zoom in Context + Overview (ZC+O) + Driver can see both entire route and the detailed route at once Two target positions make it complicated Joonhwan Lee, 2005 46
Overview + Detail + Z-based overview+detail separation + + 47
Zooming Temporal Separation The second basic category of interface supporting both focused and contextual views is based on zooming, which involves a temporal separation between views. Issues loosing context the user may not discover how to activate the zoom functions the user may be unable to reverse the action 48
Zooming Powers of Ten (http://www.youtube.com/watch?v=0fkbhvdjuy0) 49
Understanding Zooming Furnas & Bederson, CHI 95 Space scale diagram Furnas and Bederson CHI 95 Zoom out Zoom in Pan User s viewing frame (constant size) 50
Zooming Toolkits Pad Pad++ Jazz Piccolo zooming panning Pad - Perlin & Fox Pad++ - Bederson & Hollan Jazz, Piccolo - Bederson. 51
Zooming Toolkits PadPrints (UIST 98) http://www.acm.org/uist/archive/html/videos.html 52
Zooming Toolkits PhotoMesa (UIST 01) http://www.acm.org/uist/archive/html/videos.html 53
Zooming Toolkits Speed-dependent automatic zooming (UIST 00) http://www.acm.org/uist/archive/html/videos.html 54
Zooming Toolkits Lean & Zoom (CHI 08) http://www.chrisharrison.net/index.php/research/leanandzoom 55
Focus + Context Seamless Focus in Context Focus+Context integrates focus and context into a single display where all parts are concurrently visible. e.g., fisheye view (Furnas, CHI 86) 56
Focus + Context Fisheye view Provides detailed views (focus) and overviews (context) without obscuring anything. The focus area (or area) is magnified to show detail, while preserving the context, all in a single display. - Shneiderman, 1998 57
Focus + Context Fisheye View Graph http://www.open-video.org/details.php?videoid=8143 58
Focus + Context Bifocal Display Fisheye view 3 focus main periphery Fold Project CS 7450 59
Focus + Context Perspective Wall (Mackinlay, Robertson, Card CHI 91) 3D implementation of bifocal display http://www.youtube.com/watch?v=hyuzbrwtczg 60
Focus + Context Applications: Fisheye Menu menu has too many items scrolling is annoying current solutions: hierarchical groups scrollbars and arrows 61
Focus + Context Applications: Apple Dock dock enhance accessibility to apps too many app icons can t point & click small icons 62
Focus + Context MOVE (Maps Optimized for Vehicular Environments) Zoom in Context (ZC) + Driver can see entire route Target position move back and forth Joonhwan Lee, 2005 63
Next Week Time Series Data Reading W. Aigner, S. Miksch, W. Muller, H. Schumann, C. Tominski, Visual Methods for Analyzing Time-Oriented Data, IEEE Trans. on Visualization and Computer Graphics, Vol. 14, No. 1, Jan.-Feb. 2008, pp. 47-60. 64
Assignment 3: Bar Graph : 10/25 ( )
Assignment 3: Bar Graph d3.js bar graph : OECD 2014 GDP (%) https://stats.oecd.org/index.aspx? DataSetCode=SOCX_AGG : ( : country), GDP ( : value) 66
Assignment 3: Bar Graph interaction technique * * : OECD, : (10/25) firstname html index.html, ( : x) zip 67
Assignment 3: Bar Graph Bargraph: http://bl.ocks.org/mbostock/3885304 Tooltip: http://bl.ocks.org/caged/6476579 Sortable: http://bl.ocks.org/mbostock/3885705 Dual scale: https://github.com/liufly/dual-scale-d3- Bar-Chart NYT: http://www.nytimes.com/2014/05/02/upshot/ how-not-to-be-misled-by-the-jobs-report.html NYT: http://www.nytimes.com/interactive/2014/03/31/ science/motorcycle-helmet-laws.html 68
Questions...?