$30 off During Our Annual Pro Sale. View Details »

Data, Design, Meaning at Reversim Summit 2013

Idan Gazit
February 18, 2013

Data, Design, Meaning at Reversim Summit 2013

Idan Gazit

February 18, 2013
Tweet

More Decks by Idan Gazit

Other Decks in Design

Transcript

  1. DATA
    DESIGN
    MEANING

    View Slide

  2. djangoproject.com
    @IDANGAZIT

    View Slide

  3. co i oo !
    .io

    View Slide

  4. — VISUALIZATION
    SRSLY, GUISE

    View Slide

  5. DATA
    ?
    PROFIT
    MEANING!

    View Slide

  6. acquire
    parse
    filter
    mine
    represent
    refine
    interact

    View Slide

  7. acquire
    parse
    filter
    mine
    represent
    refine
    interact
    ENGINEERING
    DESIGN

    View Slide

  8. DATA
    ?
    PROFIT
    MEANING!

    View Slide

  9. VISUALIZATIONS
    CHARTS

    View Slide

  10. 0 0.25 0.5 0.75 1

    View Slide

  11. View Slide

  12. HTTP://FLIC.KR/P/967DVR

    View Slide

  13. http://bit.ly/vYZgQb

    View Slide

  14. 2
    1
    He
    H
    4 5 6 7 8 9 10
    3
    Be B C N O F Ne
    Li
    12 13 14 15 16 17 18
    11
    Mg Al Si P S Cl Ar
    Na
    20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
    19
    Ca Sc Ti V Cr Mn Fe Co Ni Cu Zn Ga Ge As Se Br Kr
    K
    38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
    37
    Ag
    Sr Y Zr Nb Mo Tc Ru Rh Pd Cd In Sn Sb Te I Xe
    Rb
    56 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86
    55
    Ba Hf Ta W Re Os Ir Pt Au Hg Tl Pb Bi Po At Rn
    Cs
    88 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118
    87
    Sg Rg Uuq Uup
    Ra Rf Db Bh Hs Mt Ds Cn Uut Uuh Uus Uuo
    Fr
    57 58 59 60 61 62 63 64 65 66 67 68 69 70 71
    Dy
    La 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 103
    Ac Th Pa U Np Pu Am Cm Bk Cf Es Fm Md No Lr
    Group
    Period
    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

    View Slide

  15. 2
    1
    He
    H
    4 5 6 7 8 9 10
    3
    Be B C N O F Ne
    Li
    12 13 14 15 16 17 18
    11
    Mg Al Si P S Cl Ar
    Na
    20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
    19
    Ca Sc Ti V Cr Mn Fe Co Ni Cu Zn Ga Ge As Se Br Kr
    K
    38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
    37
    Ag
    Sr Y Zr Nb Mo Tc Ru Rh Pd Cd In Sn Sb Te I Xe
    Rb
    56 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86
    55
    Ba Hf Ta W Re Os Ir Pt Au Hg Tl Pb Bi Po At Rn
    Cs
    88 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118
    87
    Sg Rg Uuq Uup
    Ra Rf Db Bh Hs Mt Ds Cn Uut Uuh Uus Uuo
    Fr
    57 58 59 60 61 62 63 64 65 66 67 68 69 70 71
    Dy
    La 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 103
    Ac Th Pa U Np Pu Am Cm Bk Cf Es Fm Md No Lr
    Group
    Period
    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

    View Slide

  16. 2
    1
    He
    H
    4 5 6 7 8 9 10
    3
    Be B C N O F Ne
    Li
    12 13 14 15 16 17 18
    11
    Mg Al Si P S Cl Ar
    Na
    20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
    19
    Ca Sc Ti V Cr Mn Fe Co Ni Cu Zn Ga Ge As Se Br Kr
    K
    38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
    37
    Ag
    Sr Y Zr Nb Mo Tc Ru Rh Pd Cd In Sn Sb Te I Xe
    Rb
    56 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86
    55
    Ba Hf Ta W Re Os Ir Pt Au Hg Tl Pb Bi Po At Rn
    Cs
    88 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118
    87
    Sg Rg Uuq Uup
    Ra Rf Db Bh Hs Mt Ds Cn Uut Uuh Uus Uuo
    Fr
    57 58 59 60 61 62 63 64 65 66 67 68 69 70 71
    Dy
    La 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 103
    Ac Th Pa U Np Pu Am Cm Bk Cf Es Fm Md No Lr
    Group
    Period
    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

    View Slide

  17. 2
    1
    He
    H
    4 5 6 7 8 9 10
    3
    Be B C N O F Ne
    Li
    12 13 14 15 16 17 18
    11
    Mg Al Si P S Cl Ar
    Na
    20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
    19
    Ca Sc Ti V Cr Mn Fe Co Ni Cu Zn Ga Ge As Se Br Kr
    K
    38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
    37
    Ag
    Sr Y Zr Nb Mo Tc Ru Rh Pd Cd In Sn Sb Te I Xe
    Rb
    56 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86
    55
    Ba Hf Ta W Re Os Ir Pt Au Hg Tl Pb Bi Po At Rn
    Cs
    88 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118
    87
    Sg Rg Uuq Uup
    Ra Rf Db Bh Hs Mt Ds Cn Uut Uuh Uus Uuo
    Fr
    57 58 59 60 61 62 63 64 65 66 67 68 69 70 71
    Dy
    La 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 103
    Ac Th Pa U Np Pu Am Cm Bk Cf Es Fm Md No Lr
    Group
    Period
    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

    View Slide

  18. http://nyti.ms/z7n5Xg

    View Slide

  19. View Slide

  20. I N C E P T I O N

    View Slide

  21. acquire
    parse
    filter
    mine
    represent
    refine
    interact
    ENGINEERING
    DESIGN

    View Slide

  22. DO NO
    HARM
    first,

    View Slide

  23. OMIT
    NEEDLESS
    DATA

    View Slide

  24. OMIT
    NEEDLESS
    the

    View Slide

  25. DATA INK
    to ratio

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  31. View Slide

  32. CHARTJUNK

    View Slide

  33. LIES,
    LIES,
    STATISTICS
    damn
    and

    View Slide

  34. 2007 2008 2009 2010 2011

    View Slide

  35. 20%
    20%
    20%
    20%
    20%
    2007 2008 2009 2010 2011

    View Slide

  36. DO NO
    HARM
    first,

    View Slide

  37. VISION
    f*cking
    how does it work?

    View Slide

  38. GESTALT PRINCIPLES
    of
    PERCEPTION
    (just google it later)

    View Slide

  39. RELATIONSHIPS
    PROXIMITY
    SIMILARITY
    ENCLOSURE
    CLOSURE
    CONTINUITY
    CONNECTION

    View Slide

  40. PROXIMITY SIMILARITY ENCLOSURE
    CONNECTION CONTINUITY CLOSURE

    View Slide

  41. ANGLES

    View Slide

  42. ANGLES

    View Slide

  43. SHAPES

    View Slide

  44. View Slide

  45. COLOR

    View Slide

  46. View Slide

  47. View Slide

  48. View Slide

  49. HUE
    VALUE

    View Slide

  50. M
    S L
    BLUE GREEN RED
    http://en.wikipedia.org/wiki/Opponent_process

    View Slide

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

    View Slide

  52. http://en.wikipedia.org/wiki/Opponent_process
    vs vs
    DEUTERANOPIA
    “RED-GREEN COLORBLINDNESS”
    1 IN 10 MALES

    View Slide

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

    View Slide

  54. http://en.wikipedia.org/wiki/Opponent_process
    vs vs
    vs
    ACTUALLY,

    View Slide

  55. http://en.wikipedia.org/wiki/Lab_color_space
    vs vs
    vs
    CIE LAB COLORSPACE
    L a b

    View Slide

  56. http://en.wikipedia.org/wiki/HSL_color_space
    HSL HSV

    View Slide

  57. HSV V
    HSL L
    CIELAB L*
    Images courtesy Wikipedia & Luc Viatour / www.Lucnix.be

    View Slide

  58. View Slide

  59. COLOR SCIENCE
    TL;DR
    GETS REAL DEEP, REAL FAST

    View Slide

  60. BREWER PALETTES
    http://colorbrewer2.org/

    View Slide

  61. View Slide

  62. HIERARCHY
    establish a visual

    View Slide

  63. DE/
    EMPHASIS

    View Slide

  64. 123
    widgets sold
    123
    widgets sold
    normal
    emphasized
    de-emphasized
    normal

    View Slide

  65. ONCE
    ONCE A DAY?
    or

    View Slide

  66. 8/10

    View Slide

  67. NUMERALS

    View Slide

  68. Early 2096 was…
    Early was…
    old-style
    lining

    View Slide

  69. 418,096
    ,
    you have
    things
    you have
    things

    View Slide

  70. LINING FIGURES
    PROTIP
    JUST USE THEM

    View Slide

  71. View Slide

  72. 1,002,982
    8,239,871
    9,242,853
    proportional
    tabular
    TOTAL
    TOTAL

    View Slide

  73. IN
    TER
    ACT
    IVE

    View Slide

  74. MUCH MORE
    you can show
    data

    View Slide

  75. TOO MUCH
    you can show
    data

    View Slide

  76. NARRATIVE

    View Slide

  77. READER
    AUTHOR
    driven

    View Slide

  78. NARRATIVE
    VISUALIZATION
    http://vis.stanford.edu/files/2010-Narrative-InfoVis.pdf
    TELLING STORIES WITH DATA

    View Slide

  79. “THE MARTINI GLASS”
    figure 1

    View Slide

  80. “THE MARTINI GLASS”
    figure 1
    START
    GUIDED
    NARRATIVE
    EXPLORE

    View Slide

  81. “THE MARTINI GLASS”
    figure 1
    WOW
    GUIDED
    NARRATIVE
    LEDE
    ADD
    DETAIL
    “THE TWIST”

    View Slide

  82. “THE INTERACTIVE
    SLIDESHOW”
    figure 2
    ABC 123 *@!
    http://vis.stanford.edu/files/2010-Narrative-InfoVis.pdf

    View Slide

  83. “THE DRILL-DOWN”
    figure 3

    View Slide

  84. AUDIENCE

    View Slide

  85. I N C E P T I O N

    View Slide

  86. I DA 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 R E V E R S I M

    View Slide

  87. O HAI IM
    EDWARD
    TUFTE

    View Slide

  88. GO
    MAKE
    THINGS
    (better)

    View Slide

  89. T H A N K S , S P O N S O R S !
    @idangazit
    short
    gazit.me
    long
    github.com/idan
    code
    Thank you!

    View Slide