Page 1
Seth Familian Founder + Principal, Familian&1
VISUAL DESIGN WITH DATA
START HERE!
familian1.com/vdwd
Page 2
SETH FAMILIAN, FOUNDER + PRINCIPAL, FAMILIAN&1A BIT ABOUT ME 2
BUSINESS STRATEGY
GROWTH HACKING
PRODUCT MANAGEMENT WEB PRESENCE
TEACHING + EDUCATION PROCRAFTINATION
Page 3
AGENDA
‣ What makes good (data) design?
‣ Sparklines
‣ Creating effective charts
‣ Data viz techniques
‣ Tools beyond Google Spreadsheets
3
Page 4
VISUAL DESIGN WITH DATA
WHAT’S GOOD (DATA) DESIGN?
4
Page 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!
Page 6
WHAT’S GOOD (DATA) DESIGN?
UNCLUTTERED.6
NINJA TIP:Copy any formatting and past-special Format Only to carry over the formatting to many more rows or columns
Page 7
WHAT’S GOOD (DATA) DESIGN?
ROLLED-UP.7
NINJA TIP:Copy-paste formulas in line with the start of each block you’re summarizing to ensure consistency.
Page 8
WHAT’S GOOD (DATA) DESIGN?
MUTED COLORS.8
NINJA TIP:Using 1-2 gradations on a single color enables endless formatting possibilities.
Page 9
WHAT’S GOOD (DATA) DESIGN?
MUTED COLORS.9
NINJA TIP:Using 1-2 gradations on a single color enables endless formatting possibilities.
Page 10
WHAT’S GOOD (DATA) DESIGN?
LET’S GIVE IT A TRY!10
visit http://bit.ly/ga-vdwd
Page 11
KEY OBJECTIVE AGENDA
RESOURCESDELIVERABLE
EXERCISE FOR GOOD (DATA) DESIGN
Emulate good data design. 10 mins 1. Visit http://bit.ly/ga-vdwd 2. Retitle one of the tabs with your name 3. Normalize fonts & borders 4. Normalize column widths & number formats 5. Create merged muted headers for each 6. Paste your formatting across blocks of rows
A cleaner spreadsheet! Google Spreadsheets
11
Page 12
VISUAL DESIGN WITH DATA
SPARKLINES12
Page 13
SPARKLINES
SPARKLINES13
http://chandoo.org/wp/2010/05/18/excel-sparklines-tutorial/
https://support.google.com/docs/answer/3093289?hl=en
Page 14
SPARKLINES
AREN’T THEY PERTY?
14
Page 15
SPARKLINES
CUSTOM SPARK-LINES
15
Page 16
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
16
Page 17
SPARKLINES
WHAT’S POSSIBLE17
Page 18
VISUAL DESIGN WITH DATA
CREATING EFFECTIVE CHARTS
18
Page 19
SPARKLINES + CHART AESTHETICS 19
WHICH IS BETTER?
FROM
Page 20
SPARKLINES + CHART AESTHETICS 20
WHICH IS BETTER?
FROM
Page 21
SPARKLINES + CHART AESTHETICS 21
WHICH IS BETTER?
FROM
Page 22
CREATING EFFECTIVE CHARTS
CHART TYPES22
https://developers.google.com/chart/interactive/docs/gallery
Page 23
CREATING EFFECTIVE CHARTS 23
ANOTHER APPROACH
FROM
Page 24
CREATING EFFECTIVE CHARTS 24
CHART ANATOMY
FROM
Page 25
CREATING EFFECTIVE CHARTS
FIELD ELEMENTS25
https://infoactive.co/data-design/ch14.html
FROM
Page 26
CREATING EFFECTIVE CHARTS
AXIS TITLES26
https://infoactive.co/data-design/ch14.html
FROM
Page 27
CREATING EFFECTIVE CHARTS
AXIS TITLES27
https://infoactive.co/data-design/ch14.html
FROM
Page 28
CREATING EFFECTIVE CHARTS 28
DON’T TRUNCATE AXES
https://infoactive.co/data-design/ch18.html
FROM
Page 29
CREATING EFFECTIVE CHARTS 29
LESS IS MORE
FROM
Page 30
CREATING EFFECTIVE CHARTS
BACK TO OUR DATA…30
Page 31
CREATING EFFECTIVE CHARTS
APPLYING DESIGN PRINCIPLES
31
Page 32
CREATING EFFECTIVE CHARTS
LET’S GIVE IT A TRY!32
Page 33
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
33
Page 34
CREATING EFFECTIVE CHARTS
ALTERNATIVE TIME-SERIES
34
Page 35
CREATING EFFECTIVE CHARTS
STACKED BARS35
Page 36
CREATING EFFECTIVE CHARTS
COMBO CHARTS 36
WITH CHARTED.CO
Page 37
CREATING EFFECTIVE CHARTS 37
PLOTTING ACTUALS V. PROJECTIONS
Page 38
VISUAL DESIGN WITH DATA
BREAK TIME!38
‣ Stretch your legs
‣ Hydrate or grab a snack
‣ We’ll start again in 10 mins!
Page 39
VISUAL DESIGN WITH DATA
DATA VIZ TECHNIQUES39
Page 40
DATA VIZ TECHNIQUES
NARRATIVE!40SHIFT + CONTROL + COMMAND + 4 —> SELECT / SPACEBAR-CLICK —> PASTE
Page 41
DATA VIZ TECHNIQUES
NARRATIVE!41SHIFT + CONTROL + COMMAND + 4 —> SELECT / SPACEBAR-CLICK —> PASTE
Page 42
DATA VIZ TECHNIQUES
NARRATIVE!42
VIA MIXPANEL SCREENSHOTS
Page 43
DATA VIZ TECHNIQUES
THE POWER OF NARRATIVE43
HTTP://FALLEN.IO
Page 44
DATA VIZ TECHNIQUES
SMALL MULTIPLES44
HTTPS://PROQUESTIONASKER.GITHUB.IO/PROJECTS/MOVIEDIALOGUEINTERACTIVE
Page 45
DATA VIZ TECHNIQUES
NESTED CHARTS + SMALL MULTIPLES45SHIFT + CONTROL + COMMAND + 4 —> SELECT / SPACEBAR-CLICK —> PASTE
Page 46
DATA VIZ TECHNIQUES
2X2S
46
Page 47
DATA VIZ TECHNIQUES
2X2S
47D8R8R.COM
Page 48
VISUAL DESIGN WITH DATA
DATA VIZ TOOLS48
Page 49
DATA VIZ TOOLS
CHARTED49
CHARTED.CO
FOR SUPER SIMPLE CHARTS
Page 50
DATA VIZ TOOLS
TAGUL50
TAGUL.COM
FOR GORGEOUS WORD CLOUDS
Page 51
DATA VIZ TOOLS
QUID51
QUID.COM
FOR UNSTRUCTURED ANALYSIS
Page 52
DATA VIZ TOOLS
MAPBOX52
MAPBOX.COM
FOR GEOGRAPHIC DATA
Page 53
DATA VIZ TOOLS
MIXPANEL53
MIXPANEL.COM
FOR USER-EVENT DATA
Page 54
DATA VIZ TOOLS
GECKOBOARD54
GECKOBOARD.COM
Page 55
DATA VIZ TOOLS
KLIPFOLIO55
KLIPFOLIO.COM
Page 56
VISUAL DESIGN WITH DATA
FINAL THOUGHTS56
Page 57
FINAL THOUGHTS
DATA OBESITY!57
Page 58
FINAL THOUGHTS
A NEW TYPE OF KNOWLEDGE WORKER
58
http://www.doclens.com/87922/think-issue-7-2014/
Page 59
FINAL THOUGHTS
AN INCREDIBLY VALUABLE SKILL59
https://studentforce.wordpress.com/2013/09/21/umuc-big-data-revolution-is-here/
Page 60
FINAL THOUGHTS
DATA AS INTERFACE60
Page 61
FINAL THOUGHTS 61
DATA AS INTERFACE HTTPS://PROQUESTIONASKER.GITHUB.IO/PROJECTS/MOVIEDIALOGUEINTERACTIVE
Page 62
FINAL THOUGHTS
DATA AS INTERFACE62
for
using
Page 63
FINAL THOUGHTS
START HERE63
D3JS.ORG
Page 64
FINAL THOUGHTS
OR HERE64
C3JS.ORG
Page 65
FINAL THOUGHTS
OR HERE65
INFOACTIVE.CO/DATA-DESIGN
Page 66
HBR.ORG
FINAL THOUGHTS
OR HERE66
Page 67
DATA VIZ TOOLS + TECHNIQUES
OR HERE67
FAMILIAN1.COM
Page 68
BUT MOST IMPORTANTLY…
HAVE FUN!68
Page 69
SURVEY TIME!VISUAL DESIGN WITH DATA 69
BECAUSE FEEDBACK IS KEY :)
Page 70
A BIT ABOUT ME 70MY GENERAL ASSEMBLY WORKSHOPS
Page 71
THANK YOU!
KEEP IN TOUCH.71
SETH@FAMILIAN1.COM · @SFAM · @MAPTIV8