An Introduction to Data Visualization

Master on Software Engineering :: Human-Computer Interaction
Human-Computer Interaction
an introduction to data visualization

Dr. Sabin-Corneliu Buraga profs.info.uaic.ro/~busaco/
Above all else show the data.
Edward R. Tufte
data
velocity
real-time (stream)
interval (continuous)
sparse
(discrete)
batch
(atomic)
KB
GB MB
EB TB
ZB PB
data
volume
semi- multiRDBMS
struc- media
tured biunstructured
CSV XML nary
JSON
data
variety
YB
data characteristics: variety, volume, velocity

adapted
from
blog.sqlauthority.com
Dr. Sabin-Corneliu
Buraga
profs.info.uaic.ro/~busaco/
reality
Data is no longer scarce
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/

DIKW (DataInformationKnowledgeWisdom)
after S. Carpenter, 2008 & J. Liebowitz, 2012
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
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
enhancing the detection of patterns
data visualization
encoding information in an interactive medium
data visualization
monitoring of data/information/knowledge evolution
case study
data visualization
How Music Travels an animated visualization experiment

http://www.thomson.co.uk/blog/wp-content/uploads/infographic/interactive-music-map/
data visualization
Benefits:
enabling inferences
(contexts: artificial intelligence,
semantic Web)
decision making
+ predictions
(context: machine learning)
Dr. Sabin-Corneliuwww.r2d3.us/visual-intro-to-machine-learning-part-1/
Buraga profs.info.uaic.ro/~busaco/
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
Other benefits (Chibana, 2015):
datarevealing
visualization
trends
data visualization
placing data/information into a specific context
Universcale (Nikon,
2015): www.nikon.com/about/feelnikon/universcale/
Dr. Sabin-Corneliu
data visualization
providing perspectives regarding a topic/domain
www.claimsjournal.com/news/national/2015/10/23/266540.htm
data visualization
stimulating the user imagination (what if?)
http://www.lumbre.tv/projects/view/classified
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
Newtons 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
User
data visualization
informative
Data
persuasive
visual art
Designer
The nature of the visualization

depends on which relationship is dominant.
N. Iliinsky & J. Steele,
Designing
Visualizations, OReilly, 2011
Dr. Sabin-Corneliu
Buraga Data
User
data/info viz.
infographics
data visualization
informative
Data
persuasive
visual art
Designer
e.g., generative art

see also www.slideshare.net/busaco/generative-art-a-gentle-introduction
data visualization design

visualization modeling
Visualization
the mapping of data to visual form
that supports human interaction in a workplace
for visual sense making
Data
raw
data
Visual Form
data
tables
data
transformations
visual
structs.
visual
mappings
views
view
transformations
Human Interaction
Stuart Card, Information Visualization, Human-Computer

nd Edition), Taylor & Francis, 2008
Interaction Handbook
(2
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)
Data
raw
data
Visual Form
data
tables
data
transformations
visual
structs.
visual
mappings
views
view
transformations
Human Interaction
Raw Data data(sets) to be visualized,

available in different binary/textual formats
Data
raw
data
Visual Form
data
tables
data
transformations
visual
structs.
visual
mappings
views
view
transformations
Human Interaction
Data Transformations
provides document vectors
(normalized vectors in a N-dimensional space)
could imply different filtering operations
Data
raw
data
Visual Form
data
tables
data
transformations
visual
structs.
visual
mappings
views
view
transformations
Human Interaction
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 ofDr.variables

involved into data visualization
Sabin-Corneliu Buraga profs.info.uaic.ro/~busaco/
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
Data
raw
data
Visual Form
data
tables
data
transformations
visual
structs.
visual
mappings
views
view
transformations
Human Interaction
Visual Mappings
creating analytic abstractions to be visualized
from spatial coordinates to surfaces
on an information 2D/3D landscape
Data
raw
data
Visual Form
data
tables
data
transformations
visual
structs.
visual
mappings
views
view
transformations
Human Interaction
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
goal: the systematic mapping
of data relations onto visual form
visual encodings
could use
metaphors & idioms
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
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
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
Visual Structures
retinal properties
example: using color as visual code denoting a film genre
FilmID (Genre) P (Color)
230 (Action) P (Red)
podio.com/site/creative-routines
Visual Structures
retinal properties
position, size, orientation, color, texture, shape
aspects to be considered:
crispness, resolution, transparency, arrangement
aligned 2D positioning
unaligned 2D positioning
accuracy of
comparisons
rendering according to value (length)
various visualization techniques

could facilitate the user perception
(Cleveland & McGill, 1984) cited by Jerzy Wieczorek (2015)
http://civilstat.com/2015/10/statistical-graphics-and-visualization-course-materials/
Visual Structures
temporal encoding
temporal data to be visualized
versus
animation mapping a variable into time
Data
raw
data
Visual Form
data
tables
data
transformations
visual
structs.
visual
mappings
views
view
transformations
Human Interaction
View Transformations
offer various views (graphical representations)
according to the user goals
Data
raw
data
Visual Form
data
tables
data
transformations
visual
structs.
visual
mappings
views
view
transformations
Human Interaction
Views
perceived by end-users
+
adjusted by graphical parameters
(position, scaling, clipping,)
Viewvalue distinction
regards how operations (transformations) are performed
at different places in the model
Viewvalue 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
case study
The Internet Map interactive visualization of

Internet domains usage based on data
provided
by Alexa http://internet-map.net/
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 (raw) data to be analyzed and visualized
discussion
aspects of interest concerning datasets:

data types
items
attributes
relations (links)
positions
grids
Tamara Munzner, Visualization Analysis & Design, PacificVis 2016

http://www.cs.ubc.ca/~tmm/talks.html
discussion

data and dataset types
tables items & attributes

graphs (networks / trees) items (nodes), links, attributes
fields grids + positions, attributes
geometry (spatial) items + positions
clusters, sets, lists items

discussion

discussion

dataset availability
static
versus
dynamic

discussion
aspects of interest regarding the attributes:

attribute types
categorical

discussion

attribute types
ordered
ordinal
quantitative
discussion

ordering direction
sequential, diverging, cyclic
Open datasets examples:
visualization
processes
Academic Torrents
http://academictorrents.com/
Awesome Public Datasets

https://github.com/caesar0301/awesome-public-datasets
Awesome JSON Datasets
https://github.com/jdorfman/awesome-json-datasets
Common Crawl
http://commoncrawl.org/the-data/
DataHub
https://datahub.io/dataset
Parse
deliver a certain structure for the datas 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
discussion
aspects of interest concerning data processing:

{ action, target }
discover distribution
compare trends
locate outliers
browse topology

discussion

actions
analyze
search (filter)
query

discussion

actions
analyze
consume
discover (explore) vs. present (explain)
produce
annotate, record, derive,
discussion
casual, social,

discussion

actions
search (filter)
How much data matters?

discussion

actions
query
identify, compare, summarize,
discussion

target
all data
attributes
network data
spatial data
discussion

target
all data
trends, outliers, features
discussion

target
attributes
one e.g., distribution
discussion

target
attributes
many dependency, correlation, similarity,
discussion

target
network data
topology + paths
discussion

target
spatial data
shape
Represent
choose a (set of) visual model(s)
discussion
aspects of interest concerning data visualization:

encode
arrange
+
map

discussion
encode
arrange
express
separate
order
align
use
discussion
encode
map
from categorical and
ordered attributes
to visual representations
color: hue, saturation
size, angle, curvature,
shape
motion
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
discussion
aspects of interest:
manipulate change, select, navigate
facet juxtapose, partition, superimpose

reduce filter, aggregate, embed

Tamara Munzner (2016)

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?
http://bl.ocks.org/mbostock
visualization taxonomy
Simple visual structures
direct reading
1-variable [X]:
lists, 1D scatterplots, pie charts, distributions, box plots,
consult 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 regions 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
perception
n-variable
[XYRn-2]: 2D retinal scatterplots
[XYZRn-1]: 3D retinal scatterplots
scatterplot of attractiveness versus age, colored by gender

OConnor & 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, OReilly, 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
case study
Here Is
http://hereistoday.com/
case study
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,
case study
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)
case study
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, visit
http://mbostock.github.io/protovis/ex/brush.html
Dr. Sabin-Corneliu
Focus + context attention-reactive
visual abstraction
data-driven methods:
filtering, selective aggregation
case study
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/
Dr. Sabin-Corneliu
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)
case study
conclusions
VOWL (Visual Notation for OWL Ontologies)

+ interactive visualization tools for desktop and Web
http://vowl.visualdataweb.org/
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
Where DoesDr.Coffee
Come
www.bizbrain.org/coffee/
Sabin-Corneliu
BuragaFrom?
case study
conclusions
How You Will Die (Nathan Yau, 2016) a visualization experiment

on life expectancy based on World Health Organization data
http://flowingdata.com/2016/01/19/how-you-will-die/
conclusions
Pragmatic advice: use proper labeling
provide explanations, legends, visual conventions, etc.
concluzii
History of Rock Music

www.svds.com/rockandroll/
conclusions
Pragmatic advice: 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
Pragmatic advice: know your audience
different types of visualizations

for different (types of) users
an example: www.improving-visualisation.org/case-studies/id=7
concluzii
3D visualization of human body (available in the Web browser)

BioDigital
Human Buraga
https://human.biodigital.com/
Dr. Sabin-Corneliu
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
resources
Edward R. Tufte, The Visual Display of Quantitative Information
(2nd Edition), Graphics Press, 2001
Nathan Yau, Visualize This, Wiley, 2011

for examples & tutorials, consult http://flowingdata.com/
Ben Fry, Visualizing Data, OReilly, 2008
T. Munzner, Visualization Analysis and Design, CRC Press, 2014

see also http://www.cs.ubc.ca/group/infovis/
Scott Murray, Interactive Data Visualization for the Web,
OReilly, 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
blog.interactivethings.com
data visualization
definitions,Dr.classification,
methods, examples
Sabin-Corneliu Buraga profs.info.uaic.ro/~busaco/
next episode:
affective factors
& persuasive technologies

An Introduction to Data Visualization

Uploaded by

Document Information

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

An Introduction to Data Visualization

Uploaded by

Copyright:

Available Formats

Master on Software Engineering :: Human-Computer Interaction