part one! biological basis of information design introduction to - - PowerPoint PPT Presentation

introduction to information graphics & data visualisation

4.5

max van kleek

(@emax)


 University of Oxford ƒor

Open Data Institute Short Course

biological basis of information design

what visualisations can do for us

purpose - what is your (specific) goal? data - what kind of data do you have? visual dimensions - representing data visually communication - deception and bad infographics

part one!

how do you choose a visual representation for data? how do you evaluate a visualisation? what are the goals of visualisation? key objectives

theory

praxis

ben shneiderman.

ben fry, MIT Media Lab/fathom.info

University of Maryland

what is the goal of

• f information design?
• 1. to help people to 


understand & think about data.

• 2. to communciate facts

framebuffer(s) display

typical computer architecture

framebuffer(s) display eye / iris / fovea retina (sensing) visual cortex (pattern detection)

v3

v1 v2

v4 v5

• ccipital lobe

parietal lobe + frontal cortex spatial orientation focus of attention eye control, perceptual fusion

visual cortex (pattern detection)

v3

v1 v2

v4 v5

• ccipital lobe

highly parallel visual processing routines

• ptimised for

purpose

serial / deliberative processing “attention- focused” access to long term memory

parietal lobe + frontal cortex spatial orientation focus of attention eye control, perceptual fusion

V1 V2 V5 V3 V4

• ccipital

lobe dorsal stream ventral stream

“where/how” pathway “what” pathway

• bject and person recognition

The Story of London's Most Terrifying Epidemic – and How it Changed Science, Cities and the Modern World.

“There was one significant anomaly - none of the monks in the adjacent monastery contracted cholera. Investigation showed that this was not an anomaly, but further evidence, for they drank only beer, which they brewed themselves.”

London Cholera Outbreak John Snow, 1854

31 Aug 1854 - 127 deaths in 3 da 10 Sept - 500 deaths End of outbreak - 616 deaths

Sir Harold Himsworth

19 May 1905 – 1 November 1993

steady state plasma glucose (response) glucose area under curve insulin area under curve

Type I Type II Type II

so how do we choose appropriate visual representations for our data?

communicate understand educate engage entertain persuade

• 1. purpose

{x1, x2, x3, x4, ... } {1, 200, 5, 6, ... }

integral

{1.0, 2.0, 1.2, 4, ... }

fixed point

...}

, , , ,

{

categorical relational

...} , , , { f(

) g( ), q( )

,

{‘a’, ‘b’, ‘12c’, ‘d’ ...}

alpha(-numeric)

{20%, 30%, 1%, 5% ...}

fractional

xi is...

understanding objective - help the user to understand 
 relationships among the elements of the set

• 2. data types

{x1, x2, x3, x4, ... } {1, 200, 5, 6, ... }

integral

{1.0, 2.0, 1.2, 4, ... }

fixed point

...}

, , , ,

{

categorical relational

...} , , , { f(

) g( ), q( )

,

{‘a’, ‘b’, ‘12c’, ‘d’ ...}

alpha(-numeric)

{20%, 30%, 1%, 5% ...}

fractional

xi is...

understanding objective - help the user to understand 
 relationships among the elements of the set

• 2. data types

4 4 9 7 4 4 9 7 7 6

0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10"

histogram

box & whisker

median (middle) extrema (whiskers) Quartiles

0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 0" 0.5" 1" 1.5" 2" 2.5" 3" 3.5" 4" 4.5" 1" 2" 3" 4" 5" 6" 7" 8" 9"

sorted

• rdering significant
• rder insignificant

0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10"

it’s probably multivariate

{x1, x2, x3, x4, ... }

so you have a dataset...

x = a1 b1 t1 a2 b2 t2

[ ]

, , a3 b3 t3 ...

if these are observations of the [same] of object(s) over time “time series” if these are observations of different things at a single point in time “population” if these are observations of different things at a different points in time “observations”

x =

understanding objective(s) :

• 1. relations among dimensions of each sample (multivariate)

• 2. relations among samples/observations (multidimensional)

0" 2" 4" 6" 8" 10" 12" 14" 16" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 0" 2" 4" 6" 8" 10" 12" 14" 16" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10"

stacked area

stacked bar

4 3 4 4 9 5 7 5 4 4 3 9 6 7 5 7 5 6 4

0" 1" 2" 3" 4" 5" 6" 7" 0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10"

scatter

0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10"

lines

relationship between dimensions each dimension’s variability

elements & their totals

???

0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10"

understanding elements clustered bar

0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 0" 2" 4" 6" 8" 10" 12" 14" 16" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10"

• 3. Visual

Dimensions

position

relative location centrality

shape colour

saturation

• pacity

size

width height

• rientation

stroke

colour
 pattern, thickness

• pacity

texture movement

juxtaposition

integral fixed point categorical relational alpha(-numeric)

• rdinals

...

visual dimension type data dimension types

position

• nly have up to 3

spatial dimensions to work with

• rientation

range-limited

symmetry properties of the geometry

pop-out

1D orientation 1D colour 2D color/

• rientation
• rientation

popouts using multiple dimensions

Using colour for continuous values

Using colour for continuous values problem 1: No natural ordering

http://www.colormunki.com/game/huetest_kiosk

Using colour for continuous values protanopia

deuteranopia

tritanopia

Protanopia affects 8% of males, 0.5% females

• f Northern European ancestry

problem 2: colour sensitivity

Using colour for continuous values problem 3: yellow is special

Using colour for continuous values problem 4: Details: overemphasised or obscured

hue ‘borders’ overemphasise small changes, hue ‘middles’ blend potentially important details

Using colour for continuous values problem 5: pop out can drown out

multivariate relational data: hierarchical tree

hyperbolic tree

treemap

multivariate relational data: hierarchical

multivariate relational data: non-hierarchical venn diagram lattice parallel sets chord diagram

aaron koblin - flight patterns

time series (animation)

time series (static) - small multiples

charles joseph minard

napoleon’s march to moscow (1869) multivariate

how many dimensions?

1) size of the army 2) advancing/retreating at each location 3) divisions 4) path taken by each 5) temperature 6) dates of waypoints

TGV

E.J. Marey La méthode graphique (1885)

Designing effective infographics is about effectively conveying or facilitating an understanding of relationships in data

• ffloading “heavy

lifting” to our trained neural circuitry

While still an art, many design principles grounded in usability can provide guidance: natural mappings, simplicity, & avoiding distortion

In conclusion

communicating through infographics:

visual + statistical sleight of hand to mislead the audience

• 1. Barchart baseline fail

• 1. Barchart baseline fail

• 2. Perspective and measurement fail

10 25 40 55 70 85 100 1960 1970 1980 1990

using area (2 dimensions) to

• 2. “Huge differences” fail

using area to represent one dimensi

Quiz: How does this fail?

Chernoff Faces

“abandon all hope ye who vieweth”

0" 5" 10" 15" 20" 25" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 0" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10"

?

0" 5" 10" 15" 20" 25" 1" 2" 3" 4" 5" 6" 7" 8" 9" 10"

“streamgraphs” : double-stacked areas of horror