Master on Software Engineering :: Human-Computer Interaction

Human-Computer Interaction

an introduction to data visualization

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

“Above all else show the data.”

Edward R. Tufte

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

Master on Software Engineering :: Human-Computer Interaction

reality

Data is no longer scarce

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

Master on Software Engineering :: Human-Computer Interaction

reality
Data is no longer scarce

[Link]
Dr. Sabin-Corneliu Buraga – [Link]/net/busaco
 Master on Software Engineering :: Human-Computer Interaction

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 [Link]/intro/a-thousand-words/

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

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

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

What information visualization means?

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco
 Master on Software Engineering :: Human-Computer Interaction

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

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

data visualization
A process of mapping information to visuals

“data visualization is expert storytelling” (Murray, 2013)

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

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

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

Master on Software Engineering :: Human-Computer Interaction

informa-
tion
design
data per-
ceptuali-
zation
data
visuali-
zation

scientific
visuali-
zation

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

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 – [Link]

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco
 Master on Software Engineering :: Human-Computer Interaction

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

reducing the search for information

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

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

enhancing the detection of patterns

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

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

encoding information in an interactive medium

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

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

monitoring of data/information/knowledge evolution

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

data visualization

How Music Travels – an animated visualization experiment

[Link]

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction
Benefits – adapted from Card et al. (2009):

enabling inferences
data visualization

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

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

allowing exploration of a space of parameter values

and enhancing user operations

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

data visualization

see Hans Rolins, “New insights on poverty”, TED 2007

[Link]/talks/hans_rosling_reveals_new_insights_on_poverty

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

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

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

Imago Mundi – Babilon (V Century, B.C.)

[Link]/[Link]
imagesDr. provided by Wikimedia Commons
Sabin-Corneliu Buraga – [Link]/net/busaco
 Master on Software Engineering :: Human-Computer Interaction

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

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

data visualization

Newton’s optics illustration – reported by Robin (1992)

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco
 Master on Software Engineering :: Human-Computer Interaction

data visualization
Origins:

abstract diagrams

employs non-physical information

an early example: Playfair (1786)

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

data visualization
Origins:

visual design + data graphics


design principles of information visualization (infovis)

Edward Tufte (1983, 1990, 1997)

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

data visualization
Origins:

statistics

exploratory (multidimensional) data analysis

Tukey (1977), Cleveland & McGill (1988)

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

data visualization
Origins:

scientific visualization

analytical software instruments
for scientific analysis of large datasets

McCormick & DeFanti (1987)

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

data visualization
Origins:

computer graphics + artificial intelligence


automatic design of visual presentations of data

Mackinlay (1986), Roth & Mattis (1990), Casner (1991)

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

data visualization
Origins:

human-computer interaction

new user interfaces & interactions, including animations

Robertson, Card & Mackinlay (1989), Shneiderman (1992)

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

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

[Link]

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

data visualization

“The nature of the visualization depends on which

relationship is dominant.”
N. Iliinsky & J. Steele, Designing Data Visualizations,
O’Reilly, 2011
Dr. Sabin-Corneliu Buraga – [Link]/net/busaco
 Master on Software Engineering :: Human-Computer Interaction

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
Dr. Sabin-Corneliu Buraga – [Link]/net/busaco
 Master on Software Engineering :: Human-Computer Interaction

Design of the data visualizations

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco
 Master on Software Engineering :: Human-Computer Interaction

visualization modeling
Visualization

the mapping of data to visual form

that supports human interaction in a workplace
for visual sense making

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Stuart Card, “Information Visualization”,

Human-Computer Interaction Handbook (2nd Edition),
Taylor & Francis, 2008
Dr. Sabin-Corneliu Buraga – [Link]/net/busaco
 Master on Software Engineering :: Human-Computer Interaction

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)

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Raw Data – data(sets) to be visualized,

available in different – binary/textual – formats

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Data Transformations – provides document vectors

(normalized vectors in a N-dimensional space);
could imply different filtering operations
Dr. Sabin-Corneliu Buraga – [Link]/net/busaco
 Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Data Tables – suitable data structures:

relations (depending on considered variables) + meta-data

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Data Tables

tables of objects + their attributes

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

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

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization modeling

could be considered
as meta-data
Dr. Sabin-Corneliu Buraga – [Link]/net/busaco
 Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Data Tables

functional (abstract) representation:

f (input variables) = output variables

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Data Tables

functional (abstract) representation:

f (input variables) = output variables

Year (FilmID = 540) ≡ 1926

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Data Tables

variables implies a scale of measurement

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

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

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

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

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

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

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Data Tables

subtypes regarding a certain nature of visualization

quantitative spatial
2D/3D spatial variables
commonly used in scientific visualization

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Data Tables

subtypes regarding a certain nature of visualization

quantitative geographical
spatial variables
that specifically represent geophysical coordinates

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Data Tables

variable subtype concerning similarity

quantitative similarity

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Data Tables

temporal variables

quantitative time
ordinal time

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Data Tables

variables implies a scale of measurement

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

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization modeling

main classes of [Link] involved into data visualization

Sabin-Corneliu Buraga – [Link]/net/busaco
 Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Data Tables

various scale types can be altered by transformations

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Quantitative variables can be mapped

by data transformations into ordinal variables

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

classes of
values

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Nominal variables can be transformed to ordinal values

film titles { Star Wars, Brazil, The Wall }

→ < The Wall, Star Wars, Brazil >

sorting

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Visual Mappings – creating analytic abstractions

to be visualized; from spatial coordinates to
surfaces on an information 2D/3D landscape
Dr. Sabin-Corneliu Buraga – [Link]/net/busaco
 Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Visual Structures
use a vocabulary of visual elements:
spatial substrates + marks + graphical properties
Dr. Sabin-Corneliu Buraga – [Link]/net/busaco
 Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Visual Structures

goal: the systematic mapping

of data relations onto visual form
visual encodings

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Visual Structures

spatial substrate
marks
connection
enclosure
retinal properties
temporal encoding

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

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

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization modeling

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

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Axes can be linear or radial

can involve any of the various coordinate systems

for describing space

a common approach: Cartesian coordinates

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

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

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Visual Structures

marks

visible “things” that occur in space:

points, lines, areas, volumes

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization modeling

types of marks
(in this case, point & line marks take up space
and may have properties such as shape)
Dr. Sabin-Corneliu Buraga – [Link]/net/busaco
 Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

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

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Visual Structures

connection & enclosure

enclosure can be used for trees, contour maps,

and Venn Diagrams

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Visual Structures

retinal properties

position, size, orientation, color, texture, shape

crispness, resolution, transparency, arrangement

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Visual Structures

retinal properties

example: using color as visual code denoting a film genre

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

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Visual Structures

temporal encoding

temporal data to be visualized

versus
animation – mapping a variable into time

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization modeling

View Transformations – offer various views

(graphical representations) according to the user goals

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Views – perceived by end-users; adjusted by

graphical parameters (position, scaling, clipping,…)

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization modeling
View—value distinction

regards how operations (transformations) are performed

at different places in the model

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

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?

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

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

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

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

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization modeling

FilmType (N) → Position (Q)

mapping from data to visual form that violates
expressiveness criterion
Dr. Sabin-Corneliu Buraga – [Link]/net/busaco
 Master on Software Engineering :: Human-Computer Interaction

How about the processes

concerning data visualization?
Dr. Sabin-Corneliu Buraga – [Link]/net/busaco
 Master on Software Engineering :: Human-Computer Interaction

visualization processes
Acquire
Parse
Filter
Mine
Represent
Refine
Interact
according to Ben Fry, 2008
Dr. Sabin-Corneliu Buraga – [Link]/net/busaco
 Master on Software Engineering :: Human-Computer Interaction

visualization processes
Acquire

obtain the data to be analyzed and visualized

open data sources:

[Link]
[Link]

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization processes
Parse

deliver a certain structure for the data’s meaning,

and order it into categories

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization processes
Filter

keep only the data of interest

could also imply noise reduction

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

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

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization processes
Represent

choose a (set of) visual model(s)

typical examples:
using data charts – e.g., bar graph, list, tree,…

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization processes
Refine

improve the basic visual representation

to make it clearer and more visually engaging

applying techniques of perceptual optimization

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization processes
Interact

add methods for manipulating the data

or controlling what features are visible

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction
case study

mash-ups

Your Life on Earth (BBC, 2014)

[Link]/earth/story/20141016-your-life-on-earth

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization processes

adopting an iterative approach (Fry, 2008)

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

How about a taxonomy

of information visualization?

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy
Simple visual structures

direct reading

1-variable [X]:
lists, 1D scatterplots, pie charts, distributions, box plots,…

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy

see also [Link]

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco
 Master on Software Engineering :: Human-Computer Interaction

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

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

various examples: [Link]

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco
 Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy
Simple visual structures

direct reading

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

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy

retinal scatterplot – here, a heat map

[Link]

visualizing user-behavior (Y) over time (X); color (retinal

variable R) is used to indicate the intensity of the activity
Dr. Sabin-Corneliu Buraga – [Link]/net/busaco
 Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy
Simple visual structures

direct reading

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

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

a 3D visualization of tectonic topography

(context: Vrancea region’s seismicity)
[Link]/3-the-natural-laboratory-concept/3-1-within-the-orogen/3-1-2-implications-for-the-natural-hazards

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy
Simple visual structures

articulated reading may present

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

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy

scatterplot of attractiveness versus age, colored by gender

O’Connor & Biewald, 2009
Dr. Sabin-Corneliu Buraga – [Link]/net/busaco
 Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy
Simple visual structures

articulated reading

trees (used for hierarchical data):

node and link trees, enclosure trees, hyperbolic trees,
TreeMaps, cone trees

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

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

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco
 Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy
Simple visual structures

articulated reading

networks

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy

Flight Patterns – using air traffic GPS data to visualize

commercial flight patterns and density (Koblin, 2005)
[Link]/work/flightpatterns/
see also [Link]
Dr. Sabin-Corneliu Buraga – [Link]/net/busaco
 Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy
Simple visual structures

articulated reading

time

aspects of interest:
discrete vs. continuous values
moments vs. intervals

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy
Simple visual structures

articulated reading

time

typical solutions:
calendar, timeline, alternative views

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy

Definitive Daft Punk

[Link]
Dr. Sabin-Corneliu Buraga – [Link]/net/busaco
 Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy
Composed visual structures

single-axis composition [XYn]:

permutation matrices, parallel coordinates

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy

a parallel coordinate view of a firewall log file

context: security visualization – [Link]
Dr. Sabin-Corneliu Buraga – [Link]/net/busaco
 Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy
Composed visual structures

double-axis composition [XY]:

graphs

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy
Composed visual structures

recursive composition

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

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy

organizing all of pairwise correlation information

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco
 Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy
Composed visual structures

recursive composition

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

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy

100 Years with the San Francisco Symphony by Adobe

[Link]
Dr. Sabin-Corneliu Buraga – [Link]/net/busaco
 Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy
Composed visual structures

recursive composition

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

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy
Interactive visual structures

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

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy

Poem Viewer – imagery lens for visualizing corpora

[Link]
Dr. Sabin-Corneliu Buraga – [Link]/net/busaco
 Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy

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, [Link]://[Link]/protovis/ex/[Link]
Sabin-Corneliu Buraga – [Link]/net/busaco
 Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy
Focus + context attention-reactive
visual abstraction

data-driven methods:
filtering, selective aggregation

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy

Gapminder World – [Link]

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco
 Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy
Focus + context attention-reactive
visual abstraction

view-based methods:
micro-macro readings, highlighting, visual transfer
functions, perspective distortion, alternate geometries

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy

micro-macro readings
presenting large quantities of data at high densities
goal: to see the bigger picture
[Link]
Dr. Sabin-Corneliu Buraga – [Link]/net/busaco
 Master on Software Engineering :: Human-Computer Interaction

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

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

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

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction
case study

conclusions

Web Trend Map 2007 (Information Architects)

[Link]
Dr. Sabin-Corneliu Buraga – [Link]/net/busaco
 Master on Software Engineering :: Human-Computer Interaction
case study

conclusions

Food Poisoning Outbreaks (Ruslan Kamolov, 2015)

[Link]
Dr. Sabin-Corneliu Buraga – [Link]/net/busaco
 Master on Software Engineering :: Human-Computer Interaction
case study

conclusions

VOWL (Visual Notation for OWL Ontologies)

+ interactive visualization tools for desktop and Web
[Link]
Dr. Sabin-Corneliu Buraga – [Link]/net/busaco
 Master on Software Engineering :: Human-Computer Interaction

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

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

conclusions
Apply KISS principle

less detail can actually convey more information

beware of chartjunk
Tufte (1983)

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

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: [Link]

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco
 Master on Software Engineering :: Human-Computer Interaction

conclusions
Know your audience

different types of visualizations

for different (types of) users

an example: [Link]/case-studies/id=7

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

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 [Link]
Ben Fry, Visualizing Data, O’Reilly, 2008
Scott Murray, Interactive Data Visualization for the Web,
O’Reilly, 2013 – [Link]

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco

 Master on Software Engineering :: Human-Computer Interaction

online resources
WikiViz – techniques, tools, examples: [Link]
Data + Design – [Link]
Resources for data visualization and interactive
exploration (curated by S. Negru): [Link]
Information is Beautiful – [Link]
Data Visualization – [Link]
References for Visualizing Uncertainty: [Link]
Dr. Sabin-Corneliu Buraga – [Link]/net/busaco
 Master on Software Engineering :: Human-Computer Interaction

“Conclusion”

[Link]
data visualization
definitions
classification
methods
examples
Dr. Sabin-Corneliu Buraga – [Link]/net/busaco
 Master on Software Engineering :: Human-Computer Interaction

[Link]

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

Dr. Sabin-Corneliu Buraga – [Link]/net/busaco