Visual Design with Data

120,888 views

Published on

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

Published in: Education
21 Comments
660 Likes
Statistics
Notes
  • this is a very good and more effective slide. thanks a lot for this slide. i have a slide, you can visit this https://www.slideshare.net/bravoclipping/professional-photo-editing-services-bravo-clipping-company
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Looking for travelling partner in India. Just drop a mail in heejibeeji.com@gmail.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hey bro!!! I will share a little info, about its updated foreign film ... with high quality, easy to be .. Here -> WWW.VIDNOWMOVIES.US
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello I am so sorry for interfering with an odd comment , i just want u guys to take a little review on this site plss its mine , ooh ! sorry for my bad manner m dovadje, a blogger i run a fashion blog and also an I.T Solution services , i am a graphics artist, video editor, marketer, painter, artist, programmer, engineer(soft/hard) and lots more about computer i also build websites and also develop/manage as well , i am just a young 21yr old boy who is tying to be great with his vision i hope u all help me thanks Dovadje Dickson.(https://dovadjefashiontrends.wordpress.com/) http://viid.me/qWyAe2
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • This is the most wonderful thing i have ever experienced. I visited a forum here on the internet on the 17 October 2016, and i saw a marvelous testimonies on the forum about the good works DR ALABI. Am melody fowler from United States. I never believed it, because have never heard anything about such miracle before. No body would have been able to convince me about it not until DR ALABI did a marvelous work for me that restored my marriage of 4 years by getting back my divorced Husband within 24 to 48 hours just as i read on the internet. I was truly shocked when my Husband came home pleading for forgiveness to accept him back. Am really short of words to show my appreciation to DR ALABI for he is a God sent to me and my entire family for divine restoration of marriage. Are you in need of any help whatsoever? Don't hesitate to get in touch with him now. He also specializes on the follows; Divorce reconciliation Marriage reconciliation Business growth Promotion in your place of work/office Making banks to grants loans Cures of diseases such as; Cancer, Hiv Aids, Zika virus, Herpes Disease, Sexual Infection E.T.C. Pregnancy or Fertility spell Getting your EX/lover back Getting your wife/husband back Getting your boyfriend/girlfriend back Email: alabisolutiontemple@gmail.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
120,888
On SlideShare
0
From Embeds
0
Number of Embeds
3,588
Actions
Shares
0
Downloads
2,428
Comments
21
Likes
660
Embeds 0
No embeds

No notes for 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. AGENDA ‣ What makes good (data) design? ‣ Sparklines ‣ Creating effective charts ‣ Data viz techniques ‣ Tools beyond Google Spreadsheets 4
  5. VISUAL DESIGN WITH DATA WHAT’S GOOD (DATA) DESIGN? 5
  6. WHAT’S GOOD (DATA) DESIGN? CONSISTENT. 6 NINJA TIP: Shift-select multiple columns/rows and drag-resize to make them all the same size with a single gesture!
  7. WHAT’S GOOD (DATA) DESIGN? UNCLUTTERED. 7 NINJA TIP: Copy any formatting and past-special Format Only to carry over the formatting to many more rows or columns
  8. WHAT’S GOOD (DATA) DESIGN? MUTED COLORS. 8 NINJA TIP: Using 1-2 gradations on a single color enables endless formatting possibilities.
  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? LET’S GIVE IT A TRY! 10 visit familian1.com/vdwd
  11. 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! 7. And so on :) A cleaner spreadsheet! Google Spreadsheets 11
  12. WHAT’S GOOD (DATA) DESIGN? ROLLED-UP. 12 NINJA TIP: Copy-paste formulas in line with the start of each block you’re summarizing to ensure consistency.
  13. VISUAL DESIGN WITH DATA SPARKLINES 13
  14. SPARKLINES SPARKLINES 14 http://chandoo.org/wp/2010/05/18/excel-sparklines-tutorial/ https://support.google.com/docs/answer/3093289?hl=en
  15. SPARKLINES AREN’T THEY PERTY? 15
  16. SPARKLINES CUSTOM SPARK-
 LINES 16
  17. KEY OBJECTIVE AGENDA RESOURCESDELIVERABLE EXERCISE FOR SPARKLINES Emulate good data design. 20 mins 1. Visit http://bit.ly/ga-vdd-3 2. Find your tab 3. Add a sparkline for each column 4. Make the sparkline a spark-column In-line sparklines! Google Spreadsheets 17
  18. SPARKLINES WHAT’S POSSIBLE 18
  19. VISUAL DESIGN WITH DATA BREAK TIME! 19 ‣ Stretch your legs ‣ Hydrate or grab a snack ‣ We’ll start again in 10 mins!
  20. VISUAL DESIGN WITH DATA CREATING 
 EFFECTIVE CHARTS 20
  21. SPARKLINES + CHART AESTHETICS 21 WHICH IS BETTER? FROM
  22. SPARKLINES + CHART AESTHETICS 22 WHICH IS BETTER? FROM
  23. SPARKLINES + CHART AESTHETICS 23 WHICH IS BETTER? FROM
  24. CREATING EFFECTIVE CHARTS CHART TYPES 24 https://developers.google.com/chart/interactive/docs/gallery
  25. CREATING EFFECTIVE CHARTS 25 ANOTHER APPROACH FROM
  26. CREATING EFFECTIVE CHARTS 26 CHART ANATOMY FROM
  27. CREATING EFFECTIVE CHARTS FIELD ELEMENTS 27 https://infoactive.co/data-design/ch14.html FROM
  28. CREATING EFFECTIVE CHARTS AXIS TITLES 28 https://infoactive.co/data-design/ch14.html FROM
  29. CREATING EFFECTIVE CHARTS AXIS TITLES 29 https://infoactive.co/data-design/ch14.html FROM
  30. CREATING EFFECTIVE CHARTS 30 DON’T TRUNCATE AXES https://infoactive.co/data-design/ch18.html FROM
  31. CREATING EFFECTIVE CHARTS 31 LESS IS MORE FROM
  32. CREATING EFFECTIVE CHARTS BACK TO OUR DATA… 32
  33. CREATING EFFECTIVE CHARTS APPLYING DESIGN PRINCIPLES 33
  34. CREATING EFFECTIVE CHARTS LET’S GIVE IT A TRY! 34
  35. KEY OBJECTIVE AGENDA RESOURCESDELIVERABLE EXERCISE FOR CREATING EFFECTIVE CHARTS Create an effective chart 15 mins 1. Visit http://bit.ly/ga-vdd-3 2. Go to the tab with your name 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 35
  36. CREATING EFFECTIVE CHARTS ALTERNATIVE 
 TIME-SERIES 36
  37. CREATING EFFECTIVE CHARTS STACKED BARS 37
  38. CREATING EFFECTIVE CHARTS COMBO CHARTS 38 WITH CHARTED.CO
  39. CREATING EFFECTIVE CHARTS 39 PLOTTING ACTUALS V. PROJECTIONS
  40. VISUAL DESIGN WITH DATA DATA VIZ TECHNIQUES 40
  41. DATA VIZ TECHNIQUES NARRATIVE! 41SHIFT + CONTROL + COMMAND + 4 —> SELECT / SPACEBAR-CLICK —> PASTE
  42. DATA VIZ TECHNIQUES NARRATIVE! 42SHIFT + CONTROL + COMMAND + 4 —> SELECT / SPACEBAR-CLICK —> PASTE
  43. DATA VIZ TECHNIQUES NARRATIVE! 43 VIA MIXPANEL SCREENSHOTS
  44. DATA VIZ TECHNIQUES THE POWER OF NARRATIVE 44 HTTP://FALLEN.IO
  45. DATA VIZ TECHNIQUES SMALL MULTIPLES 45 HTTPS://PROQUESTIONASKER.GITHUB.IO/PROJECTS/MOVIEDIALOGUEINTERACTIVE
  46. DATA VIZ TECHNIQUES NESTED CHARTS + SMALL MULTIPLES 46SHIFT + CONTROL + COMMAND + 4 —> SELECT / SPACEBAR-CLICK —> PASTE
  47. DATA VIZ TECHNIQUES 2X2S 47
  48. DATA VIZ TECHNIQUES 2X2S 48 D8R8R.COM
  49. DATA VIZ TECHNIQUES SCROLLYTELLING! 49 HTTPS://PUDDING.COOL/PROCESS/HOW-TO-IMPLEMENT-SCROLLYTELLING/
  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. VISUAL DESIGN WITH DATA DATA VIZ TOOLS 52
  53. DATA VIZ TOOLS CHARTED 53 CHARTED.CO FOR SUPER SIMPLE CHARTS
  54. DATA VIZ TOOLS TAGUL 54 TAGUL.COM FOR GORGEOUS WORD CLOUDS
  55. DATA VIZ TOOLS QUID 55 QUID.COM FOR UNSTRUCTURED ANALYSIS
  56. DATA VIZ TOOLS MAPBOX 56 MAPBOX.COM FOR GEOGRAPHIC DATA
  57. DATA VIZ TOOLS MIXPANEL 57 MIXPANEL.COM FOR USER-EVENT DATA
  58. DATA VIZ TOOLS GECKOBOARD 58 GECKOBOARD.COM
  59. DATA VIZ TOOLS KLIPFOLIO 59 KLIPFOLIO.COM
  60. VISUAL DESIGN WITH DATA FINAL THOUGHTS 60
  61. FINAL THOUGHTS DATA OBESITY! 61
  62. FINAL THOUGHTS A NEW TYPE OF KNOWLEDGE WORKER 62 http://www.doclens.com/87922/think-issue-7-2014/
  63. FINAL THOUGHTS AN INCREDIBLY VALUABLE SKILL 63 https://studentforce.wordpress.com/2013/09/21/umuc-big-data-revolution-is-here/
  64. FINAL THOUGHTS DATA AS INTERFACE 64
  65. FINAL THOUGHTS 65 DATA AS INTERFACE HTTPS://PROQUESTIONASKER.GITHUB.IO/PROJECTS/MOVIEDIALOGUEINTERACTIVE
  66. FINAL THOUGHTS DATA AS INTERFACE 66 for using
  67. FINAL THOUGHTS START HERE 67 D3JS.ORG
  68. FINAL THOUGHTS OR HERE 68 C3JS.ORG
  69. FINAL THOUGHTS OR HERE 69 INFOACTIVE.CO/DATA-DESIGN
  70. HBR.ORG FINAL THOUGHTS OR HERE 70
  71. DATA VIZ TOOLS + TECHNIQUES OR HERE 71 FAMILIAN1.COM
  72. BUT MOST IMPORTANTLY… HAVE FUN! 72
  73. SURVEY TIME! VISUAL DESIGN WITH DATA 73 BECAUSE FEEDBACK IS KEY :) HEAD BACK TO familian1.com/vdwd AND SCROLL TO THE BOTTOM
  74. A BIT ABOUT ME 74MY GENERAL ASSEMBLY WORKSHOPS
  75. THANK YOU! KEEP IN TOUCH. 75 SETH@FAMILIAN1.COM · @SETHFAM1

×