Week6

Size: px

Start display at page:

Download "Week6"

창걸 조
6 years ago
Views:

1 Week 06 Interaction / Overview & Detail 2015 Fall human-computer interaction + design lab. Joonhwan Lee

2 Interaction

3 Interaction The communication between user and the system Dix et al., 1998 Direct manipulation and instantaneous change Becker et al.,

4 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

5 Main Components of InfoVis Two main components of InfoVis Representation Interaction action 5

6 Interaction Example 6

7 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

8 Yi s Taxonomy GATech John Stasko Yi, Kang, Stasko & Jacko, 2007 Review paper 59 papers InfoVis systems SeeIT, Spotfire, TableLens, InfoZoom 51 InfoVis collected 311 individual interactions Affinity diagram method 8

9 Yi s Taxonomy Focus What a user wants to achieve through a specific interaction technique? User Intent, (purpose) 9

10 Yi s Taxonomy 7 categories Select Explore Reconfigure Encode Abstract/Elaborate Filter Connect 10

11 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

12 Select Hans Rosling, Gap Minder,

13 Select Generalized Selection via Interactive Query Relaxation 13

14 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

15 Explore Google Earth - panning 15

16 Explore - direct walk 16

17 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

18 Reconfigure 18

19 Reconfigure Sort data in TableLens (slide courtesy, John Stasko) 19

20 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

21 Encode encode example (slide courtesy, John Stasko) 21

22 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

23 Abstract/Elaborate Hand-drawn map Joonhwan Lee,

24 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

25 Filter 25

26 Filter 26

27 Filter 27

28 Filter 27

29 Filter Home finder / Film finder, University of Maryland, CHI

30 Filter The Attribute Explorer, Imperial College UK, CHI

31 Filter Magic Lens & See Through Tools, Xerox PARC, CHI 94 &

32 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

33 Connect Highlighting connections perspective representation e.g., Vizster 32

34 Connect Vizster, 33

35 Connect Brushing multiple view view case view. A screen shot of Spotfire showing a brushing technique 34

36 Connect Brushing in InfoScope, 35

37 Overview & Detail

38 Screen Size Matter (screen real-estate issue).. Human Vision: 200 x120 Typical computer displays: x50 vision 50 display

39 Solutions...? 38

40 Solutions...? 38

41 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

42 Overview navigation search infovis overview 40

43 Detail (= user s intent) 41

44 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

45 Overview + Detail Scrollbars, Thumbnails Overviews 43

46 Overview + Detail Embellished Scrollbars 44

47 Overview + Detail Game Interface - small map overview 45

48 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,

49 Overview + Detail + Z-based overview+detail separation

50 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

51 Zooming Powers of Ten ( 49

52 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

53 Zooming Toolkits Pad Pad++ Jazz Piccolo zooming panning Pad - Perlin & Fox Pad++ - Bederson & Hollan Jazz, Piccolo - Bederson. 51

54 Zooming Toolkits PadPrints (UIST 98) 52

55 Zooming Toolkits PhotoMesa (UIST 01) 53

56 Zooming Toolkits Speed-dependent automatic zooming (UIST 00) 54

Zooming Toolkits Lean & Zoom (CHI 08) http://www.

57 Zooming Toolkits Lean & Zoom (CHI 08) 55

58 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

59 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,

60 Focus + Context Fisheye View Graph 58

61 Focus + Context Bifocal Display Fisheye view 3 focus main periphery Fold Project CS

62 Focus + Context Perspective Wall (Mackinlay, Robertson, Card CHI 91) 3D implementation of bifocal display 60

63 Focus + Context Applications: Fisheye Menu menu has too many items scrolling is annoying current solutions: hierarchical groups scrollbars and arrows 61

64 Focus + Context Applications: Apple Dock dock enhance accessibility to apps too many app icons can t point & click small icons 62

65 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,

66 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

67 Assignment 3: Bar Graph : 10/25 ( )

68 Assignment 3: Bar Graph d3.js bar graph : OECD 2014 GDP (%) DataSetCode=SOCX_AGG : ( : country), GDP ( : value) 66

69 Assignment 3: Bar Graph interaction technique * * : OECD, : (10/25) firstname html index.html, ( : x) zip 67

70 Assignment 3: Bar Graph Bargraph: Tooltip: Sortable: Dual scale: Bar-Chart NYT: how-not-to-be-misled-by-the-jobs-report.html NYT: science/motorcycle-helmet-laws.html 68

71 Questions...?

À±½Â¿í Ãâ·Â

À±½Â¿í Ãâ·Â Representation, Encoding and Intermediate View Interpolation Methods for Multi-view Video Using Layered Depth Images The multi-view video is a collection of multiple videos, capturing the same scene at