Human-Computer Interaction

Human-Computer Interaction an introduction to data visualization

Above all else show the data. Edward R. Tufte

reality Data is no longer scarce

reality Data is no longer scarce http://www.worldometers.info/

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 www.softviscollection.org/intro/a-thousand-words/

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

What information visualization means?

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

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

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

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

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, 2008 http://eagereyes.org/criticism/definition-of-visualization

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

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

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

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

data visualization How Music Travels an animated visualization experiment http://www.thomson.co.uk/blog/wp-content/uploads/infographic/interactive-music-map/

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

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

data visualization see Hans Rolins, New insights on poverty, TED 2007 www.ted.com/talks/hans_rosling_reveals_new_insights_on_poverty

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

Imago Mundi Babilon (V Century, B.C.) www.ancient-wisdom.co.uk/cartography.htm images provided by Wikimedia Commons

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

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

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

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

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

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

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

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

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 http://eagereyes.org/blog/2010/the-difference-between-infographics-and-visualization

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

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

Design of the data visualizations

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

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

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)

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

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

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

visualization modeling Data Tables tables of objects + their attributes

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,

visualization modeling could be considered as meta-data

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

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

visualization modeling Data Tables variables implies a scale of measurement

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

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

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

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

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

visualization modeling Data Tables variable subtype concerning similarity quantitative similarity

visualization modeling Data Tables temporal variables quantitative time ordinal time

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

visualization modeling main classes of variables involved into data visualization

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

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

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

visualization modeling

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

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

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

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

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

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

visualization modeling

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

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

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

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

visualization modeling

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

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

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

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

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

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

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

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

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?

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

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

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

How about the processes concerning data visualization?

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

visualization processes Acquire obtain the data to be analyzed and visualized open data sources: http://ideasource.blankdots.com/2012/08/open-data-sources/ http://datahub.io/

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

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

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

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

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

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

case study mash-ups Your Life on Earth (BBC, 2014) www.bbc.com/earth/story/20141016-your-life-on-earth

visualization processes adopting an iterative approach (Fry, 2008)

How about a taxonomy of information visualization?

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

visualization taxonomy see also http://eagereyes.org/techniques/pie-charts

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

various examples: http://www.improving-visualisation.org/visuals

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

visualization taxonomy retinal scatterplot here, a heat map http://secviz.org/content/user-behavior-a-heatmap visualizing user-behavior (Y) over time (X); color (retinal variable R) is used to indicate the intensity of the activity

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

a 3D visualization of tectonic topography (context: Vrancea region s seismicity) www.topo-europe.eu/3-the-natural-laboratory-concept/3-1-within-the-orogen/3-1-2-implications-for-the-natural-hazards

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

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

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

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

visualization taxonomy Simple visual structures articulated reading networks

visualization taxonomy Flight Patterns using air traffic GPS data to visualize commercial flight patterns and density (Koblin, 2005) www.aaronkoblin.com/work/flightpatterns/ see also http://graphofthings.org/

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

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

visualization taxonomy Definitive Daft Punk http://themaninblue.com/writing/perspective/2011/05/12/

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

visualization taxonomy a parallel coordinate view of a firewall log file context: security visualization http://secviz.org/

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

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

visualization taxonomy organizing all of pairwise correlation information

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

visualization taxonomy 100 Years with the San Francisco Symphony by Adobe http://thewhyaxis.info/music/

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

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

visualization taxonomy Poem Viewer imagery lens for visualizing corpora http://ovii.oerc.ox.ac.uk/poemvis/

for a demo, visit http://mbostock.github.io/protovis/ex/brush.html visualization taxonomy brushing performing a data selection task (e.g., click/tap and drag) linking highlighting the matching data samples in the other views

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

visualization taxonomy Gapminder World http://www.gapminder.org/world/

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

http://larp601.wordpress.com/ visualization taxonomy micro-macro readings presenting large quantities of data at high densities goal: to see the bigger picture

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

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

case study Master on Software Engineering :: Human-Computer Interaction conclusions Web Trend Map 2007 (Information Architects) http://ia.net/know-how/ia-trendmap-2007v2

case study Master on Software Engineering :: Human-Computer Interaction conclusions Food Poisoning Outbreaks (Ruslan Kamolov, 2015) http://www.visualizing.org/visualizations/food-poisoning-outbreaks

case study conclusions VOWL (Visual Notation for OWL Ontologies) + interactive visualization tools for desktop and Web http://vowl.visualdataweb.org/

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

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

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: http://junkcharts.typepad.com/

conclusions Know your audience different types of visualizations for different (types of) users an example: www.improving-visualisation.org/case-studies/id=7

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 http://flowingdata.com/ Ben Fry, Visualizing Data, O Reilly, 2008 Scott Murray, Interactive Data Visualization for the Web, O Reilly, 2013 http://chimera.labs.oreilly.com/books/1230000000345

online resources WikiViz techniques, tools, examples: www.wikiviz.org Data + Design https://infoactive.co/data-design Resources for data visualization and interactive exploration (curated by S. Negru): http://tinyurl.com/kr8oxg5 Information is Beautiful www.informationisbeautiful.net Data Visualization http://datavisualization.ch/ References for Visualizing Uncertainty: http://bit.ly/1zmndwi

http://bl.ocks.org/mbostock Conclusion data visualization definitions classification methods examples

http://dilbert.com/search_results?terms=user+interface next episode: written test (40 minutes, closed book exam)