DATADESIGN

MEANING

djangoproject.com

skillsapp.com

(tweet @skillsapp for invite)

♥ VISUALIZATIONSRSLY, GUISE

DATA

?

PROFITMEANING!

acquireparsefiltermine

representrefine

interact

acquireparsefiltermine

representrefine

interact

ENGINEERING

DESIGN

DATA

?

PROFITMEANING!

VISUALIZATIONS

CHARTS

http://bit.ly/vYZgQb

21HeH

4 5 6 7 8 9 103Be B C N O F NeLi

12 13 14 15 16 17 1811Mg Al Si P S Cl ArNa

20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 3619Ca Sc Ti V Cr Mn Fe Co Ni Cu Zn Ga Ge As Se Br KrK

38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 5437AgSr Y Zr Nb Mo Tc Ru Rh Pd Cd In Sn Sb Te I XeRb

56 72 73 74 75 76 77 78 79 80 81 82 83 84 85 8655Ba Hf Ta W Re Os Ir Pt Au Hg Tl Pb Bi Po At RnCs

88 104 105 106 107 108 109 110 111 112 113 114 115 116 117 11887Sg Rg Uuq UupRa Rf Db Bh Hs Mt Ds Cn Uut Uuh Uus UuoFr

57 58 59 60 61 62 63 64 65 66 67 68 69 70 71DyLa Ce Pr Nd Pm Sm Eu Gd Tb Ho Er Tm Yb Lu

89 90 91 92 93 94 95 96 97 98 99 100 101 102 103Ac Th Pa U Np Pu Am Cm Bk Cf Es Fm Md No Lr

GroupPeriod

Lanthanides

Actinides

1

2

3

4

5

6

7

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

21HeH

4 5 6 7 8 9 103Be B C N O F NeLi

12 13 14 15 16 17 1811Mg Al Si P S Cl ArNa

20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 3619Ca Sc Ti V Cr Mn Fe Co Ni Cu Zn Ga Ge As Se Br KrK

38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 5437AgSr Y Zr Nb Mo Tc Ru Rh Pd Cd In Sn Sb Te I XeRb

56 72 73 74 75 76 77 78 79 80 81 82 83 84 85 8655Ba Hf Ta W Re Os Ir Pt Au Hg Tl Pb Bi Po At RnCs

88 104 105 106 107 108 109 110 111 112 113 114 115 116 117 11887Sg Rg Uuq UupRa Rf Db Bh Hs Mt Ds Cn Uut Uuh Uus UuoFr

57 58 59 60 61 62 63 64 65 66 67 68 69 70 71DyLa Ce Pr Nd Pm Sm Eu Gd Tb Ho Er Tm Yb Lu

89 90 91 92 93 94 95 96 97 98 99 100 101 102 103Ac Th Pa U Np Pu Am Cm Bk Cf Es Fm Md No Lr

GroupPeriod

Lanthanides

Actinides

1

2

3

4

5

6

7

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

21HeH

4 5 6 7 8 9 103Be B C N O F NeLi

12 13 14 15 16 17 1811Mg Al Si P S Cl ArNa

20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 3619Ca Sc Ti V Cr Mn Fe Co Ni Cu Zn Ga Ge As Se Br KrK

38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 5437AgSr Y Zr Nb Mo Tc Ru Rh Pd Cd In Sn Sb Te I XeRb

56 72 73 74 75 76 77 78 79 80 81 82 83 84 85 8655Ba Hf Ta W Re Os Ir Pt Au Hg Tl Pb Bi Po At RnCs

88 104 105 106 107 108 109 110 111 112 113 114 115 116 117 11887Sg Rg Uuq UupRa Rf Db Bh Hs Mt Ds Cn Uut Uuh Uus UuoFr

57 58 59 60 61 62 63 64 65 66 67 68 69 70 71DyLa Ce Pr Nd Pm Sm Eu Gd Tb Ho Er Tm Yb Lu

89 90 91 92 93 94 95 96 97 98 99 100 101 102 103Ac Th Pa U Np Pu Am Cm Bk Cf Es Fm Md No Lr

GroupPeriod

Lanthanides

Actinides

1

2

3

4

5

6

7

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

21HeH

4 5 6 7 8 9 103Be B C N O F NeLi

12 13 14 15 16 17 1811Mg Al Si P S Cl ArNa

20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 3619Ca Sc Ti V Cr Mn Fe Co Ni Cu Zn Ga Ge As Se Br KrK

38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 5437AgSr Y Zr Nb Mo Tc Ru Rh Pd Cd In Sn Sb Te I XeRb

56 72 73 74 75 76 77 78 79 80 81 82 83 84 85 8655Ba Hf Ta W Re Os Ir Pt Au Hg Tl Pb Bi Po At RnCs

88 104 105 106 107 108 109 110 111 112 113 114 115 116 117 11887Sg Rg Uuq UupRa Rf Db Bh Hs Mt Ds Cn Uut Uuh Uus UuoFr

57 58 59 60 61 62 63 64 65 66 67 68 69 70 71DyLa Ce Pr Nd Pm Sm Eu Gd Tb Ho Er Tm Yb Lu

89 90 91 92 93 94 95 96 97 98 99 100 101 102 103Ac Th Pa U Np Pu Am Cm Bk Cf Es Fm Md No Lr

GroupPeriod

Lanthanides

Actinides

1

2

3

4

5

6

7

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

21HeH

4 5 6 7 8 9 103Be B C N O F NeLi

12 13 14 15 16 17 1811Mg Al Si P S Cl ArNa

20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 3619Ca Sc Ti V Cr Mn Fe Co Ni Cu Zn Ga Ge As Se Br KrK

38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 5437AgSr Y Zr Nb Mo Tc Ru Rh Pd Cd In Sn Sb Te I XeRb

56 72 73 74 75 76 77 78 79 80 81 82 83 84 85 8655Ba Hf Ta W Re Os Ir Pt Au Hg Tl Pb Bi Po At RnCs

88 104 105 106 107 108 109 110 111 112 113 114 115 116 117 11887Sg Rg Uuq UupRa Rf Db Bh Hs Mt Ds Cn Uut Uuh Uus UuoFr

57 58 59 60 61 62 63 64 65 66 67 68 69 70 71DyLa Ce Pr Nd Pm Sm Eu Gd Tb Ho Er Tm Yb Lu

89 90 91 92 93 94 95 96 97 98 99 100 101 102 103Ac Th Pa U Np Pu Am Cm Bk Cf Es Fm Md No Lr

GroupPeriod

Lanthanides

Actinides

1

2

3

4

5

6

7

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

http://nyti.ms/z7n5Xg

I NCEPT ION

acquireparsefiltermine

representrefine

interact

ENGINEERING

DESIGN

DO NOHARM

first,

OMITNEEDLESS

DATA

OMIT

NEEDLESSthe

DATA INKto ratio

from “Designing with Data” by Brian Sudahttp://www.designingwithdata.com/

from “Designing with Data” by Brian Sudahttp://www.designingwithdata.com/

from “Designing with Data” by Brian Sudahttp://www.designingwithdata.com/

from “Designing with Data” by Brian Sudahttp://www.designingwithdata.com/

from “Designing with Data” by Brian Sudahttp://www.designingwithdata.com/

CHARTJUNK

LIES,

LIES,

STATISTICS

damn

and

2007 2008 2009 2010 2011

20%

20%

20%

20%

20%

2007 2008 2009 2010 2011

DO NOHARM

first,

VISIONf*cking

how does it work?

GESTALT PRINCIPLESof

PERCEPTION

(just google it later)

RELATIONSHIPSPROXIMITYSIMILARITYENCLOSURE

CLOSURECONTINUITYCONNECTION

PROXIMITY SIMILARITY ENCLOSURE

CONNECTION CONTINUITY CLOSURE

ANGLES

ANGLES

SHAPES

COLOR

HUE

VALUE

MS LBLUE GREEN RED

http://en.wikipedia.org/wiki/Opponent_process

http://en.wikipedia.org/wiki/Opponent_process

vs vs

http://en.wikipedia.org/wiki/Opponent_process

vs vs

DEUTERANOPIA“RED-GREEN COLORBLINDNESS”

1 IN 10 MALES

http://en.wikipedia.org/wiki/Opponent_process

vs vs

http://en.wikipedia.org/wiki/Opponent_process

vs vsvs

ACTUALLY,

http://en.wikipedia.org/wiki/Lab_color_space

vs vsvs

CIE LAB COLORSPACE

L a b

http://en.wikipedia.org/wiki/HSL_color_space

HSL HSV

HSV VHSL L

CIELAB L*

Images courtesy Wikipedia & Luc Viatour / www.Lucnix.be

COLOR SCIENCETL;DR

GETS REAL DEEP, REAL FAST

BREWER PALETTEShttp://colorbrewer2.org/

HIERARCHYestablish a visual

DE/EMPHASIS

123widgets sold

123widgets sold

normal

emphasized

de-emphasizednormal

ONCE

ONCE A DAY?or

8 / 10

NUMERALS

Early 2096 was…

Early !"#$ was…

old-style

lining

LINING FIGURESPROTIP

JUST USE THEM

1,002,9828,239,8719,242,853

proportional

tabular

%&''(&)*(*&(+)&*,%)&(-(&*.+

TOTAL

TOTAL

INTERACTIVE

MUCH MOREyou can show

data

TOO MUCHyou can show

data

NARRATIVE

READER

AUTHORdriven

NARRATIVE VISUALIZATION

http://vis.stanford.edu/files/2010-Narrative-InfoVis.pdf

TELLING STORIES WITH DATA

“THE MARTINI GLASS”figure 1

“THE MARTINI GLASS”figure 1

STARTGUIDED

NARRATIVEEXPLORE

“THE MARTINI GLASS”figure 1

WOWGUIDED

NARRATIVELEDEADD

DETAIL

“THE TWIST”

“THE INTERACTIVE SLIDESHOW”

figure 2

ABC 123 *@!

http://vis.stanford.edu/files/2010-Narrative-InfoVis.pdf

“THE DRILL-DOWN”figure 3

AUDIENCE

I NCEPT ION

I DA NCEPT IONF R O M T H E P R O D U C E R S O F P Y C O N

O HAI IM

EDWARDTUFTE

ThN y!@idangazit & htp://gazit.me

don’t be shy, come say hi!