visual design with data september 2016
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
A BIT ABOUT ME 3GENERAL ASSEMBLY WORKSHOPS
AGENDA
‣ What makes good (data) design?
‣ Sparklines + chart aesthetics
‣ Creating effective charts
‣ Tools beyond Google Spreadsheets
4
VISUAL DESIGN WITH DATA
WHAT’S GOOD (DATA) DESIGN?
5
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!
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
WHAT’S GOOD (DATA) DESIGN?
ROLLED-UP.8
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.9
NINJA TIP:Using 1-2 gradations on a single color enables endless formatting possibilities.
WHAT’S GOOD (DATA) DESIGN?
MUTED COLORS.10
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
12
VISUAL DESIGN WITH DATA
SPARKLINES + CHART AESTHETICS
13
SPARKLINES + CHART AESTHETICS
SPARKLINES14
http://chandoo.org/wp/2010/05/18/excel-sparklines-tutorial/
https://support.google.com/docs/answer/3093289?hl=en
SPARKLINES + CHART AESTHETICS
AREN’T THEY PERTY?
15
SPARKLINES + CHART AESTHETICS
CUSTOM SPARK-LINES
16
KEY OBJECTIVE AGENDA
RESOURCESDELIVERABLE
EXERCISE FOR SPARKLINES + CHART AESTHETICS
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
SPARKLINES + CHART AESTHETICS 18
WHICH IS BETTER?
FROM
SPARKLINES + CHART AESTHETICS 19
WHICH IS BETTER?
FROM
SPARKLINES + CHART AESTHETICS 20
WHICH IS BETTER?
FROM
SPARKLINES + CHART AESTHETICS 21
WHICH IS BETTER?
FROM
VISUAL DESIGN WITH DATA
BREAK TIME!22
‣ Stretch your legs
‣ Hydrate or grab a snack
‣ We’ll start again in 15 mins!
VISUAL DESIGN WITH DATA
CREATING EFFECTIVE CHARTS
23
CREATING EFFECTIVE CHARTS
CHART TYPES24
https://developers.google.com/chart/interactive/docs/gallery
CREATING EFFECTIVE CHARTS 25
ANOTHER APPROACH
FROM
CREATING EFFECTIVE CHARTS 26
CHART ANATOMY
FROM
CREATING EFFECTIVE CHARTS
FIELD ELEMENTS27
https://infoactive.co/data-design/ch14.html
FROM
CREATING EFFECTIVE CHARTS
AXIS TITLES28
https://infoactive.co/data-design/ch14.html
FROM
CREATING EFFECTIVE CHARTS
AXIS TITLES29
https://infoactive.co/data-design/ch14.html
FROM
CREATING EFFECTIVE CHARTS 30
DON’T TRUNCATE AXES
https://infoactive.co/data-design/ch18.html
FROM
CREATING EFFECTIVE CHARTS 31
LESS IS MORE
FROM
CREATING EFFECTIVE CHARTS
BACK TO OUR DATA…32
CREATING EFFECTIVE CHARTS
APPLYING DESIGN PRINCIPLES
33
CREATING EFFECTIVE CHARTS
LET’S GIVE IT A TRY!34
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
CREATING EFFECTIVE CHARTS
ALTERNATIVE TIME-SERIES
36
CREATING EFFECTIVE CHARTS
STACKED BARS37
CREATING EFFECTIVE CHARTS 39
PLOTTING ACTUALS V. PROJECTIONS
VISUAL DESIGN WITH DATA
DATA VIZ TECHNIQUES40
DATA VIZ TECHNIQUES
NARRATIVE!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
NESTED CHARTS + SMALL MULTIPLES44SHIFT + CONTROL + COMMAND + 4 —> SELECT / SPACEBAR-CLICK —> PASTE
DATA VIZ TECHNIQUES
2X2S
45
VISUAL DESIGN WITH DATA
DATA VIZ TOOLS47
DATA VIZ TOOLS + TECHNIQUES
GECKOBOARD54
GECKOBOARD.COM
FOR AGGREGATING DATA SOURCES
DATA VIZ TOOLS + TECHNIQUES 57
TRANSFORM
Traffic Sources & Session Stats
RAW DATA
Behavioral Segments, Funnels, Retention & LTV
LOAD
Screenshots to come
Custom dashboards synced with 70+ APIs
EXTRACT
Unified socialfootprint metrics
Soundcloud + event attendance metrics
Core Website
Social Engagement Footprint
Behavioral segmentation + in-app messaging
Event Attendance Data
CONNECTING THE DOTSWITH THE BIG DATA SAAS VALUE CHAIN!
completely custom queries + dashboards
Enrichment API
Internal Databases Cloud DB Storage
VISUAL DESIGN WITH DATA
FINAL THOUGHTS58
FINAL THOUGHTS
DATA OBESITY!59
FINAL THOUGHTS
A NEW TYPE OF KNOWLEDGE WORKER
60
http://www.doclens.com/87922/think-issue-7-2014/
FINAL THOUGHTS
AN INCREDIBLY VALUABLE SKILL61
https://studentforce.wordpress.com/2013/09/21/umuc-big-data-revolution-is-here/
FINAL THOUGHTS
DATA AS INTERFACE62
for
using
FINAL THOUGHTS
OR HERE68
BUT MOST IMPORTANTLY…
HAVE FUN!70
DISCUSSION TIMEVISUAL DESIGN WITH DATA 71
QUESTIONS · FEEDBACK · IDEAS · INSIGHTS
