visual design with data - feb 2017
TRANSCRIPT
Seth Familian Founder + Principal, Familian&1
VISUAL DESIGN WITH DATA
START HERE!
familian1.com/vdwd
SETH FAMILIAN, FOUNDER + PRINCIPAL, FAMILIAN&1A BIT ABOUT ME 2
BUSINESS STRATEGY
GROWTH HACKING
PRODUCT MANAGEMENT WEB PRESENCE
TEACHING + EDUCATION PROCRAFTINATION
AGENDA
‣ What makes good (data) design?
‣ Sparklines
‣ Creating effective charts
‣ Data viz techniques
‣ Tools beyond Google Spreadsheets
3
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 the same size with a single gesture!
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
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.
WHAT’S GOOD (DATA) DESIGN?
MUTED COLORS.8
NINJA TIP:Using 1-2 gradations on a single color enables endless formatting possibilities.
WHAT’S GOOD (DATA) DESIGN?
MUTED COLORS.9
NINJA TIP:Using 1-2 gradations on a single color enables endless formatting possibilities.
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
VISUAL DESIGN WITH DATA
SPARKLINES12
SPARKLINES
SPARKLINES13
http://chandoo.org/wp/2010/05/18/excel-sparklines-tutorial/
https://support.google.com/docs/answer/3093289?hl=en
SPARKLINES
AREN’T THEY PERTY?
14
SPARKLINES
CUSTOM SPARK-LINES
15
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
SPARKLINES
WHAT’S POSSIBLE17
VISUAL DESIGN WITH DATA
CREATING EFFECTIVE CHARTS
18
SPARKLINES + CHART AESTHETICS 19
WHICH IS BETTER?
FROM
SPARKLINES + CHART AESTHETICS 20
WHICH IS BETTER?
FROM
SPARKLINES + CHART AESTHETICS 21
WHICH IS BETTER?
FROM
CREATING EFFECTIVE CHARTS
CHART TYPES22
https://developers.google.com/chart/interactive/docs/gallery
CREATING EFFECTIVE CHARTS 23
ANOTHER APPROACH
FROM
CREATING EFFECTIVE CHARTS 24
CHART ANATOMY
FROM
CREATING EFFECTIVE CHARTS
FIELD ELEMENTS25
https://infoactive.co/data-design/ch14.html
FROM
CREATING EFFECTIVE CHARTS
AXIS TITLES26
https://infoactive.co/data-design/ch14.html
FROM
CREATING EFFECTIVE CHARTS
AXIS TITLES27
https://infoactive.co/data-design/ch14.html
FROM
CREATING EFFECTIVE CHARTS 28
DON’T TRUNCATE AXES
https://infoactive.co/data-design/ch18.html
FROM
CREATING EFFECTIVE CHARTS 29
LESS IS MORE
FROM
CREATING EFFECTIVE CHARTS
BACK TO OUR DATA…30
CREATING EFFECTIVE CHARTS
APPLYING DESIGN PRINCIPLES
31
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. 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
CREATING EFFECTIVE CHARTS
ALTERNATIVE TIME-SERIES
34
CREATING EFFECTIVE CHARTS
STACKED BARS35
CREATING EFFECTIVE CHARTS 37
PLOTTING ACTUALS V. PROJECTIONS
VISUAL DESIGN WITH DATA
BREAK TIME!38
‣ Stretch your legs
‣ Hydrate or grab a snack
‣ We’ll start again in 10 mins!
VISUAL DESIGN WITH DATA
DATA VIZ TECHNIQUES39
DATA VIZ TECHNIQUES
NARRATIVE!40SHIFT + CONTROL + COMMAND + 4 —> SELECT / SPACEBAR-CLICK —> PASTE
DATA VIZ TECHNIQUES
NARRATIVE!41SHIFT + CONTROL + COMMAND + 4 —> SELECT / SPACEBAR-CLICK —> PASTE
DATA VIZ TECHNIQUES
NARRATIVE!42
VIA MIXPANEL SCREENSHOTS
DATA VIZ TECHNIQUES
SMALL MULTIPLES44
HTTPS://PROQUESTIONASKER.GITHUB.IO/PROJECTS/MOVIEDIALOGUEINTERACTIVE
DATA VIZ TECHNIQUES
NESTED CHARTS + SMALL MULTIPLES45SHIFT + CONTROL + COMMAND + 4 —> SELECT / SPACEBAR-CLICK —> PASTE
DATA VIZ TECHNIQUES
2X2S
46
VISUAL DESIGN WITH DATA
DATA VIZ TOOLS48
VISUAL DESIGN WITH DATA
FINAL THOUGHTS56
FINAL THOUGHTS
DATA OBESITY!57
FINAL THOUGHTS
A NEW TYPE OF KNOWLEDGE WORKER
58
http://www.doclens.com/87922/think-issue-7-2014/
FINAL THOUGHTS
AN INCREDIBLY VALUABLE SKILL59
https://studentforce.wordpress.com/2013/09/21/umuc-big-data-revolution-is-here/
FINAL THOUGHTS
DATA AS INTERFACE60
FINAL THOUGHTS 61
DATA AS INTERFACE HTTPS://PROQUESTIONASKER.GITHUB.IO/PROJECTS/MOVIEDIALOGUEINTERACTIVE
FINAL THOUGHTS
DATA AS INTERFACE62
for
using
BUT MOST IMPORTANTLY…
HAVE FUN!68
SURVEY TIME!VISUAL DESIGN WITH DATA 69
BECAUSE FEEDBACK IS KEY :)
A BIT ABOUT ME 70MY GENERAL ASSEMBLY WORKSHOPS
