Seth Familian Founder + Principal, Familian&1 VISUAL DESIGN WITH DATA START HERE! familian1.com/vdwd
BEFORE WE START SOME DATA VIZ INSPIRATION! 2 HTTP://FALLEN.IO HTTPS://WWW.THEGUARDIAN.COM/US-NEWS/NG-INTERACTIVE/2015/OCT/...
SETH FAMILIAN, FOUNDER + PRINCIPAL, FAMILIAN&1 A BIT ABOUT ME 3 BUSINESS STRATEGY GROWTH HACKING PRODUCT MANAGEMENT WEB PR...
A BIT ABOUT ME 4MY GENERAL ASSEMBLY WORKSHOPS
AGENDA ‣ What makes good (data) design? ‣ Creating effective charts ‣ Sparklines + Small Multiples ‣ Data viz techniques ‣...
VISUAL DESIGN WITH DATA WHAT’S GOOD (DATA) DESIGN? 6
WHAT’S GOOD (DATA) DESIGN? CONSISTENT. 7 NINJA TIP: Shift-select multiple columns/rows and drag-resize to make them all th...
WHAT’S GOOD (DATA) DESIGN? LET’S GIVE IT A TRY! 8 visit familian1.com/vdwd
KEY OBJECTIVE AGENDA RESOURCESDELIVERABLE EXERCISE FOR GOOD (DATA) DESIGN Emulate good data design. 10 mins 1. Visit famil...
WHAT’S GOOD (DATA) DESIGN? UNCLUTTERED. 10 NINJA TIP: Adding a “spacer” row and column at the top and left of the page mak...
WHAT’S GOOD (DATA) DESIGN? MUTED COLORS. 11 NINJA TIP: Using 1-2 gradations on a single color enables endless formatting p...
WHAT’S GOOD (DATA) DESIGN? ROLLED-UP. 12 NINJA TIP: Pivot tables are super useful for rolling up data in powerful, flexibl...
VISUAL DESIGN WITH DATA CREATING 
 EFFECTIVE CHARTS 13
CREATING EFFECTIVE CHARTS 14 WHICH IS BETTER? FROM
CREATING EFFECTIVE CHARTS 15 WHICH IS BETTER? FROM
CREATING EFFECTIVE CHARTS 16 WHICH IS BETTER? FROM
CREATING EFFECTIVE CHARTS 17 WHICH IS BETTER? FROM
CREATING EFFECTIVE CHARTS CHART TYPES 18 https://developers.google.com/chart/interactive/docs/gallery
CREATING EFFECTIVE CHARTS 19 ANOTHER APPROACH FROM
CREATING EFFECTIVE CHARTS 20 CHART ANATOMY FROM
CREATING EFFECTIVE CHARTS FIELD ELEMENTS 21 https://infoactive.co/data-design/ch14.html FROM
CREATING EFFECTIVE CHARTS AXIS TITLES 22 https://infoactive.co/data-design/ch14.html FROM
CREATING EFFECTIVE CHARTS AXIS TITLES 23 https://infoactive.co/data-design/ch14.html FROM
CREATING EFFECTIVE CHARTS 24 DON’T TRUNCATE AXES https://infoactive.co/data-design/ch18.html FROM
CREATING EFFECTIVE CHARTS 25 LESS IS MORE FROM
CREATING EFFECTIVE CHARTS BACK TO OUR DATA… 26
CREATING EFFECTIVE CHARTS APPLYING DESIGN PRINCIPLES 27
CREATING EFFECTIVE CHARTS LET’S GIVE IT A TRY! 28
KEY OBJECTIVE AGENDA RESOURCESDELIVERABLE EXERCISE FOR CREATING EFFECTIVE CHARTS Create an effective chart 15 mins 1. Visi...
CREATING EFFECTIVE CHARTS ALTERNATIVE 
 TIME-SERIES 30
CREATING EFFECTIVE CHARTS STACKED BARS 31
CREATING EFFECTIVE CHARTS COMBO CHARTS 32 WITH CHARTED.CO
CREATING EFFECTIVE CHARTS 33 PLOTTING ACTUALS V. PROJECTIONS
VISUAL DESIGN WITH DATA BREAK TIME! 34 ‣ Stretch your legs ‣ Hydrate or grab a snack ‣ We’ll start again in 10 mins!
VISUAL DESIGN WITH DATA SPARKLINES 
 + SMALL MULTIPLES 35
SPARKLINES + SMALL MULTIPLES SPARKLINES 36 http://chandoo.org/wp/2010/05/18/excel-sparklines-tutorial/ https://support.goo...
SPARKLINES + SMALL MULTIPLES AREN’T THEY PERTY? 37
SPARKLINES + SMALL MULTIPLES CUSTOM SPARK-
 LINES 38
KEY OBJECTIVE AGENDA RESOURCESDELIVERABLE SPARKLINES + SMALL MULTIPLES Emulate good data design. 20 mins 1. Visit your cop...
SPARKLINES + SMALL MULTIPLES WHAT’S POSSIBLE 40
VISUAL DESIGN WITH DATA DATA VIZ TECHNIQUES 41
DATA VIZ TECHNIQUES NARRATIVE! 42SHIFT + CONTROL + COMMAND + 4 —> SELECT / SPACEBAR-CLICK —> PASTE
DATA VIZ TECHNIQUES NARRATIVE! 43SHIFT + CONTROL + COMMAND + 4 —> SELECT / SPACEBAR-CLICK —> PASTE
DATA VIZ TECHNIQUES NARRATIVE! 44 VIA MIXPANEL SCREENSHOTS
DATA VIZ TECHNIQUES THE POWER OF NARRATIVE 45 HTTP://FALLEN.IO
DATA VIZ TECHNIQUES SMALL MULTIPLES 46 HTTPS://PROQUESTIONASKER.GITHUB.IO/PROJECTS/MOVIEDIALOGUEINTERACTIVE
DATA VIZ TECHNIQUES NESTED CHARTS + SMALL MULTIPLES 47SHIFT + CONTROL + COMMAND + 4 —> SELECT / SPACEBAR-CLICK —> PASTE
DATA VIZ TECHNIQUES 2X2S 48
DATA VIZ TECHNIQUES 2X2S 49 D8R8R.COM
DATA VIZ TECHNIQUES SCROLLYTELLING! 50 HTTPS://PUDDING.COOL/PROCESS/HOW-TO-IMPLEMENT-SCROLLYTELLING/
DATA VIZ TECHNIQUES SCROLLYTELLING! 51 HTTPS://PUDDING.COOL/PROCESS/HOW-TO-IMPLEMENT-SCROLLYTELLING/
DATA VIZ TECHNIQUES SCROLLYTELLING! 52 HTTPS://PUDDING.COOL/PROCESS/HOW-TO-IMPLEMENT-SCROLLYTELLING/
VISUAL DESIGN WITH DATA DATA VIZ TOOLS 53
DATA VIZ TOOLS CHARTED 54 CHARTED.CO FOR SUPER SIMPLE CHARTS
DATA VIZ TOOLS TAGUL 55 TAGUL.COM FOR GORGEOUS WORD CLOUDS
DATA VIZ TOOLS QUID 56 QUID.COM FOR UNSTRUCTURED ANALYSIS
DATA VIZ TOOLS MAPBOX 57 MAPBOX.COM FOR GEOGRAPHIC DATA
DATA VIZ TOOLS MIXPANEL 58 MIXPANEL.COM FOR USER-EVENT DATA
DATA VIZ TOOLS GECKOBOARD 59 GECKOBOARD.COM
DATA VIZ TOOLS KLIPFOLIO 60 KLIPFOLIO.COM
VISUAL DESIGN WITH DATA FINAL THOUGHTS 61
FINAL THOUGHTS DATA OBESITY! 62
FINAL THOUGHTS A NEW TYPE OF KNOWLEDGE WORKER 63 http://www.doclens.com/87922/think-issue-7-2014/
FINAL THOUGHTS AN INCREDIBLY VALUABLE SKILL 64 https://studentforce.wordpress.com/2013/09/21/umuc-big-data-revolution-is-h...
FINAL THOUGHTS DATA AS INTERFACE 65
FINAL THOUGHTS 66 DATA AS INTERFACE HTTPS://PROQUESTIONASKER.GITHUB.IO/PROJECTS/MOVIEDIALOGUEINTERACTIVE
FINAL THOUGHTS DATA AS INTERFACE 67 for using
FINAL THOUGHTS START HERE 68 D3JS.ORG
FINAL THOUGHTS OR HERE 69 C3JS.ORG
FINAL THOUGHTS OR HERE 70 INFOACTIVE.CO/DATA-DESIGN
HBR.ORG FINAL THOUGHTS OR HERE 71
DATA VIZ TOOLS + TECHNIQUES OR HERE 72 FAMILIAN1.COM
BUT MOST IMPORTANTLY… HAVE FUN! 73
SURVEY TIME! VISUAL DESIGN WITH DATA 74 BECAUSE FEEDBACK IS KEY :) HEAD BACK TO familian1.com/vdwd AND SCROLL TO THE BOTTOM
A BIT ABOUT ME 75MY GENERAL ASSEMBLY WORKSHOPS
THANK YOU! KEEP IN TOUCH. 76 SETH@FAMILIAN1.COM · @SETHFAM1
Próximos SlideShares
Carregando em…5
×

Visual Design with Data

280.401 visualizações

Publicada em

An immersive workshop at General Assembly, SF. I typically teach this workshop at General Assembly, San Francisco. To see a list of my upcoming classes, visit https://generalassemb.ly/instructors/seth-familian/4813

I also teach this workshop as a private lunch-and-learn or half-day immersive session for corporate clients. To learn more about pricing and availability, please contact me at http://familian1.com

Publicada em: Educação
45 comentários
1.374 gostaram
Estatísticas
Notas
no profile picture user
  • Fast, efficient and safe Online application 7 days a week and 24 hours a day Approval in 60 minutes Deposit in the same day if contract received before 11:30 (working day) Request by whatsapp available at: +33644665127 E-mail: laurenttache@outlook.fr Our website: http://pret-facile.webnode.fr/ Loans of $ 3,000 to $ 1,500,000 a Immediate assistance 7 days a week from 7am to 9pm! Financing available for used cars and motorcycles! No refund under certain conditions - Renewal available when there is 5 payment
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Fast, efficient and safe Online application 7 days a week and 24 hours a day Approval in 60 minutes Deposit in the same day if contract received before 11:30 (working day) Request by whatsapp available at: +33644665127 E-mail: laurenttache@outlook.fr Our website: http://pret-facile.webnode.fr/ Loans of $ 3,000 to $ 1,500,000 a Immediate assistance 7 days a week from 7am to 9pm! Financing available for used cars and motorcycles! No refund under certain conditions - Renewal available when there is 5 payment
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Very Nice, If you want more good Presenations on same topic visit www.ThesisScientist.com, Its a wonderful website for latest Presentations and Research
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • toptan kokoreç Türkiye kokoreç fiyatları http://www.1kokorec.com
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • great job...
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
Exibir mais
Exibir mais
Sem downloads
Visualizações
Visualizações totais
280.401
No SlideShare
0
A partir de incorporações
0
Número de incorporações
16.657
Ações
Compartilhamentos
0
Downloads
5.951
Comentários
45
Gostaram
1.374
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Visual Design with Data

  1. Seth Familian Founder + Principal, Familian&1 VISUAL DESIGN WITH DATA START HERE! familian1.com/vdwd
  2. BEFORE WE START SOME DATA VIZ INSPIRATION! 2 HTTP://FALLEN.IO HTTPS://WWW.THEGUARDIAN.COM/US-NEWS/NG-INTERACTIVE/2015/OCT/19/HOMAN-SQUARE-CHICAGO-POLICE-DETAINEES
  3. SETH FAMILIAN, FOUNDER + PRINCIPAL, FAMILIAN&1 A BIT ABOUT ME 3 BUSINESS STRATEGY GROWTH HACKING PRODUCT MANAGEMENT WEB PRESENCE TEACHING + EDUCATION PROCRAFTINATION
  4. A BIT ABOUT ME 4MY GENERAL ASSEMBLY WORKSHOPS
  5. AGENDA ‣ What makes good (data) design? ‣ Creating effective charts ‣ Sparklines + Small Multiples ‣ Data viz techniques ‣ Tools beyond Google Spreadsheets 5
  6. VISUAL DESIGN WITH DATA WHAT’S GOOD (DATA) DESIGN? 6
  7. WHAT’S GOOD (DATA) DESIGN? CONSISTENT. 7 NINJA TIP: Shift-select multiple columns/rows and drag-resize to make them all the same size with a single gesture!
  8. WHAT’S GOOD (DATA) DESIGN? LET’S GIVE IT A TRY! 8 visit familian1.com/vdwd
  9. KEY OBJECTIVE AGENDA RESOURCESDELIVERABLE EXERCISE FOR GOOD (DATA) DESIGN Emulate good data design. 10 mins 1. Visit familian1.com/vdwd 2. Click on “Visit the Exercises Spreadsheet” 3. Go to “1 - Consistent” 4. Normalize fonts, borders, and column widths 5. Go to “2 - Uncluttered” 6. Make it uncluttered! A cleaner spreadsheet! Google Spreadsheets 9
  10. WHAT’S GOOD (DATA) DESIGN? UNCLUTTERED. 10 NINJA TIP: Adding a “spacer” row and column at the top and left of the page makes the sheet feel more like a document.
  11. WHAT’S GOOD (DATA) DESIGN? MUTED COLORS. 11 NINJA TIP: Using 1-2 gradations on a single color enables endless formatting possibilities.
  12. WHAT’S GOOD (DATA) DESIGN? ROLLED-UP. 12 NINJA TIP: Pivot tables are super useful for rolling up data in powerful, flexible ways
  13. VISUAL DESIGN WITH DATA CREATING 
 EFFECTIVE CHARTS 13
  14. CREATING EFFECTIVE CHARTS 14 WHICH IS BETTER? FROM
  15. CREATING EFFECTIVE CHARTS 15 WHICH IS BETTER? FROM
  16. CREATING EFFECTIVE CHARTS 16 WHICH IS BETTER? FROM
  17. CREATING EFFECTIVE CHARTS 17 WHICH IS BETTER? FROM
  18. CREATING EFFECTIVE CHARTS CHART TYPES 18 https://developers.google.com/chart/interactive/docs/gallery
  19. CREATING EFFECTIVE CHARTS 19 ANOTHER APPROACH FROM
  20. CREATING EFFECTIVE CHARTS 20 CHART ANATOMY FROM
  21. CREATING EFFECTIVE CHARTS FIELD ELEMENTS 21 https://infoactive.co/data-design/ch14.html FROM
  22. CREATING EFFECTIVE CHARTS AXIS TITLES 22 https://infoactive.co/data-design/ch14.html FROM
  23. CREATING EFFECTIVE CHARTS AXIS TITLES 23 https://infoactive.co/data-design/ch14.html FROM
  24. CREATING EFFECTIVE CHARTS 24 DON’T TRUNCATE AXES https://infoactive.co/data-design/ch18.html FROM
  25. CREATING EFFECTIVE CHARTS 25 LESS IS MORE FROM
  26. CREATING EFFECTIVE CHARTS BACK TO OUR DATA… 26
  27. CREATING EFFECTIVE CHARTS APPLYING DESIGN PRINCIPLES 27
  28. CREATING EFFECTIVE CHARTS LET’S GIVE IT A TRY! 28
  29. KEY OBJECTIVE AGENDA RESOURCESDELIVERABLE EXERCISE FOR CREATING EFFECTIVE CHARTS Create an effective chart 15 mins 1. Visit your copy of the exercises spreadsheet 2. Go to “5 - Effective Charts” 3. Make a monthly line chart on all the data 4. Clean up the formatting + add comparisons 5. Experiment with switching chart types A cleaner spreadsheet! Google Spreadsheets 29
  30. CREATING EFFECTIVE CHARTS ALTERNATIVE 
 TIME-SERIES 30
  31. CREATING EFFECTIVE CHARTS STACKED BARS 31
  32. CREATING EFFECTIVE CHARTS COMBO CHARTS 32 WITH CHARTED.CO
  33. CREATING EFFECTIVE CHARTS 33 PLOTTING ACTUALS V. PROJECTIONS
  34. VISUAL DESIGN WITH DATA BREAK TIME! 34 ‣ Stretch your legs ‣ Hydrate or grab a snack ‣ We’ll start again in 10 mins!
  35. VISUAL DESIGN WITH DATA SPARKLINES 
 + SMALL MULTIPLES 35
  36. SPARKLINES + SMALL MULTIPLES SPARKLINES 36 http://chandoo.org/wp/2010/05/18/excel-sparklines-tutorial/ https://support.google.com/docs/answer/3093289?hl=en
  37. SPARKLINES + SMALL MULTIPLES AREN’T THEY PERTY? 37
  38. SPARKLINES + SMALL MULTIPLES CUSTOM SPARK-
 LINES 38
  39. KEY OBJECTIVE AGENDA RESOURCESDELIVERABLE SPARKLINES + SMALL MULTIPLES Emulate good data design. 20 mins 1. Visit your copy of the exercises spreadsheet 2. Go to “6 - Sparklines” 3. Add a sparkline for each column 4. Make the sparkline a spark-column In-line sparklines! Google Spreadsheets 39
  40. SPARKLINES + SMALL MULTIPLES WHAT’S POSSIBLE 40
  41. VISUAL DESIGN WITH DATA DATA VIZ TECHNIQUES 41
  42. DATA VIZ TECHNIQUES NARRATIVE! 42SHIFT + CONTROL + COMMAND + 4 —> SELECT / SPACEBAR-CLICK —> PASTE
  43. DATA VIZ TECHNIQUES NARRATIVE! 43SHIFT + CONTROL + COMMAND + 4 —> SELECT / SPACEBAR-CLICK —> PASTE
  44. DATA VIZ TECHNIQUES NARRATIVE! 44 VIA MIXPANEL SCREENSHOTS
  45. DATA VIZ TECHNIQUES THE POWER OF NARRATIVE 45 HTTP://FALLEN.IO
  46. DATA VIZ TECHNIQUES SMALL MULTIPLES 46 HTTPS://PROQUESTIONASKER.GITHUB.IO/PROJECTS/MOVIEDIALOGUEINTERACTIVE
  47. DATA VIZ TECHNIQUES NESTED CHARTS + SMALL MULTIPLES 47SHIFT + CONTROL + COMMAND + 4 —> SELECT / SPACEBAR-CLICK —> PASTE
  48. DATA VIZ TECHNIQUES 2X2S 48
  49. DATA VIZ TECHNIQUES 2X2S 49 D8R8R.COM
  50. DATA VIZ TECHNIQUES SCROLLYTELLING! 50 HTTPS://PUDDING.COOL/PROCESS/HOW-TO-IMPLEMENT-SCROLLYTELLING/
  51. DATA VIZ TECHNIQUES SCROLLYTELLING! 51 HTTPS://PUDDING.COOL/PROCESS/HOW-TO-IMPLEMENT-SCROLLYTELLING/
  52. DATA VIZ TECHNIQUES SCROLLYTELLING! 52 HTTPS://PUDDING.COOL/PROCESS/HOW-TO-IMPLEMENT-SCROLLYTELLING/
  53. VISUAL DESIGN WITH DATA DATA VIZ TOOLS 53
  54. DATA VIZ TOOLS CHARTED 54 CHARTED.CO FOR SUPER SIMPLE CHARTS
  55. DATA VIZ TOOLS TAGUL 55 TAGUL.COM FOR GORGEOUS WORD CLOUDS
  56. DATA VIZ TOOLS QUID 56 QUID.COM FOR UNSTRUCTURED ANALYSIS
  57. DATA VIZ TOOLS MAPBOX 57 MAPBOX.COM FOR GEOGRAPHIC DATA
  58. DATA VIZ TOOLS MIXPANEL 58 MIXPANEL.COM FOR USER-EVENT DATA
  59. DATA VIZ TOOLS GECKOBOARD 59 GECKOBOARD.COM
  60. DATA VIZ TOOLS KLIPFOLIO 60 KLIPFOLIO.COM
  61. VISUAL DESIGN WITH DATA FINAL THOUGHTS 61
  62. FINAL THOUGHTS DATA OBESITY! 62
  63. FINAL THOUGHTS A NEW TYPE OF KNOWLEDGE WORKER 63 http://www.doclens.com/87922/think-issue-7-2014/
  64. FINAL THOUGHTS AN INCREDIBLY VALUABLE SKILL 64 https://studentforce.wordpress.com/2013/09/21/umuc-big-data-revolution-is-here/
  65. FINAL THOUGHTS DATA AS INTERFACE 65
  66. FINAL THOUGHTS 66 DATA AS INTERFACE HTTPS://PROQUESTIONASKER.GITHUB.IO/PROJECTS/MOVIEDIALOGUEINTERACTIVE
  67. FINAL THOUGHTS DATA AS INTERFACE 67 for using
  68. FINAL THOUGHTS START HERE 68 D3JS.ORG
  69. FINAL THOUGHTS OR HERE 69 C3JS.ORG
  70. FINAL THOUGHTS OR HERE 70 INFOACTIVE.CO/DATA-DESIGN
  71. HBR.ORG FINAL THOUGHTS OR HERE 71
  72. DATA VIZ TOOLS + TECHNIQUES OR HERE 72 FAMILIAN1.COM
  73. BUT MOST IMPORTANTLY… HAVE FUN! 73
  74. SURVEY TIME! VISUAL DESIGN WITH DATA 74 BECAUSE FEEDBACK IS KEY :) HEAD BACK TO familian1.com/vdwd AND SCROLL TO THE BOTTOM
  75. A BIT ABOUT ME 75MY GENERAL ASSEMBLY WORKSHOPS
  76. THANK YOU! KEEP IN TOUCH. 76 SETH@FAMILIAN1.COM · @SETHFAM1

×