Data, Design, Meaning at Reversim Summit 2013

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