Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Infographics pt.2: „The magnificent seven“ – DO...

Tim Karsko
October 20, 2016
0
120

Infographics pt.2: „The magnificent seven“ – DOs and DON’Ts for the seven most used infographics

DOs and DON’Ts for the seven most used infographics:
„Infographics pt.2 - The Magnificent Seven“
(Refering to „Infographics pt.1 - The Good, the Bad and the Ugly“)

Or watch the Live-Presentation here:
https://www.youtube.com/watch?v=xedeUh_sfrw&list=PL0J0BguyGBjCaXZDCof2YCsNNBzGPF_Zw

Tim Karsko

October 20, 2016
Tweet

More Decks by Tim Karsko

See All by Tim Karsko
Storytelling Grundlagen: Heldenreise und Monomythos. WMFRA 103
timkarsko
0
120
Einige Dinge welche ich erst sehr spät gelernt habe
timkarsko
0
51
Storytelling 1. Akt: Heldenreise und Monomythos
timkarsko
0
54
Problems and Paradoxes in Conversation and Timetravelling Poster
timkarsko
0
77
Problems and Paradoxes in Conversation and Timetravelling
timkarsko
0
70
Infographics pt.3: „For a fistful of Dollars“ – DO's and DONT's for making presentations all by yourself
timkarsko
0
65
Infographics pt. 1: „The Good, the Bad and the Ugly“ – Good, bad and ugly examples of infographics.
timkarsko
0
130
Make Your own Pet Rock part 1: The Manual
timkarsko
0
270
Make Your own Pet Rock part 2: The Transport-Box
timkarsko
0
1.7k

Featured

See All Featured
What's new in Ruby 2.0
geeforr
343
31k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Statistics for Hackers
jakevdp
796
220k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Fireside Chat
paigeccino
34
3k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Optimizing for Happiness
mojombo
376
70k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
38
6.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Raft: Consensus for Rubyists
vanstee
136
6.6k

Transcript

  1. DOs and DON'Ts for the seven most used infographics. DO

    DON'T infographics @

  2. Tim Karsko Art and Creative Director Tim Karsko @

  3. @

  4. 1 @

  5. 1Bar Charts @

  6. Bar Charts, vertical (Columns) January 147 245 62 February March

    250 200 150 100 50 0 @

  7. Bar Charts, vertical stacked January February March 250 200 150

    100 50 0 Theme 1 Theme 2 Theme 3 Theme 4 @

  8. Bar Charts, stacked to 100% Theme 1 Theme 2 Theme

    3 Theme 4 January February March 250 200 150 100 50 0 @

  9. Theme 1 Theme 2 Theme 3 Theme 4 Bar Charts,

    horizontal The quick Brown fox Jumps over 350 330 360 200 240 260 140 190 180 80 110 70 @

  10. Use horizontal labels January February @

  11. Use horizontal labels January February January February March @

  12. Use horizontal labels January February January February March @

  13. Space bars appropriately 1/2 @

  14. Space bars appropriately 1/2 @

  15. Space bars appropriately 1/2 @

  16. Start the y-axis at value zero 50 0 @

  17. Start the y-axis at value zero 50 0 52 51

    50 @

  18. Start the y-axis at value zero 50 0 52 51

    50 @

  19. Use consistent colours @

  20. Use consistent colours / shadings @

  21. Use consistent colours / shadings @

  22. Use consistent colours / shadings @

  23. Order data appropriately Apples Bananas Lemons @

  24. Order data appropriately Apples Bananas Lemons Bananas Lemons Apples @

  25. Order data appropriately Apples Bananas Lemons Bananas Lemons Apples @

  26. 2 @

  27. 2Pie Charts @

  28. Standard Pie Chart 40+30+10+20 @

  29. Donut Pie Chart (e.g.with logo) 40+30+10+20 @ @

  30. 10 40+30+10+20 Donut Pie Chart, exploded @

  31. 10 + 20 40 30 10 Pie Chart, rose-style @

  32. Not more than 5 Categories 40+25+20+10+5 @

  33. Not more than 5 Categories 40+25+20+10+513+15+13+19+10+17+3+9+1 @

  34. Not more than 5 Categories 40+25+20+10+513+15+13+19+10+17+3+9+1 @

  35. 25+15+20+30+1040+30+15+10+5 Don't use Pie Charts to compare @

  36. 25+15+20+30+1040+30+15+10+5 Don't use Pie Charts to compare @

  37. Better practice: Bar Charts @

  38. 40+30+20+10 Data should always add to 100% 40 30 10

    20 40+30+20+10 = 100 @

  39. 40+30+20+10 40+30+20+10 Data should always add to 100% 36 40

    22 30 3 10 7 20 40+30+20+10 = 100 36+22+7+3 = 68 @

  40. 40+30+20+10 = 100 36+22+7+3 = 68 40+30+20+10 40+30+20+10 Data should

    always add to 100% 36 40 22 30 3 10 7 20 @

  41. Order the slices neatly: Top down 40+5+10+15+30 1 2 3

    5 4 @

  42. Order the slices neatly: Clockwise 40+30+15+10+51 2 3 5 4

    @

  43. Order the slices neatly 40+30+15+10+510+15+5+30+40 1 1 2 2 3

    3 5 5 4 4 @

  44. Order the slices neatly 40+30+15+10+510+15+5+30+40 1 1 2 2 3

    3 5 5 4 4 @

  45. Do not use >3D< 40+30+15+10+5 @

  46. Do not use >3D< 40+30+15+10+5 @

  47. Do not use >3D< 40+30+15+10+5 @

  48. 3 @

  49. 3Line Charts @

  50. Line Charts 5-1 5-2 5-3 5-4 5-5 5-6 5-7 150

    100 50 0 @

  51. 10 0 5 Have a zero line if possible @

  52. 15 10 5 10 0 5 Have a zero line

    if possible @

  53. Have a zero line if possible 15 10 5 10

    0 5 @

  54. Try to avoid more than four lines @

  55. Try to avoid more than four lines @

  56. Try to avoid more than four lines @

  57. Better practice... @

  58. Better practice: Splitting @

  59. Prefer solid lines @

  60. Prefer solid lines @

  61. Prefer solid lines @

  62. Except it£s printed in black&white @

  63. Except it£s printed in black&white @

  64. Label the lines directly if possible Apples Bananas Lemons @

  65. Label the lines directly if possible Apples Apples Bananas Bananas

    Lemons Lemons @

  66. Apples Apples Bananas Bananas Lemons Lemons Label the lines directly

    if possible @

  67. Use an obvious height @

  68. Use an obvious height @

  69. Use an obvious height @

  70. 4 @

  71. 4Area Charts @

  72. 60+90+50+70 30+70+50+80 10+35+15+25 Area Chart January February March April Theme

    3 Theme 2 Theme 1 @

  73. 90+70+80+100 75+50+65+55 30+25+40+25 Area Chart, stacked January February March April

    Theme 3 Theme 2 Theme 1 @

  74. 75+50+65+55 10+35+15+25 Area Chart, stacked to 100% January February March

    April Theme 3 Theme 2 Theme 1 @

  75. Make it easy to read @

  76. Make it easy to read @

  77. Make it easy to read @

  78. Start your y-axis value at 0 150 50 100 200

    0 @

  79. 150 100 50 Start your y-axis value at 0 150

    50 100 200 0 @

  80. 150 100 50 Start your y-axis value at 0 150

    50 100 200 0 @

  81. Avoid more than 4 categories @

  82. Avoid more than 4 categories @

  83. Avoid more than 4 categories @

  84. Transparent colours can help @

  85. Transparent colours can help @

  86. Transparent colours can help @

  87. Not usefull for too discrete data 500 250 0 @

  88. Not usefull for too discrete data 500 250 0 150

    50 100 200 0 @

  89. 150 50 100 200 0 Not usefull for too discrete

    data 500 250 0 @

  90. 5 @

  91. 5 Scatter Plots @

  92. Scatter Plots 50 40 30 20 10 1 2 3

    4 5 6 7 8 9 10 11 0 Theme 3 Theme 2 Theme 1 @

  93. Start the y-axis value at 0 50 40 30 20

    10 1 2 3 4 5 0 @

  94. Start the y-axis value at 0 50 70 40 60

    30 20 1 2 3 4 5 50 40 30 20 10 1 2 3 4 5 0 @

  95. Start the y-axis value at 0 50 70 40 60

    30 20 1 2 3 4 5 50 40 30 20 10 1 2 3 4 5 0 @

  96. 50 40 30 20 10 1 2 3 4 5

    0 Include more variables @

  97. 50 40 30 20 10 1 2 3 4 5

    0 50 40 30 20 10 1 2 3 4 5 0 Include more variables (e.g. size) @

  98. 50 40 30 20 10 1 2 3 4 5

    0 Trend lines can be usefull @

  99. 50 40 30 20 10 1 2 3 4 5

    0 50 40 30 20 10 1 2 3 4 5 0 Trend lines can be usefull @

  100. Not more than three for comparing 50 40 30 20

    10 1 2 3 4 5 0 @

  101. Not more than three for comparing 50 40 30 20

    10 1 2 3 4 5 0 50 40 30 20 10 1 2 3 4 5 0 @

  102. Not more than three for comparing 50 40 30 20

    10 1 2 3 4 5 0 50 40 30 20 10 1 2 3 4 5 0 @

  103. 6 @

  104. 6 Bubble Charts @

  105. 50 40 30 20 10 1 2 3 4 5

    6 7 8 9 10 11 0 Theme 3 Theme 2 Theme 1 Bubble Plot Chart @

  106. Bubble Map Chart Theme 3 Theme 2 Theme 1 @

  107. Take care of correct proportions 1x 2x @

  108. Take care of correct proportions 1x 1x 2x 2x @

  109. Take care of correct proportions 1x 1x 2x 2x @

  110. 5 4 3 2 1 0 € € € €

    € € € Don't use weird shapes @

  111. Don't use weird shapes 5 4 3 2 1 0

    € € € € € € € 5 4 3 2 1 0 @

  112. 5 4 3 2 1 0 € € € €

    € € € 5 4 3 2 1 0 Don't use weird shapes @

  113. 7 @

  114. 7 Heat Maps @

  115. Heat Map Theme 1 Theme 2 Theme 3 Theme 4

    @

  116. Heated Tree-Map @

  117. Heated Grid @

  118. Heated Periodic Table @

  119. NW BB BE ST TH HE NI HB SH HH

    MV SN BY BW RP SA Use simple map outlines & colours @

  120. Use simple map outlines & colours NW BB BE ST

    TH HE NI HB SH HH MV SN BY BW RP SA @

  121. Use simple map outlines & colours NW BB BE ST

    TH HE NI HB SH HH MV SN BY BW RP SA @

  122. Chose colours appropriately @

  123. Chose colours appropriately @

  124. Chose colours appropriately @

  125. Choose appropriate data ranges 75-81 81-82 82-89 90+ @

  126. Choose appropriate data ranges 75-76 75-81 77-78 81-82 79-80 82-89

    81+ 90+ @

  127. Choose appropriate data ranges 75-76 75-81 77-78 81-82 79-80 82-89

    81+ 90+ @

  128. Don't overuse patterns @

  129. Don't overuse patterns @

  130. Don't overuse patterns @

  131. @

  132. DOs @

  133. > Do use as few colours as possible and sensefull

    @

  134. > Do use as few colours as possible and sensefull

    > Do order your data sets in logical heirarchy @

  135. > Do use as few colours as possible and sensefull

    > Do order your data sets in logical heirarchy > Visualize your data to be easy to read and compare @

  136. > Do use as few colours as possible and sensefull

    > Do order your data sets in logical heirarchy > Visualize your data to be easy to read and compare > Use icons instead of labels @

  137. DON'Ts @

  138. > Do not use high contrast colours like blue vs.

    yellow etc. @

  139. > Do not use high contrast colours like blue vs.

    yellow etc. > Do not use 3D Charts because they screw up perception @

  140. > Do not use high contrast colours like blue vs.

    yellow etc. > Do not use 3D Charts because they screw up perception > Do not use more than 6 colours @

  141. > Do not use high contrast colours like blue vs.

    yellow etc. > Do not use 3D Charts because they screw up perception > Do not use more than 6 colours > Do not use distracting Fonts and Elements (italic, underlined ...) @

  142. > Do not use high contrast colours like blue vs.

    yellow etc. > Do not use 3D Charts because they screw up perception > Do not use more than 6 colours > Do not use distracting Fonts and Elements (italic, underlined ...) @

  143. > Do not use high contrast colours like blue vs.

    yellow etc. > Do not use 3D Charts because they screw up perception > Do not use more than 6 colours > Do not use distracting Fonts and Elements (italic, underlined ...) @

  144. > Do not use high contrast colours like blue vs.

    yellow etc. > Do not use 3D Charts because they screw up perception > Do not use more than 6 colours > Do not use distracting Fonts and Elements (italic, underlined ...) @

  145. > Do not use high contrast colours like blue vs.

    yellow etc. > Do not use 3D Charts because they screw up perception > Do not use more than 6 colours > Do not use distracting Fonts and Elements (italic, underlined ...) @

  146. > Do not use high contrast colours like blue vs.

    yellow etc. > Do not use 3D Charts because they screw up perception > Do not use more than 6 colours > Do not use distracting Fonts and Elements (italic, underlined ...) @

  147. @

  148. @

  149. End of part 2 t.b.c. ... @

  150. Find the first part of this presentation @

  151. >The Good, the Bad and the Ugly< @

  152. here: @

  153. Or if you like to watch and listen... @

  154. here: Search for: @

  155. [DataVizRM#1] >The good, the bad and the Ugly< @

  156. Thank you :) @

  157. All Rights are Free OR situated by the authors @