Human-Computer Interaction

Transcription

1 Human-Computer Interaction an introduction to data visualization

2 Above all else show the data. Edward R. Tufte

3 reality Data is no longer scarce

4 reality Data is no longer scarce

5 reality Data is no longer scarce we need to integrate, simplify, and capitalize on existing information systems and the massive amounts of data they hold see also

6 reality Data is no longer scarce we need to integrate, simplify, and capitalize on existing information systems and the massive amounts of data they hold data information knowledge wisdom

7 What information visualization means?

8 data visualization A class of techniques for augmenting cognition the use of computer-supported, interactive, visual representations of abstract data in order to amplify cognition Card, Mackinlay & Shneiderman, 1999

9 data visualization A process of mapping information to visuals data visualization is expert storytelling (Murray, 2013)

10 data visualization A process of mapping information to visuals data visualization is expert storytelling (Murray, 2013) crafting rules that interpret data and express its values as visual properties

11 Master on Software Engineering :: Human-Computer Interaction information design data perceptualization data visualization scientific visualization

12 data visualization Minimal criteria that any visualization has to fulfill to be considered a pragmatic visualization based on (non-visual) data produce an image the result must be readable and recognizable R. Kosara,

13 data visualization Benefits adapted from Card et al. (2009): reducing the search for information

14 data visualization Benefits adapted from Card et al. (2009): enhancing the detection of patterns

15 data visualization Benefits adapted from Card et al. (2009): encoding information in an interactive medium

16 data visualization Benefits adapted from Card et al. (2009): monitoring of data/information/knowledge evolution

17 data visualization How Music Travels an animated visualization experiment

18 Benefits adapted from Card et al. (2009): enabling inferences data visualization

19 data visualization Benefits adapted from Card et al. (2009): allowing exploration of a space of parameter values and enhancing user operations

20 data visualization see Hans Rolins, New insights on poverty, TED

21 data visualization Origins: maps used from ancient times to convey, in an abstract way, known geographic areas + to provide orientation later on, give insights for creating strategies in case of hostilities

22 Imago Mundi Babilon (V Century, B.C.) images provided by Wikimedia Commons

23 data visualization Origins: diagrams see Euclid works on geometry used in science (e.g., by Newton) to record observations, to induct relationships, to explicate methodology of experiments, to classify & conceptualize phenomena

24 data visualization Newton s optics illustration reported by Robin (1992)

25 data visualization Origins: abstract diagrams employs non-physical information an early example: Playfair (1786)

26 data visualization Origins: visual design + data graphics design principles of information visualization (infovis) Edward Tufte (1983, 1990, 1997)

27 data visualization Origins: statistics exploratory (multidimensional) data analysis Tukey (1977), Cleveland & McGill (1988)

28 data visualization Origins: scientific visualization analytical software instruments for scientific analysis of large datasets McCormick & DeFanti (1987)

29 data visualization Origins: computer graphics + artificial intelligence automatic design of visual presentations of data Mackinlay (1986), Roth & Mattis (1990), Casner (1991)

30 data visualization Origins: human-computer interaction new user interfaces & interactions, including animations Robertson, Card & Mackinlay (1989), Shneiderman (1992)

31 data visualization Data visualization vs. infographics visualization is automatically created that can be applied to many datasets infographics are made manually for a particular dataset, concerning a specific purpose

32 data visualization The nature of the visualization depends on which relationship is dominant. N. Iliinsky & J. Steele, Designing Data Visualizations, O Reilly, 2011

33 data/info viz data visualization infographics e.g., generative art The nature of the visualization depends on which relationship is dominant. N. Iliinsky & J. Steele, Designing Data Visualizations, O Reilly, 2011

34 Design of the data visualizations

35 visualization modeling Visualization the mapping of data to visual form that supports human interaction in a workplace for visual sense making

36 visualization modeling Stuart Card, Information Visualization, Human-Computer Interaction Handbook (2 nd Edition), Taylor & Francis, 2008

37 Raw Data unfiltered/unprocessed input data Data Tables suitable date structures: relations + meta-data Visual Structures convenient graphical elements Views (interactive) visualizations perceived by user(s)

38 visualization modeling Raw Data data(sets) to be visualized, available in different binary/textual formats

39 visualization modeling Data Transformations provides document vectors (normalized vectors in a N-dimensional space); could imply different filtering operations

40 visualization modeling Data Tables suitable data structures: relations (depending on considered variables) + meta-data

41 visualization modeling Data Tables tables of objects + their attributes

42 visualization modeling Data Tables example for movie visualizations: basic objects = instances of the film concept attributes (properties) for each object for each film: title, year of release, genre type, actors,

43 visualization modeling could be considered as meta-data

44 visualization modeling Data Tables functional (abstract) representation: f (input variables) = output variables

45 visualization modeling Data Tables functional (abstract) representation: f (input variables) = output variables Year (FilmID = 540) 1926

46 visualization modeling Data Tables variables implies a scale of measurement

47 visualization modeling Data Tables variables implies a scale of measurement a nominal variable N is an unordered set e.g., film titles { Star Wars, Brazil, The Wall, } (in)equality operators could be used

48 visualization modeling Data Tables variables implies a scale of measurement an ordinal variable O is a tuple (ordered set) e.g., film ratings < G, PG, PG-13, R > relational operators (like < ) could be applied

49 visualization modeling Data Tables variables implies a scale of measurement a quantitative variable Q is a numeric range example: film duration [0, 400] arithmetic operators could be performed on them

50 visualization modeling Data Tables subtypes regarding a certain nature of visualization quantitative spatial 2D/3D spatial variables commonly used in scientific visualization

51 visualization modeling Data Tables subtypes regarding a certain nature of visualization quantitative geographical spatial variables that specifically represent geophysical coordinates

52 visualization modeling Data Tables variable subtype concerning similarity quantitative similarity

53 visualization modeling Data Tables temporal variables quantitative time ordinal time

54 visualization modeling Data Tables variables implies a scale of measurement unstructured scale whose only value is present or absent (e.g., an error flag)

55 visualization modeling main classes of variables involved into data visualization

56 visualization modeling Data Tables various scale types can be altered by transformations

57 visualization modeling Quantitative variables can be mapped by data transformations into ordinal variables film duration [0, 400] min. <SHORT, MEDIUM, LONG> classes of values

58 visualization modeling Nominal variables can be transformed to ordinal values film titles { Star Wars, Brazil, The Wall } < The Wall, Star Wars, Brazil > sorting

59 visualization modeling

60 visualization modeling Visual Mappings creating analytic abstractions to be visualized; from spatial coordinates to surfaces on an information 2D/3D landscape

61 visualization modeling Visual Structures use a vocabulary of visual elements: spatial substrates + marks + graphical properties

62 visualization modeling Visual Structures goal: the systematic mapping of data relations onto visual form visual encodings

63 visualization modeling Visual Structures spatial substrate marks connection enclosure retinal properties temporal encoding

64 visualization modeling Visual Structures spatial substrate empty space, as a container, can be treated as if it had metric structure scale type axis of space

65 visualization modeling Most important spatial axes: U unstructured N nominal grid O ordinal grid Q quantitative grid no axis a region divided into sub-regions sub-region ordering is significant a region has a metric

66 visualization modeling

67 visualization modeling Axes can be linear or radial can involve any of the various coordinate systems for describing space a common approach: Cartesian coordinates

68 visualization modeling Axes can be linear or radial can involve any of the various coordinate systems for describing space example: using 2 orthogonal quantitative axes to visualize movie popularity over the time Year Q X Popularity Q Y

69 visualization modeling Visual Structures marks visible things that occur in space: points, lines, areas, volumes

70 visualization modeling types of marks (in this case, point & line marks take up space and may have properties such as shape)

71 visualization modeling

72 visualization modeling Visual Structures connection & enclosure points and lines can be used to signify different topological structures like graphs and trees, showing relations among objects

73 visualization modeling Visual Structures connection & enclosure enclosure can be used for trees, contour maps, and Venn Diagrams

74 visualization modeling Visual Structures retinal properties position, size, orientation, color, texture, shape crispness, resolution, transparency, arrangement

75 visualization modeling Visual Structures retinal properties example: using color as visual code denoting a film genre FilmID (Genre) P (Color) 230 (Action) P (Red)

76 visualization modeling Visual Structures temporal encoding temporal data to be visualized versus animation mapping a variable into time

77 visualization modeling View Transformations offer various views (graphical representations) according to the user goals

78 visualization modeling Views perceived by end-users; adjusted by graphical parameters (position, scaling, clipping, )

79 visualization modeling View value distinction regards how operations (transformations) are performed at different places in the model

80 visualization modeling View value distinction regards how operations (transformations) are performed at different places in the model example: when a point is deleted from the visualization, has the point been deleted from the dataset?

81 visualization modeling Information visualization is about the not just creation of visual images, but also the interaction with those images in the service of some problem. Stuart Card, 2008

82 visualization modeling Expressiveness & effectiveness a visualization is expressive if and only if it encodes all the data relations intended and no other data relations are considered

83 visualization modeling FilmType (N) Position (Q) mapping from data to visual form that violates expressiveness criterion

84 How about the processes concerning data visualization?

85 visualization processes Acquire Parse Filter Mine Represent Refine Interact according to Ben Fry, 2008

86 visualization processes Acquire obtain the data to be analyzed and visualized open data sources:

87 visualization processes Parse deliver a certain structure for the data s meaning, and order it into categories

88 visualization processes Filter keep only the data of interest could also imply noise reduction

89 visualization processes Mine apply methods from statistics or data mining to discern patterns or place the data in mathematical context pragmatic approaches: G. Myatt, W. Johnson, Making Sense of Data I, II, and III, Wiley, 2007, 2009, 2011

90 visualization processes Represent choose a (set of) visual model(s) typical examples: using data charts e.g., bar graph, list, tree,

91 visualization processes Refine improve the basic visual representation to make it clearer and more visually engaging applying techniques of perceptual optimization

92 visualization processes Interact add methods for manipulating the data or controlling what features are visible

93 case study mash-ups Your Life on Earth (BBC, 2014)

94 visualization processes adopting an iterative approach (Fry, 2008)

95 How about a taxonomy of information visualization?

96 visualization taxonomy Simple visual structures direct reading 1-variable [X]: lists, 1D scatterplots, pie charts, distributions, box plots,

97 visualization taxonomy see also

98 visualization taxonomy Simple visual structures direct reading 2-variable [XY]: 2D object charts (histograms) for continuous values 2D scatterplots in the case of discrete values

99 various examples:

100 visualization taxonomy Simple visual structures direct reading 3-variable [XYR]: retinal scatterplots, Kohonen diagrams [(XY)Z]: information landscapes, information surfaces [XYZ]: 3D scatterplots

101 visualization taxonomy retinal scatterplot here, a heat map visualizing user-behavior (Y) over time (X); color (retinal variable R) is used to indicate the intensity of the activity

102 visualization taxonomy Simple visual structures direct reading 4-variable [XYZR]: 3D retinal scatterplots, 3D topographies

103 a 3D visualization of tectonic topography (context: Vrancea region s seismicity)

104 visualization taxonomy Simple visual structures articulated reading n-variable [XYR n-2 ]: 2D retinal scatterplots [XYZR n-1 ]: 3D retinal scatterplots may present a barrier of perception

105 visualization taxonomy scatterplot of attractiveness versus age, colored by gender O Connor & Biewald, 2009

106 visualization taxonomy Simple visual structures articulated reading trees (used for hierarchical data): node and link trees, enclosure trees, hyperbolic trees, TreeMaps, cone trees

107 visualization taxonomy treemap of terms occurring in geography titles and comments for 6 selected scene types T. Segaran & J. Hammerbacher (Eds.), Beautiful Data, O Reilly, 2009

108 visualization taxonomy Simple visual structures articulated reading networks

109 visualization taxonomy Flight Patterns using air traffic GPS data to visualize commercial flight patterns and density (Koblin, 2005) see also

110 visualization taxonomy Simple visual structures articulated reading time aspects of interest: discrete vs. continuous values moments vs. intervals

111 visualization taxonomy Simple visual structures articulated reading time typical solutions: calendar, timeline, alternative views

112 visualization taxonomy Definitive Daft Punk

113 visualization taxonomy Composed visual structures single-axis composition [XY n ]: permutation matrices, parallel coordinates

114 visualization taxonomy a parallel coordinate view of a firewall log file context: security visualization

115 visualization taxonomy Composed visual structures double-axis composition [XY]: graphs

116 visualization taxonomy Composed visual structures recursive composition 2D in 2D [(XY) XY ]: scatterplot matrices, hierarchical axes,

117 visualization taxonomy organizing all of pairwise correlation information

118 visualization taxonomy Composed visual structures recursive composition marks in 2D [(XY) R ]: stick figures, color icons, shape coding, Keim spirals,

119 visualization taxonomy 100 Years with the San Francisco Symphony by Adobe

120 visualization taxonomy Composed visual structures recursive composition 3D in 3D [(XYZ) XYZ ]: worlds within worlds

121 visualization taxonomy Interactive visual structures dynamic queries imagery ( magic ) lens overview + detail brushing and linking extraction & comparation attribute explorer (multi-faceted)

122 visualization taxonomy Poem Viewer imagery lens for visualizing corpora

123 for a demo, visit visualization taxonomy brushing performing a data selection task (e.g., click/tap and drag) linking highlighting the matching data samples in the other views

124 visualization taxonomy Focus + context attention-reactive visual abstraction data-driven methods: filtering, selective aggregation

125 visualization taxonomy Gapminder World

126 visualization taxonomy Focus + context attention-reactive visual abstraction view-based methods: micro-macro readings, highlighting, visual transfer functions, perspective distortion, alternate geometries

127 visualization taxonomy micro-macro readings presenting large quantities of data at high densities goal: to see the bigger picture

128 conclusions Main purposes of information visualization: exploratory visualization discover patterns, trends, or sub-problems in a data set explanatory visualization transmitting information or a point of view to the user

129 conclusions Main purposes of information visualization: exploratory visualization discover patterns, trends, or sub-problems in a data set explanatory visualization transmitting information or a point of view to the user

130 case study Master on Software Engineering :: Human-Computer Interaction conclusions Web Trend Map 2007 (Information Architects)

131 case study Master on Software Engineering :: Human-Computer Interaction conclusions Food Poisoning Outbreaks (Ruslan Kamolov, 2015)

132 case study conclusions VOWL (Visual Notation for OWL Ontologies) + interactive visualization tools for desktop and Web

133 conclusions Each visualization project (solution) has unique requirements If each data set is different, the point of visualization is to expose that fascinating aspect of the data and make it self-evident. Stephen Fry

134 conclusions Apply KISS principle less detail can actually convey more information beware of chartjunk Tufte (1983)

135 conclusions chartjunk using a large area and a lot of ink (many symbols and lines) to show only 5 hard-to-read numbers real-life examples:

136 conclusions Know your audience different types of visualizations for different (types of) users an example:

137 resources Edward R. Tufte, The Visual Display of Quantitative Information (2 nd Edition), Graphics Press, 2001 Edward R. Tufte, Envisioning Information, Graphics Press, 1990 Nathan Yau, Visualize This, Wiley, 2011 for examples & tutorials, consult Ben Fry, Visualizing Data, O Reilly, 2008 Scott Murray, Interactive Data Visualization for the Web, O Reilly,

138 online resources WikiViz techniques, tools, examples: Data + Design Resources for data visualization and interactive exploration (curated by S. Negru): Information is Beautiful Data Visualization References for Visualizing Uncertainty:

139 Conclusion data visualization definitions classification methods examples

140 next episode: written test (40 minutes, closed book exam)