Uploaded bySeth Familian
Visual Design with Data
The document outlines a workshop led by Seth Familian, focusing on visual design principles for effective data representation. Key topics include creating beautiful data tables, effective chart creation, and employing data storytelling techniques. The workshop includes hands-on exercises and resources to improve data design and visualization skills.
More Related Content
Similar to Visual Design with Data
Visual Design with Data
- 1. Seth Familian Founder +Principal, Familian&1 VISUAL DESIGN WITH DATA START HERE! familian1.com/vdwd
- 2. SETH FAMILIAN, FOUNDER+ PRINCIPAL, FAMILIAN&1 A BIT ABOUT ME 2 BUSINESS STRATEGY GROWTH HACKING PRODUCT MANAGEMENT WEB PRESENCE TEACHING + EDUCATION PROCRAFTINATION
- 3. AGENDA 3 BUILDING BEAUTIFULDATA TABLES CREATING EFFECTIVE CHARTS USING SPARKLINES + SMALL MULTIPLES DATA STORYTELLING TOOLS + TECHNIQUESINSIGHT- SCREENSHOT 2X2 MATRICES SCROLLYTELLING
- 4. VISUAL DESIGN WITHDATA WHAT’S GOOD (DATA) DESIGN? 4
- 5. WHAT’S GOOD (DATA)DESIGN? CONSISTENT. 5 NINJA TIP: Shift-select multiple columns/rows and drag-resize to make them all the same size with a single gesture!
- 6. WHAT’S GOOD (DATA)DESIGN? LET’S GIVE IT A TRY! 6 visit familian1.com/vdwd
- 7. KEY OBJECTIVE AGENDA RESOURCESDELIVERABLE EXERCISEFOR 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 7
- 8. WHAT’S GOOD (DATA)DESIGN? UNCLUTTERED. 8 NINJA TIP: Adding a “spacer” row and column at the top and left of the page makes the sheet feel more like a document.
- 9. WHAT’S GOOD (DATA)DESIGN? MUTED COLORS. 9 NINJA TIP: Using 1-2 gradations on a single color enables endless formatting possibilities.
- 10. WHAT’S GOOD (DATA)DESIGN? ROLLED-UP. 10 NINJA TIP: Pivot tables are super useful for rolling up data in powerful, flexible ways
- 11. VISUAL DESIGN WITHDATA CREATING EFFECTIVE CHARTS 11
- 12. CREATING EFFECTIVE CHARTS12 WHICH IS BETTER? FROM
- 13. CREATING EFFECTIVE CHARTS13 WHICH IS BETTER? FROM
- 14. CREATING EFFECTIVE CHARTS14 WHICH IS BETTER? FROM
- 15. CREATING EFFECTIVE CHARTS15 WHICH IS BETTER? FROM
- 16. CREATING EFFECTIVE CHARTS CHARTTYPES 16 https://developers.google.com/chart/interactive/docs/gallery
- 17. CREATING EFFECTIVE CHARTS17 ANOTHER APPROACH FROM
- 18. CREATING EFFECTIVE CHARTS18 CHART ANATOMY FROM
- 19. CREATING EFFECTIVE CHARTS FIELDELEMENTS 19 https://infoactive.co/data-design/ch14.html FROM
- 20. CREATING EFFECTIVE CHARTS AXISTITLES 20 https://infoactive.co/data-design/ch14.html FROM
- 21. CREATING EFFECTIVE CHARTS AXISTITLES 21 https://infoactive.co/data-design/ch14.html FROM
- 22. CREATING EFFECTIVE CHARTS22 DON’T TRUNCATE AXES https://infoactive.co/data-design/ch18.html FROM
- 23. CREATING EFFECTIVE CHARTS23 LESS IS MORE FROM
- 24. CREATING EFFECTIVE CHARTS BACKTO OUR DATA… 24
- 25. CREATING EFFECTIVE CHARTS APPLYINGDESIGN PRINCIPLES 25
- 26. CREATING EFFECTIVE CHARTS LET’SGIVE IT A TRY! 26
- 27. KEY OBJECTIVE AGENDA RESOURCESDELIVERABLE EXERCISEFOR 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 27
- 28. CREATING EFFECTIVE CHARTS ALTERNATIVE TIME-SERIES 28
- 29.
- 30. CREATING EFFECTIVE CHARTS COMBOCHARTS 30 WITH CHARTED.CO
- 31. CREATING EFFECTIVE CHARTS31 PLOTTING ACTUALS V. PROJECTIONS
- 32. CREATING EFFECTIVE CHARTS LET’SGIVE IT A TRY! 32
- 33. KEY OBJECTIVE AGENDA RESOURCESDELIVERABLE EXERCISEFOR CREATING EFFECTIVE CHARTS Create an effective chart 15 mins 1. Visit your copy of the exercises spreadsheet 2. Go to “6 - Projections” 3. Project the next 6 months 4. Project the following 12 months 5. Format each of the two new lines A cleaner spreadsheet! Google Spreadsheets 33
- 34. VISUAL DESIGN WITHDATA BREAK TIME! 34 ‣ Stretch your legs ‣ Hydrate or grab a snack ‣ We’ll start again in 10 mins!
- 35. VISUAL DESIGN WITHDATA SPARKLINES + SMALL MULTIPLES 35
- 36. SPARKLINES + SMALLMULTIPLES SPARKLINES 36 http://chandoo.org/wp/2010/05/18/excel-sparklines-tutorial/ https://support.google.com/docs/answer/3093289?hl=en
- 37. SPARKLINES + SMALLMULTIPLES AREN’T THEY PERTY? 37
- 38. SPARKLINES + SMALLMULTIPLES 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 + SMALLMULTIPLES WHAT’S POSSIBLE 40
- 41. VISUAL DESIGN WITHDATA 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 VIAMIXPANEL SCREENSHOTS
- 45. DATA VIZ TECHNIQUES THEPOWER OF NARRATIVE 45 HTTP://FALLEN.IO
- 46.
- 47.
- 48.
- 49. DATA VIZ TECHNIQUES SMALLMULTIPLES 49 HTTPS://PROQUESTIONASKER.GITHUB.IO/PROJECTS/MOVIEDIALOGUEINTERACTIVE
- 50. DATA VIZ TECHNIQUES NESTEDCHARTS + SMALL MULTIPLES 50SHIFT + CONTROL + COMMAND + 4 —> SELECT / SPACEBAR-CLICK —> PASTE
- 51.
- 52.
- 53. VISUAL DESIGN WITHDATA DATA VIZ TOOLS 53
- 54. DATA VIZ TOOLS CHARTED 54 CHARTED.CO FORSUPER SIMPLE CHARTS
- 55. DATA VIZ TOOLS TAGUL 55 TAGUL.COM FORGORGEOUS WORD CLOUDS
- 56. DATA VIZ TOOLS QUID 56 QUID.COM FORUNSTRUCTURED ANALYSIS
- 57. DATA VIZ TOOLS MAPBOX 57 MAPBOX.COM FORGEOGRAPHIC DATA
- 58. DATA VIZ TOOLS MIXPANEL 58 MIXPANEL.COM FORUSER-EVENT DATA
- 59.
- 60.
- 61. VISUAL DESIGN WITHDATA FINAL THOUGHTS 61
- 62.
- 63. FINAL THOUGHTS A NEWTYPE OF KNOWLEDGE WORKER 63 http://www.doclens.com/87922/think-issue-7-2014/
- 64. FINAL THOUGHTS AN INCREDIBLYVALUABLE SKILL 64 https://studentforce.wordpress.com/2013/09/21/umuc-big-data-revolution-is-here/
- 65. FINAL THOUGHTS DATA ASINTERFACE 65
- 66. FINAL THOUGHTS 66 DATAAS INTERFACE HTTPS://PROQUESTIONASKER.GITHUB.IO/PROJECTS/MOVIEDIALOGUEINTERACTIVE
- 67. FINAL THOUGHTS DATA ASINTERFACE 67 for using
- 68.
- 69.
- 70.
- 71.
- 72. DATA VIZ TOOLS+ TECHNIQUES OR HERE 72 FAMILIAN1.COM
- 73. BUT MOST IMPORTANTLY… HAVEFUN! 73
- 74. SURVEY TIME! VISUAL DESIGNWITH DATA 74 BECAUSE FEEDBACK IS KEY :) HEAD BACK TO familian1.com/vdwd AND SCROLL TO THE BOTTOM
- 75. A BIT ABOUTME 75MY GENERAL ASSEMBLY WORKSHOPS
- 76. THANK YOU! KEEP INTOUCH. 76 SETH@FAMILIAN1.COM · @SETHFAM1