HCI 2014 (8 of 10): Data Visualization

Master on Software Engineering :: Human-Computer Interaction

Dr. Sabin-Corneliu Buraga – www.purl.org/net/busacoan introduction to data visualization

Human-Computer Interaction


Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco

“Above all else show the data.”

Edward R. Tufte



reality

Data is no longer scarce



reality


http://www.worldometers.info/



reality


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


we need to integrate, simplify, and capitalize on existing information systems and

the massive amounts of data they hold

datainformationknowledgewisdom



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



informa-tion

design

data per-ceptuali-

zation

data visuali-zation

scientific visuali-zation



data visualization

Minimal criteria that any visualization has to fulfill to be considered a pragmatic visualization

based on (non-visual) dataproduce an image

the result must be readable and recognizable

Robert Kosara, 2008http://eagereyes.org/criticism/definition-of-visualization



data visualization

Benefits – adapted from Card et al. (2009):

reducing the search for information



data visualization


enhancing the detection of patterns



data visualization


encoding information in an interactive medium



data visualization


monitoring of data/information/knowledge evolution



data visualization

How Music Travels – an animated visualization experimenthttp://www.thomson.co.uk/blog/

wp-content/uploads/infographic/interactive-music-map/



data visualization


enabling inferences



data visualization

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



data visualization


allowing exploration of a space of parameter values and enhancing user operations



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



data visualization

Origins:

diagrams

see Euclid works on geometryused 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

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 visualization

“The nature of the visualization depends on which relationship is dominant.”

N. Iliinsky & J. Steele, Designing Data Visualizations, O’Reilly, 2011

infographicsdata/info viz

e.g., generative art



How about data visualization design?



visualization modeling

Visualization

the mapping of data to visual formthat supports human interaction in a workplace

for visual sense making




Stuart Card, “Information Visualization”, Human-Computer Interaction Handbook (2nd Edition),

Taylor & Francis, 2008




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




Data Transformations – provides document vectors (normalized vectors in a N-dimensional space);

could imply different filtering operations




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




Data Tables

tables of objects + their attributes




Data Tables

example for movie visualizations:

basic objects = instances of the film concept

attributes (properties) for each object: title, year of release, genre type, actors,…




could be considered as metadata




Data Tables

functional (abstract) representation:

f (input variables) = output variables




Data Tables

functional (abstract) representation:

f (input variables) = output variables

Year (FilmID = 540) = 1926




Data Tables

variables implies a scale of measurement




Data Tables


a nominal variable N is an unordered sete.g., film titles { Star Wars, Brazil, The Wall,…}

(in)equality operators could be used




Data Tables


an ordinal variable O is a tuple (ordered set)e.g., film ratings < G, PG, PG-13, R >

relational operators (like “<”) could be applied




Data Tables


a quantitative variable Q is a numeric rangeexample: film length [0, 400]

arithmetic operators could be performed on them




Data Tables

subtypes regarding the nature of visualization

quantitative spatial – for intrinsically spatial variables common in scientific visualization

quantitative geographical – spatial variables that are specifically geophysical coordinates




Data Tables

variable subtype concerning similarity

quantitative similarity




Data Tables

temporal variables

quantitative timeordinal time




Data Tables


unstructured scalewhose only value is present or absent (e.g., an error flag)




data classes




Data Tables

scale types can be altered by transformations




Quantitative variables can be mapped by data transformations into ordinal variables

film length [0, 400] min. → <SHORT, MEDIUM, LONG>

classes of values




Nominal variables can be transformed to ordinal values

film titles { Star Wars, Brazil, The Wall }→ < The Wall, Star Wars, Brazil >

sorting







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




Visual Structuresuse a vocabulary of visual elements:

spatial substrates + marks + graphical properties




Visual Structures

goal: the systematic mapping of data relations onto visual form

visual encodings




Visual Structures

spatial substratemarks

connectionenclosure

retinal propertiestemporal encoding




Visual Structures

spatial substrate

empty space, as a container, can be treated as if it had metric structure

scale type ↔ axis of space




Most important spatial axes:

unstructured no axisnominal grid a region divided into sub-regionsordinal grid ordering of sub-regions is significantquantitative grid a region has a metric







Axes can be linear or radial

can involve any of the various coordinate systems for describing space




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 → QX

Popularity → QY




Visual Structures

marks

visible “things” that occur in space:points, lines, areas, volumes




types of marks(in this case, point & line marks take up space

and may have properties such as shape)







Visual Structures

connection & enclosure

points and lines can be used to signify different topological structures like graphs and trees,

showing relations among objects




Visual Structures

connection & enclosure

enclosure can be used for trees, contour maps, and Venn Diagrams




Visual Structures

retinal properties

position, size, orientation, color, texture, shape

crispness, resolution, transparency, arrangement




Visual Structures

retinal properties

example: using color as visual code denoting a film genreFilmID (Genre) → P(Color)




Visual Structures

temporal encoding

temporal data to be visualizedversus

animation – mapping a variable into time




View Transformations – offers various views (graphical representations) according to the user goals




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




View—value distinction

regards how operations (transformations) are performedat different places in the model




View—value distinction

regards how operations (transformations) are performedat different places in the model

example:when a point is deleted from the visualization, has the point been deleted from the dataset?




“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




Expressiveness & effectiveness

a visualization is expressive if and only if it encodes all the data relations intended

and no other data relations




FilmType(N) → Position(Q)mapping from data to visual form that violates

expressiveness criterion



visualization processes

AcquireParseFilterMine

RepresentRefine

Interact

according to Ben Fry, 2008




Acquire

obtain the data to be analyzed and visualized

open data sources:http://ideasource.blankdots.com/2012/08/open-data-sources/




Parse

deliver a certain structure for the data’s meaning, and order it into categories




Filter

keep only the data of interest




Mine

apply methods from statistics or data miningto 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




Represent

choose a (set of) visual model(s)

typical examples: bar graph, list, tree




Refine

improve the basic visual representation to make it clearer and more visually engaging




Interact

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




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




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





direct reading

2-variable [XY]: 2D object charts (histograms), 2D scatterplots





direct reading

3-variable [XYR]: retinal scatterplots, Kohonen diagrams

[(XY)Z]: information landscapes, information surfaces[XYZ]: 3D scatterplots




retinal scatterplot – here, a heat maphttp://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





direct reading

4-variable [XYZR]: 3D retinal scatterplots, 3D topographies




a complex visualization of localized partisanshipAndrew Gelman, Jonathan P. Kastellec & Yair Ghitza, 2009





articulated reading

n-variable [XYRn-2]: 2D retinal scatterplots[XYZRn-1]: 3D retinal scatterplots

may present a barrier of perception




scatterplot of attractiveness versus age, colored by genderO’Connor & Biewald, 2009





articulated reading

trees (used for hierarchical data):node and link trees, enclosure trees, hyperbolic trees,

TreeMaps, cone trees




treemap of terms occurring in geograph titles and comments for 6 selected scene types

T. Segaran & J. Hammerbacher (Eds.), Beautiful Data, O’Reilly, 2009





articulated reading

networks




Flight Patterns – using air traffic GPS data to visualize commercial flight patterns and density (Koblin, 2005)

www.aaronkoblin.com/work/flightpatterns/





articulated reading

time




Definitive Daft Punkhttp://themaninblue.com/writing/perspective/2011/05/12/




Composed visual structures

single-axis composition [XYn]:permutation matrices, parallel coordinates




a parallel coordinate view of a firewall log filecontext: security visualization – http://secviz.org/





double-axis composition [XY]:graphs





recursive composition

2D in 2D [(XY)XY]: scatterplot matrices, hierarchical axes,…




organizing all of pairwise correlation information






marks in 2D [(XY)R]: stick figures, color icons, shape coding, Keim spirals,…




100 Years with the San Francisco Symphony by Adobehttp://thewhyaxis.info/music/






3D in 3D [(XYZ)XYZ]: worlds within worlds




Interactive visual structures

dynamic queriesimagery (“magic”) lens

overview + detailbrushing and linking

extraction & comparationattribute explorer (multi-faceted)




Poem Viewer – imagery lens for visualizing corporahttp://ovii.oerc.ox.ac.uk/PoemVis/




brushingperforming a data selection task (e.g., click and drag)

linkinghighlighting the matching data samples in the other views

for a demo, visit http://mbostock.github.io/protovis/ex/brush.html




Focus + context attention-reactive visual abstraction

data-driven methods: filtering, selective aggregation




Gapminder World – http://www.gapminder.org/world/




Focus + context attention-reactive visual abstraction

view-based methods:micro-macro readings, highlighting, visual transfer

functions, perspective distortion, alternate geometries




micro-macro readingspresenting large quantities of data at high densities

goal: to see the bigger picture

http://larp601.wordpress.com/



conclusions

Main purposes of information visualization:

exploratory visualizationdiscover patterns, trends, or sub-problems in a data set

explanatory visualizationtransmitting information or a point of view to the user



conclusions

case study: 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



resources

Edward R. Tufte, The Visual Display of Quantitative Information (2nd 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

Resources for data visualization and interactive exploration (curated by S. Negru): http://tinyurl.com/kr8oxg5

Data Visualization – http://datavisualization.ch/

Visualization & Visual Communication: http://eagereyes.org

Information is Beautiful – www.informationisbeautiful.net



“Conclusion”

data visualizationdefinitions, classification, methods, examples



next lecture:affective factors & persuasive technologies