Data Visualization

Master on Software Engineering :: Human-Computer Interaction
Human-Computer Interaction
an introduction to data visualization
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
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

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) 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
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 experiment

http://www.thomson.co.uk/blog/wp-content/uploads/infographic/interactive-music-map/

enabling inferences
data visualization

data visualization
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
imagesDr. provided by Wikimedia Commons
Sabin-Corneliu Buraga – www.purl.org/net/busaco
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 visualization
data/info viz 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

Stuart Card, “Information Visualization”,

Human-Computer Interaction Handbook (2nd 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)

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

for each film: title, year of release, genre type, actors,…

could be considered
as meta-data
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 set

e.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 range

example: film duration [0, 400]
arithmetic operators could be performed on them

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

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

Data Tables
variable subtype concerning similarity
quantitative similarity

Data Tables
temporal variables
quantitative time
ordinal time

Data Tables
unstructured scale
whose only value is present or absent (e.g., an error flag)

main classes of Dr.variables involved into data visualization

Data Tables
various scale types can be altered by transformations

Quantitative variables can be mapped

by data transformations into ordinal variables
film duration [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 Structures
use 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 substrate
marks
connection
enclosure
retinal properties
temporal 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:
U – unstructured no axis
N – nominal grid a region divided into sub-regions
O – ordinal grid sub-region ordering is significant
Q – quantitative grid a region has a metric


Axes can be linear or radial
can involve any of the various coordinate systems

for describing space
a common approach: Cartesian coordinates

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 genre

FilmID (Genre) → P (Color)
230 (Action) → P (Red)

Visual Structures
temporal encoding
temporal data to be visualized

versus
animation – mapping a variable into time

View Transformations – offer 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 performed

at different places in the model

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?

“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 are considered

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
Acquire
obtain the data to be analyzed and visualized
open data sources:

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

Parse
deliver a certain structure for the data’s meaning,

and order it into categories

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

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

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

Refine
improve the basic visual representation

to make it clearer and more visually engaging
applying techniques of perceptual optimization

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

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) – for continuous values
2D scatterplots – in the case of discrete values

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

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

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

articulated reading may present

a barrier of
n-variable perception
[XYRn-2]: 2D retinal scatterplots
[XYZRn-1]: 3D retinal scatterplots

scatterplot of attractiveness versus age, colored by gender

O’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 geography 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/
see also http://graphofthings.org/
articulated reading
time
aspects of interest:
discrete vs. continuous values
moments vs. intervals

articulated reading
time
typical solutions:
calendar, timeline, alternative views

Definitive Daft Punk

http://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 file

context: 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 Adobe

http://thewhyaxis.info/music/
3D in 3D [(XYZ)XYZ]:
worlds within worlds

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

Poem Viewer – imagery lens for visualizing corpora

http://ovii.oerc.ox.ac.uk/PoemVis/
brushing
performing a data selection task (e.g., click/tap and drag)
linking
highlighting the matching data samples in the other views
for a demo, visitDr.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 readings
presenting large quantities of data at high densities
goal: to see the bigger picture
http://larp601.wordpress.com/
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
conclusions
Web Trend Map 2007 (Information Architects)

http://ia.net/know-how/ia-trendmap-2007v2
case study
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
(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
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
“Conclusion”
http://bl.ocks.org/mbostock
data visualization
definitions
classification
methods
examples
http://dilbert.com/search_results?terms=user+interface
next episode:
written test (40 minutes, closed book exam)

Data Visualization

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Data Visualization

Uploaded by

Copyright:

Available Formats

Master on Software Engineering :: Human-Computer Interaction

an introduction to data visualization

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

“Above all else show the data.”

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

Data is no longer scarce

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

we need to integrate, simplify, and capitalize on

see also www.softviscollection.org/intro/a-thousand-words/

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

we need to integrate, simplify, and capitalize on

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

What information visualization means?

“the use of computer-supported, interactive,

Card, Mackinlay & Shneiderman, 1999

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