Designing with Data October 16th 10:15Webdagen 2014 Oslo, Norway

@briansuda

Data Vizualizations

Diffi

culty

Cha

rts

& G

raph

s

Info

grap

hics

Inte

ract

ive

Sim

ulat

ions

3D O

bjec

ts

User Engagement

Today's focus

0201

4

jan

feb

mar

apr

may

jun

jul

aug

sept

oct

nov

dec

w s s t t s t f m w s m

t s s w f m w s t t s t

f m m t s t t s w f m w

s t t f s w f m t s t t

s w w s m t s t f s w f

m t t s t f s w s m t s

t f f m w s m t s t f s

4111825

310172431

29162330

18152229

6132027

5121926

7142128 02

015

jan

feb

mar

apr

may

jun

jul

aug

sept

oct

nov

dec

t s s w f m w s t t s t

f m m t s t t s w f m w

s t t f s w f m t s t t

s w w s m t s t f s w f

m t t s t f s w s m t s

t f f m w s m t s t f s

w s s t t s t f m w s m

4111825

310172431

29162330

18152229

6132027

5121926

7142128

Atomic Charts

Bar Charts

100

300

200

1 2 3 4 5 6 7 8 9 10 11 12

400

Area Charts

100

300

200

1 2 3 4 5 6 7 8 9 10 11 12

400

500

700

600

800

Tree Maps

Line Charts

200,000

400,000

600,000

800,000

1,000,000

June July Aug Sept Oct Nov Dec Jan Feb

Horizon Graphs

100

300

200

1 2 3 4 5 6 7 8 9 10 11 12

400

-400

-200

-300

-100

13 14 15 16 17 18 19 20

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

100

300

200

1 2 3 4 5 6 7 8 9 10 11 12

400

-400

-200

-300

-100

13 14 15 16 17 18 19 20

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

100

300

200

1 2 3 4 5 6 7 8 9 10 11 12

400

-400

-200

-300

-100

13 14 15 16 17 18 19 20

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

100

300

200

1 2 3 4 5 6 7 8 9 10 11 12

400

-400

-200

-300

-100

13 14 15 16 17 18 19 20

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

100

300

200

1 2 3 4 5 6 7 8 9 10 11 12

400

-400

-200

-300

-100

13 14 15 16 17 18 19 20

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

100

300

200

1 2 3 4 5 6 7 8 9 10 11 12

400

-400

-200

-300

-100

13 14 15 16 17 18 19 20

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

Scatter Plots

Density

Area

00

1,000 km

30%

Matrix

Commodity

Luxury

ExpensiveIn

expe

nsiv

e

Limos and lounges

1p deals

No compeition for expensive seats!

Hard to pay for luxury with cheap

tickets

Competition

Competition

Maps

Edinburgh

Newcastle

Manchester

Cardiff LONDON

Attributes to signal changeHow do we highlight just aspect of the design?

Attributes to signal change

ColorSun Mon Tue Wed Thu Fri Sat

Attributes to signal change

SaturationSun Mon Tue Wed Thu Fri Sat

Attributes to signal change

Position2009 Q1 Q2 Q3 Q4

Attributes to signal change

Weight

0

50

25

Feb Mar Apr MayJan Jun

Attributes to signal change

Shape

0

50

25

Feb Mar Apr MayJan Jun

Attributes to signal change

Animation: Yellow Fade Technique Rotation Others...

3D

3D Charts!

Vanishing Point

3D Charts!Vanishing Point

3D Charts!

Vanishing Point

3D Charts!

3D Charts!

http://www.guardian.co.uk/technology/blog/2008/jan/21/liesdamnliesandstevejobs

Data to Ink RatioA large share of ink on a graphic should present data-information, the ink changing as the data change. Data-ink is the non-erasable core of a graphic, the non-redundant ink arranged in response to variation in the numbers represented. !

Tufte, 1983

Data to Ink Ratio

Data to ink Ratio

Data InkTotal Ink

=

Reduce!!!

Reduce!!!100

0

75

50

25

Q1 Q2 Q3 Q4

Reduce!!!

0

58

32

Q1 Q2 Q3 Q4

Reduce!!!

0

58

32

Q1 Q2 Q3 Q4

Reduce!!!

0

58

32

Q1 Q2 Q3 Q4

Reduce!!!

0

58

32

Q1 Q2 Q3 Q4

Reduce!!!

60%

40%

20%

80%

60%

40%

20%

80%

Two Camps

http://52weeksofux.com/post/963764999/chart-junk-isnt-as-

bad-as-you-think

Chart Junk isn’t as bad as you think

GetColour()

$hex = substr(md5(“13:00”),0,6);

#36b0cf

October = #eca60a

14:00 = #13a07b

Oslo = #f48304

Webdagene = #991899

Norway = #d5b929

Needs a friend

October = #eca60a

14:00 = #13a07b

Oslo = #f48304

Webdagene = #991899

Norway = #d5b929

Accessibility

Types of color blindness

Deuteranopia

Protanopia

Tritanopia

Monopoly Money

Vector vs. Raster OriginalVector

Raster

Retina High DPI

CH

ART

FO

NT

S

WEB

FO

NT

S

https://github.com/optional-is/PlayfairCharts

http://www.fivesimplesteps.com/products/creating-symbol-fonts

<SVG><SVG>

http://www.svgeneration.com

Useful Skills for Data Viz

Javascript: jQuery/Raphael

Javascript: jQuery/RaphaelHTML/CSS

Javascript: jQuery/RaphaelHTML/CSS

Excel/Spreadsheets

Javascript: jQuery/RaphaelHTML/CSS

Any Programming Language

Excel/Spreadsheets

Javascript: jQuery/RaphaelHTML/CSS

Any Programming Language

Excel/Spreadsheets

SVG

Hatching a data viz, (social) media campaign

Launch1

week before

2 weeks before

3 weeks before

4 weeks before

Blog P

ost

Shar

eable

Gra

phics

Larg

e Info

grap

hic

Mor

e tea

sers

Social Media

Social MediaKeep a Blog

Social MediaKeep a Blog

Make it Sharable

Social MediaKeep a Blog

Static to Interactive

Make it Sharable

Social MediaKeep a Blog

Static to Interactive

Make it Sharable

Update Old Content

Social MediaKeep a Blog

Static to Interactive

Make it Sharable

Tools rather than pretty

Update Old Content

Technique vs. Style

If you don't have a basis on which to make a choice, then you don't have a style at all, you have a series of accidents.

—Philip Glass

Create a style, NOT a series of accidents!

Brian Suda brian@suda.co.uk @briansudaTHANKS!