Data Design Meaning: Brief Illustrated Guide

main goal of data visualization is to communicate information clearly and effectively through graphical means. It doesn’t mean that data visualization needs to look boring to be functional or extremely sophisticated to look beautiful. To convey ideas effectively, both aesthetic form and functionality need to go hand in hand, providing insights into a rather sparse and complex data set by communicating its key-aspects in a more intuitive way. Yet designers often fail to achieve a balance between form and function, creating gorgeous data visualizations which fail to serve their main purpose — to communicate information. Data visualization or data visualisation is a modern branch of descriptive statistics. It involves the creation and study of the visual representation of data, meaning "information that has been abstracted in some schematic form, including attributes or variables for the units of information. Do No Harm. Omit Needless Data. Gestalt Principles Of Perception. Relationships Proximity Similarity Enclosure Closure Continuity Connection. Color Science Gets Real Deep, Real Fast. Establish A Visual Hierarchy. Narrative Visualization: Telling Stories With Data

DESIGN

MEANING

skillsapp.com

(tweet @skillsapp for invite)

♥ VISUALIZATION

SRSLY, GUISE

?

PROFIT

MEANING!

acquire parse

filter mine

represent

refine

interact

parse

filter mine

?

PROFIT

MEANING!

CHARTS

http://bit.ly/vYZgQb

HeH

4 5 6 7 8 9 103

Be B C N O F NeLi

12 13 14 15 16 17 1811

Mg Al Si P S Cl ArNa

20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 3619

Ca 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 5437

Ag

Sr 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 8655

Ba 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 11887

HeH

4 5 6 7 8 9 103

Be B C N O F NeLi

12 13 14 15 16 17 1811

Mg Al Si P S Cl ArNa

20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 3619

Ca 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 5437

Ag

Sr 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 8655

Ba 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 11887

HeH

4 5 6 7 8 9 103

Be B C N O F NeLi

12 13 14 15 16 17 1811

Mg Al Si P S Cl ArNa

20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 3619

Ca 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 5437

Ag

Sr 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 8655

Ba 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 11887

HeH

4 5 6 7 8 9 103

Be B C N O F NeLi

12 13 14 15 16 17 1811

Mg Al Si P S Cl ArNa

20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 3619

Ca 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 5437

Ag

Sr 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 8655

Ba 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 11887

HeH

4 5 6 7 8 9 103

Be B C N O F NeLi

12 13 14 15 16 17 1811

Mg Al Si P S Cl ArNa

20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 3619

Ca 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 5437

Ag

Sr 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 8655

Ba 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 11887

http://nyti.ms/z7n5Xg

I N C E P T I O N

parse

filter mine

DO NO HARM

first,

OMIT NEEDLESS

DATA

OMIT NEEDLESS

the

DATA INK to ratio

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

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

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

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

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

CHARTJUNK

2007 2008 2009 2010 2011

DO NO HARM

first,

f*cking

how does it work?

PROXIMITY SIMILARITY ENCLOSURE

CLOSURE CONTINUITY CONNECTION

PROXIMITY SIMILARITY ENCLOSURE

ANGLES

SHAPES

COLOR

VALUE

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

vs vs

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

vs

ACTUALLY,

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

HSV V HSL L

CIELAB L*

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

COLOR SCIENCE

TL;DR

GETS REAL DEEP, REAL FAST

BREWER PALETTES

http://colorbrewer2.org/

establish a visual

EMPHASIS

ONCE ONCE A DAY?

or

8 / 10

NUMERALS

Early 2096 was… Early 2096 was…

old-style

lining

LINING FIGURES

PROTIP

JUST USE THEM

1,002,982 8,239,871 9,242,853

proportional

tabular

1,002,982 8,239,871 9,242,853

TOTAL

TOTAL

TER ACT IVE

MUCH MORE

you can show

data

TOO MUCH

you can show

data

NARRATIVE

READER AUTHOR

driven

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

START

GUIDED NARRATIVE

EXPLORE

“THE MARTINI GLASS”

figure 1

WOW

GUIDED NARRATIVE

LEDE

ADD DETAIL

“THE TWIST”

“THE DRILL-DOWN”

figure 3

AUDIENCE

I N C E P T I O N

I D A N C E P T I O N

F 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

EDWARD

TUFTE

ThN y!

@idangazit & htp://gazit.me don’t be shy, come say hi!