Human-Computer Interaction

(1)

an introduction to data visualization

(2)

Master on Software Engineering :: Human-Computer Interaction

“Above all else show the data.”

(3)

reality

(4)

Master on Software Engineering :: Human-Computer Interaction

reality

(5)

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

(6)

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

(7)

(8)

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

”

(9)

data visualization

A process of

mapping information to visuals

(10)

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

(11)

design

data

per-

ceptuali-zation

data

visuali-zation

scientific

visuali-zation

(12)

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

(13)

data visualization

Benefits – adapted from

Card et al.

(2009):

reducing the search for information

(14)

Master on Software Engineering :: Human-Computer Interaction

data visualization

Card et al.

(2009):

enhancing the detection of patterns

(15)

data visualization

Card et al.

(2009):

encoding information in an interactive medium

(16)

Master on Software Engineering :: Human-Computer Interaction

data visualization

Card et al.

(2009):

(17)

data visualization

How Music Travels

– an animated visualization experiment

(18)

Master on Software Engineering :: Human-Computer Interaction

data visualization

Card et al.

(2009):

enabling inferences

(19)

data visualization

Card et al.

(2009):

allowing exploration of a space of parameter values

and enhancing user operations

(20)

Master on Software Engineering :: Human-Computer Interaction

data visualization

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

(21)

data visualization

Origins:

maps

used from ancient times to convey, in an abstract way,

known geographic areas + to provide orientation

later on, give insights

(22)

Master on Software Engineering :: Human-Computer Interaction

Imago Mundi

– Babilon (V Century, B.C.)

(23)

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

(24)

Master on Software Engineering :: Human-Computer Interaction

(25)

data visualization

Origins:

abstract diagrams

employs non-physical information

an early example: Playfair (1786)

(26)

Master on Software Engineering :: Human-Computer Interaction

data visualization

Origins:

visual design + data graphics



design principles of information visualization

(

infovis

)

(27)

data visualization

Origins:

statistics



exploratory (multidimensional) data analysis

(28)

Master on Software Engineering :: Human-Computer Interaction

data visualization

Origins:

scientific visualization



analytical software instruments

for scientific analysis of large datasets

McCormick & DeFanti (1987)

(29)

data visualization

Origins:

computer graphics + artificial intelligence



automatic design of visual presentations of data

(30)

Master on Software Engineering :: Human-Computer Interaction

data visualization

Origins:

human-computer interaction



new user interfaces & interactions, including animations

(31)

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

(32)

Master on Software Engineering :: Human-Computer Interaction

data visualization

“The nature of the visualization depends on which

relationship is dominant.”

(33)

data visualization

“The nature of the visualization depends on which

relationship is dominant.”

N. Iliinsky & J. Steele,

Designing Data Visualizations

,

infographics

data/info viz

(34)

(35)

visualization modeling

Visualization

the

mapping of data

to

visual form

that

supports human interaction

in a workplace

for

visual sense making

(36)

Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Stuart Card, “Information Visualization”,

Human-Computer Interaction Handbook

(2

nd

Edition),

(37)

Raw Data

unfiltered/unprocessed input data



Data Tables

suitable date structures: relations + meta-data



Visual Structures

convenient graphical elements



Views

(38)

Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Raw Data

– data(sets) to be visualized,

(39)

Data Transformations

– provides

document vectors

(normalized vectors in a

N

-dimensional space);

could imply different

filtering operations

(40)

Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Data Tables

– suitable data structures:

(41)

Data Tables

(42)

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

(43)

could be considered

as meta-data

(44)

Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Data Tables

functional (abstract) representation:

(45)

Data Tables

functional (abstract) representation:

f

(

input variables

) =

output variables

(46)

Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Data Tables

(47)

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

(48)

Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Data Tables

an

ordinal variable

O

is a tuple (ordered set)

e.g.

, film ratings <

G, PG, PG-13, R

>

(49)

Data Tables

a

quantitative variable

Q

is a numeric range

example: film duration

[0, 400]

(50)

Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Data Tables

subtypes regarding a certain nature of visualization

quantitative spatial

2D/3D spatial variables

(51)

Data Tables

subtypes regarding a certain nature of visualization

quantitative geographical

spatial variables

(52)

Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Data Tables

variable subtype concerning similarity

(53)

Data Tables

temporal variables

quantitative time

ordinal time

(54)

Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Data Tables

unstructured scale

(55)

(56)

Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Data Tables

(57)

Quantitative variables can be mapped

by data transformations into ordinal variables

film duration

[0, 400]

min.

→ <SHORT, MEDIUM, LONG>

classes of

(58)

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 >

(59)

(60)

Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Visual Mappings

– creating

analytic abstractions

to be visualized; from spatial coordinates to

(61)

Visual Structures

use a

vocabulary of visual elements

:

(62)

Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Visual Structures

goal: the systematic mapping

of data relations onto visual form

(63)

Visual Structures

spatial substrate

marks

connection

enclosure

retinal properties

temporal encoding

(64)

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

(65)

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

(66)

Master on Software Engineering :: Human-Computer Interaction

(67)

visualization modeling

Axes can be

linear

or

radial

can involve any of the various coordinate systems

for describing space

(68)

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

(69)

Visual Structures

marks

visible “things” that occur in space:

points, lines, areas, volumes

(70)

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)

(71)

(72)

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,

(73)

Visual Structures

connection & enclosure

enclosure can be used for trees, contour maps,

and Venn Diagrams

(74)

Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Visual Structures

retinal properties

position, size, orientation, color, texture, shape

crispness, resolution, transparency, arrangement

(75)

Visual Structures

retinal properties

example: using color as visual code denoting a film genre

FilmID

(

Genre

)

→

P

(

Color

)

(76)

Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Visual Structures

temporal encoding

temporal data to be visualized

versus

(77)

View Transformations

– offer various views

(78)

Master on Software Engineering :: Human-Computer Interaction

visualization modeling

Views

– perceived by end-users; adjusted by

(79)

View—value distinction

regards how operations (transformations) are performed

at different places in the model

(80)

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?

(81)

“Information visualization is about the not just creation of

visual images, but also the interaction with those images

in the service of some problem.”

(82)

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

(83)

FilmType

(

N

)

→

Position

(

Q

)

mapping from data to visual form that violates

expressiveness criterion

(84)

Master on Software Engineering :: Human-Computer Interaction

(85)

visualization processes

Acquire

Parse

Filter

Mine

Represent

Refine

Interact

(86)

Master on Software Engineering :: Human-Computer Interaction

visualization processes

Acquire

obtain the data to be analyzed and visualized

open data sources:

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

http://datahub.io/

(87)

visualization processes

Parse

deliver a certain structure for the data’s meaning,

and order it into categories

(88)

Master on Software Engineering :: Human-Computer Interaction

visualization processes

Filter

keep only the data of interest

(89)

Mine

apply methods from statistics or data mining

to discern patterns or

place the data in mathematical context

pragmatic approaches: G. Myatt, W. Johnson,

(90)

Master on Software Engineering :: Human-Computer Interaction

visualization processes

Represent

choose a (set of) visual model(s)

typical examples:

(91)

Refine

improve the basic visual representation

to make it clearer and more visually engaging

(92)

Master on Software Engineering :: Human-Computer Interaction

visualization processes

Interact

add methods for manipulating the data

or controlling what features are visible

(93)

mash-ups

Your Life on Earth

(BBC, 2014)

(94)

Master on Software Engineering :: Human-Computer Interaction

visualization processes

(95)

How about a taxonomy

of information visualization?

(96)

Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy

Simple visual structures

direct reading

1-variable [

X

]:

(97)

visualization taxonomy

(98)

Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy

direct reading

2-variable [

XY

]:

2D object charts (histograms) – for continuous values

2D scatterplots – in the case of discrete values

(99)

(100)

Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy

direct reading

3-variable

[

XYR

]: retinal scatterplots, Kohonen diagrams

[(

XY

)

Z

]: information landscapes, information surfaces

[

XYZ

]: 3D scatterplots

(101)

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

(102)

Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy

direct reading

4-variable [

XYZR

]:

(103)

a 3D visualization of tectonic topography

(context: Vrancea region’s seismicity)

(104)

Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy

articulated reading

n

-variable

[

XYR

n

-2

]: 2D retinal scatterplots

[

XYZR

n

-1

]: 3D retinal scatterplots

may present

a barrier of

perception

(105)

scatterplot of attractiveness

versus

age, colored by gender

O’Connor & Biewald, 2009

(106)

Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy

articulated reading

trees (used for hierarchical data):

node and link trees, enclosure trees, hyperbolic trees,

TreeMaps, cone trees

(107)

treemap of terms occurring in geography titles and

comments for 6 selected scene types

(108)

Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy

articulated reading

networks

(109)

Flight Patterns

– using air traffic GPS data to visualize

commercial flight patterns and density (Koblin, 2005)

(110)

Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy

articulated reading

time

aspects of interest:

discrete

vs.

continuous values

moments

vs.

intervals

(111)

articulated reading

time

typical solutions:

(112)

Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy

Definitive Daft Punk

(113)

Composed visual structures

single-axis composition [

XY

n

]:

(114)

Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy

a parallel coordinate view of a firewall log file

context:

security visualization

–

http://secviz.org/

(115)

double-axis composition [

XY

]:

graphs

(116)

Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy

recursive composition

2D in 2D [(

XY

)

XY

]:

(117)

(118)

Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy

marks in 2D [(

XY

)

R

]:

(119)

100 Years with the San Francisco Symphony

by Adobe

(120)

Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy

3D in 3D [(

XYZ

)

XYZ

]:

(121)

Interactive visual structures

dynamic queries

imagery (“magic”) lens

overview + detail

brushing and linking

extraction & comparation

(122)

Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy

(123)

brushing

performing a data selection task (

e.g.

, click/tap and drag)

linking

(124)

Master on Software Engineering :: Human-Computer Interaction

visualization taxonomy

Focus + context attention-reactive

visual abstraction

data-driven methods:

(125)

(126)

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

(127)

micro-macro readings

presenting large quantities of data at high densities

goal: to see the bigger picture

(128)

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

(129)

conclusions

Main purposes of information visualization:

exploratory visualization

discover patterns, trends, or sub-problems in a data set

explanatory visualization

(130)

Master on Software Engineering :: Human-Computer Interaction

conclusions

Web Trend Map 2007

(Information Architects)

(131)

conclusions

(132)

Master on Software Engineering :: Human-Computer Interaction

conclusions

VOWL

(

Visual Notation for OWL Ontologies

)

+ interactive visualization tools for desktop and Web

(133)

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

(134)

Master on Software Engineering :: Human-Computer Interaction

conclusions

Apply KISS principle

less detail can actually convey more information

beware of

chartjunk

(135)

conclusions

chartjunk using a large area and a lot of “ink”

(many symbols and lines)

to show only 5 hard-to-read numbers

(136)

Master on Software Engineering :: Human-Computer Interaction

conclusions

Know your audience

different types of visualizations

for different (types of) users

(137)

resources

Edward R. Tufte,

The Visual Display of Quantitative Information

(2

nd

Edition), Graphics Press, 2001

Edward R. Tufte,

Envisioning Information

, Graphics Press, 1990

Nathan Yau,

Visualize This

, Wiley, 2011

for examples & tutorials, consult

http://flowingdata.com/

Ben Fry,

Visualizing Data

, O’Reilly, 2008

Scott Murray,

Interactive Data Visualization for the Web

,

O’Reilly, 2013 –

http://chimera.labs.oreilly.com/books/1230000000345

(138)

Master on Software Engineering :: Human-Computer Interaction

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/

(139)

“Conclusion”

data visualization

definitions

classification

methods

examples

http://

bl.

oc

ks

.org/

mb

os

toc

k

(140)

Master on Software Engineering :: Human-Computer Interaction

next episode:

written test

(40 minutes, closed book exam)

http://dilbert.com/search_results?terms=user+interface