Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads.
Seth Familian
Founder + Principal, Familian&1
VISUAL DESIGN
WITH DATA
START HERE!
familian1.com/vdwd
SETH FAMILIAN, FOUNDER + PRINCIPAL, FAMILIAN&1
A BIT ABOUT ME 2
BUSINESS STRATEGY
GROWTH HACKING
PRODUCT MANAGEMENT WEB PR...
AGENDA 3
BUILDING BEAUTIFUL DATA TABLES
CREATING EFFECTIVE CHARTS
USING SPARKLINES
+ SMALL MULTIPLES
DATA STORYTELLING
TOO...
VISUAL DESIGN WITH DATA
WHAT’S GOOD
(DATA) DESIGN?
4
WHAT’S GOOD (DATA) DESIGN?
CONSISTENT.
5
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!
6
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.
8
NINJA TIP:
Adding a “spacer”
row and column at
the top and left of the
page make...
WHAT’S GOOD (DATA) DESIGN?
MUTED COLORS.
9
NINJA TIP:
Using 1-2 gradations
on a single color
enables endless
formatting
po...
WHAT’S GOOD (DATA) DESIGN?
ROLLED-UP.
10
NINJA TIP:
Pivot tables are
super useful for
rolling up data in
powerful, flexibl...
VISUAL DESIGN WITH DATA
CREATING 

EFFECTIVE CHARTS
11
CREATING EFFECTIVE CHARTS 12
WHICH IS BETTER?
FROM
CREATING EFFECTIVE CHARTS 13
WHICH IS BETTER?
FROM
CREATING EFFECTIVE CHARTS 14
WHICH IS BETTER?
FROM
CREATING EFFECTIVE CHARTS 15
WHICH IS BETTER?
FROM
CREATING EFFECTIVE CHARTS
CHART TYPES
16
https://developers.google.com/chart/interactive/docs/gallery
CREATING EFFECTIVE CHARTS 17
ANOTHER APPROACH
FROM
CREATING EFFECTIVE CHARTS 18
CHART ANATOMY
FROM
CREATING EFFECTIVE CHARTS
FIELD ELEMENTS
19
https://infoactive.co/data-design/ch14.html
FROM
CREATING EFFECTIVE CHARTS
AXIS TITLES
20
https://infoactive.co/data-design/ch14.html
FROM
CREATING EFFECTIVE CHARTS
AXIS TITLES
21
https://infoactive.co/data-design/ch14.html
FROM
CREATING EFFECTIVE CHARTS 22
DON’T TRUNCATE AXES
https://infoactive.co/data-design/ch18.html
FROM
CREATING EFFECTIVE CHARTS 23
LESS IS MORE
FROM
CREATING EFFECTIVE CHARTS
BACK TO OUR DATA…
24
CREATING EFFECTIVE CHARTS
APPLYING DESIGN
PRINCIPLES
25
CREATING EFFECTIVE CHARTS
LET’S GIVE IT A TRY!
26
KEY OBJECTIVE AGENDA
RESOURCESDELIVERABLE
EXERCISE FOR CREATING EFFECTIVE CHARTS
Create an effective chart 15 mins 1. Visi...
CREATING EFFECTIVE CHARTS
ALTERNATIVE 

TIME-SERIES
28
CREATING EFFECTIVE CHARTS
STACKED BARS
29
CREATING EFFECTIVE CHARTS
COMBO CHARTS
30
WITH CHARTED.CO
CREATING EFFECTIVE CHARTS 31
PLOTTING ACTUALS V. PROJECTIONS
CREATING EFFECTIVE CHARTS
LET’S GIVE IT A TRY!
32
KEY OBJECTIVE AGENDA
RESOURCESDELIVERABLE
EXERCISE FOR CREATING EFFECTIVE CHARTS
Create an effective chart 15 mins 1. Visi...
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
SCROLLYTELLING!
46
HTTPS://PUDDING.COOL/PROCESS/HOW-TO-IMPLEMENT-SCROLLYTELLING/
DATA VIZ TECHNIQUES
SCROLLYTELLING!
47
HTTPS://PUDDING.COOL/PROCESS/HOW-TO-IMPLEMENT-SCROLLYTELLING/
DATA VIZ TECHNIQUES
SCROLLYTELLING!
48
HTTPS://PUDDING.COOL/PROCESS/HOW-TO-IMPLEMENT-SCROLLYTELLING/
DATA VIZ TECHNIQUES
SMALL MULTIPLES
49
HTTPS://PROQUESTIONASKER.GITHUB.IO/PROJECTS/MOVIEDIALOGUEINTERACTIVE
DATA VIZ TECHNIQUES
NESTED CHARTS + SMALL MULTIPLES
50SHIFT + CONTROL + COMMAND + 4 —> SELECT / SPACEBAR-CLICK —> PASTE
DATA VIZ TECHNIQUES
2X2S
51
DATA VIZ TECHNIQUES
2X2S
52
D8R8R.COM
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
Upcoming SlideShare
Loading in …5
×

Visual Design with Data

1,073,592 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: Data & Analytics
  • Hey, you can make a lot of money there https://bit.ly/2zWyPik
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • This is the process I went through to get back my online lover who is now my husband to be. Note: I got him back through Dr. Wakina love spell by virtue of [email protected] HERE IS HOW IT STARTED: I said to Dr. Wakina; Sir, I humbly asked for help in uniting with my online lover, we broke up five months ago. I am writing to you as I have witnessed how your love spell helped my colleague soothe her broken relationship. Two years ago, I met an amazing man online via twitter, we bonded within weeks like we have known each other for long even though we were thousands of miles apart. We often talk on the phone, texting and emailing. When it was our next step to meet in person and see if there was truly the spark of love we were both feeling deeply. I received a breakup text, he explained how it is difficult for him to move on without his ex-wife. I was heartbroken because I thought I have found the man of my dream. Can you help me? HERE IS HOW IT ENDS: Dr. Waking revived my hope when I was told that He is my husband and future but He needs to be untied with his past by breaking the bonds of affliction with his ex. My colleague’s breakthrough brought everlasting joy to me, I could not have heard of love spell or Dr. Wakina. APPRECIATION: Why I am happy to share this breakthrough testimony is because the spell worked according to his will and purpose, he is right here with me happy and loving, we are currently planning on getting married. I will always appreciate the opportunity given to me to reconnect with my lover by Dr. Wakina, I have confirmed that we are meant to be forever.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Free Website For Your business in 7 Hours https://bit.ly/2FEUzzg
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • As ­k­At­hry­n ­ex­p­l­A­i­n­e­d ­i'­m ­i­m­pr­ess­e­d t­h­At s­o­m­e ­o­n­e ­A­b­l­e t­o ­g­et ­p­A­i­d $4027 ­i­n 1 ­m­o­nt­h o­n t­h­e ­c­o­m­put­er. ­h­Av­e y­ou s­e­e­n t­h­is w­e­bs­it­e ­g­o t­o t­h­is s­it­e ­h­o­m­e t­A­b ­f­or ­m­or­e ­d­et­A­i­l............. www.cashself.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Great presentation ;) ty
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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 BEAUTIFUL DATA TABLES CREATING EFFECTIVE CHARTS USING SPARKLINES + SMALL MULTIPLES DATA STORYTELLING TOOLS + TECHNIQUESINSIGHT-
 SCREENSHOT 2X2 MATRICES SCROLLYTELLING
  4. VISUAL DESIGN WITH DATA 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 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 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 WITH DATA CREATING 
 EFFECTIVE CHARTS 11
  12. CREATING EFFECTIVE CHARTS 12 WHICH IS BETTER? FROM
  13. CREATING EFFECTIVE CHARTS 13 WHICH IS BETTER? FROM
  14. CREATING EFFECTIVE CHARTS 14 WHICH IS BETTER? FROM
  15. CREATING EFFECTIVE CHARTS 15 WHICH IS BETTER? FROM
  16. CREATING EFFECTIVE CHARTS CHART TYPES 16 https://developers.google.com/chart/interactive/docs/gallery
  17. CREATING EFFECTIVE CHARTS 17 ANOTHER APPROACH FROM
  18. CREATING EFFECTIVE CHARTS 18 CHART ANATOMY FROM
  19. CREATING EFFECTIVE CHARTS FIELD ELEMENTS 19 https://infoactive.co/data-design/ch14.html FROM
  20. CREATING EFFECTIVE CHARTS AXIS TITLES 20 https://infoactive.co/data-design/ch14.html FROM
  21. CREATING EFFECTIVE CHARTS AXIS TITLES 21 https://infoactive.co/data-design/ch14.html FROM
  22. CREATING EFFECTIVE CHARTS 22 DON’T TRUNCATE AXES https://infoactive.co/data-design/ch18.html FROM
  23. CREATING EFFECTIVE CHARTS 23 LESS IS MORE FROM
  24. CREATING EFFECTIVE CHARTS BACK TO OUR DATA… 24
  25. CREATING EFFECTIVE CHARTS APPLYING DESIGN PRINCIPLES 25
  26. CREATING EFFECTIVE CHARTS LET’S GIVE IT A TRY! 26
  27. 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 27
  28. CREATING EFFECTIVE CHARTS ALTERNATIVE 
 TIME-SERIES 28
  29. CREATING EFFECTIVE CHARTS STACKED BARS 29
  30. CREATING EFFECTIVE CHARTS COMBO CHARTS 30 WITH CHARTED.CO
  31. CREATING EFFECTIVE CHARTS 31 PLOTTING ACTUALS V. PROJECTIONS
  32. CREATING EFFECTIVE CHARTS LET’S GIVE IT A TRY! 32
  33. 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 “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 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 SCROLLYTELLING! 46 HTTPS://PUDDING.COOL/PROCESS/HOW-TO-IMPLEMENT-SCROLLYTELLING/
  47. DATA VIZ TECHNIQUES SCROLLYTELLING! 47 HTTPS://PUDDING.COOL/PROCESS/HOW-TO-IMPLEMENT-SCROLLYTELLING/
  48. DATA VIZ TECHNIQUES SCROLLYTELLING! 48 HTTPS://PUDDING.COOL/PROCESS/HOW-TO-IMPLEMENT-SCROLLYTELLING/
  49. DATA VIZ TECHNIQUES SMALL MULTIPLES 49 HTTPS://PROQUESTIONASKER.GITHUB.IO/PROJECTS/MOVIEDIALOGUEINTERACTIVE
  50. DATA VIZ TECHNIQUES NESTED CHARTS + SMALL MULTIPLES 50SHIFT + CONTROL + COMMAND + 4 —> SELECT / SPACEBAR-CLICK —> PASTE
  51. DATA VIZ TECHNIQUES 2X2S 51
  52. DATA VIZ TECHNIQUES 2X2S 52 D8R8R.COM
  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 [email protected] · @SETHFAM1
Coin Valley mmgp

www.profvest.com

www.fashioncarpet.com.ua

×