visual design with data
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 + assumptions
‣ 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
KEY OBJECTIVE AGENDA
RESOURCESDELIVERABLE
EXERCISE FOR GOOD (DATA) DESIGN
Emulate good data design. 20 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. Paste your formatting across blocks of rows
A cleaner spreadsheet! Google Spreadsheets
9
EXERCISE FOR GOOD (DATA) DESIGN
DESIRED OUTCOME
10
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. Paste your formatting across blocks of rows
WHAT’S GOOD (DATA) DESIGN?
ROLLED-UP.11
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.12
NINJA TIP:Using 1-2 gradations on a single color enables endless formatting possibilities.
WHAT’S GOOD (DATA) DESIGN?
LET’S GIVE IT A TRY!13
KEY OBJECTIVE AGENDA
RESOURCESDELIVERABLE
EXERCISE FOR GOOD (DATA) DESIGN
Emulate good data design. 20 mins 1. Visit http://bit.ly/ga-vdwd 2. Find your tab 3. Roll up months into quarters 4. Roll up quarters into years 5. Create merged muted headers for each
A cleaner spreadsheet! Google Spreadsheets
14
EXERCISE FOR GOOD (DATA) DESIGN
DESIRED OUTCOME
15
VISUAL DESIGN WITH DATA
SPARKLINES + ASSUMPTIONS
16
DATA VIZ TOOLS + TECHNIQUES
SPARKLINES17
http://chandoo.org/wp/2010/05/18/excel-sparklines-tutorial/
https://support.google.com/docs/answer/3093289?hl=en
DATA VIZ TOOLS + TECHNIQUES
AREN’T THEY PERTY?
18
SPARKLINES
LET’S GIVE IT A TRY!19
KEY OBJECTIVE AGENDA
RESOURCESDELIVERABLE
EXERCISE FOR GOOD (DATA) DESIGN
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
20
EXERCISE FOR GOOD (DATA) DESIGN
DESIRED OUTCOME
21
LAYERING IN ASSUMPTIONS 22
LET’S PREDICT THE FUTURE!
ASSUMPTIONS
LET’S GIVE IT A TRY!23
KEY OBJECTIVE AGENDA
RESOURCESDELIVERABLE
EXERCISE FOR ASSUMPTION-DRIVEN CHARTING
Assumption-driven charts 25 mins 1. Visit http://bit.ly/ga-vdd-3 2. Find your tab 3. Add in/format a header row + growth rate 4. Create a new column for projections 5. Apply the growth rate to your annual data 6. Change the assumption
Adjustable assumptions! Google Spreadsheets
24
LAYERING IN ASSUMPTIONS 25
THE POWER OF MANY ASSUMPTIONS
VISUAL DESIGN WITH DATA
BREAK TIME!26
‣ Stretch your legs
‣ Hydrate or grab a snack
‣ We’ll start again in 15 mins!
VISUAL DESIGN WITH DATA
CREATING EFFECTIVE CHARTS
27
CREATING EFFECTIVE CHARTS
CHART TYPES28
https://developers.google.com/chart/interactive/docs/gallery
CREATING EFFECTIVE CHARTS
ANATOMY OF A CHART29
https://infoactive.co/data-design/ch14.html
FROM
CREATING EFFECTIVE CHARTS
AXIS TITLES30
https://infoactive.co/data-design/ch14.html
FROM
CREATING EFFECTIVE CHARTS
AXIS TITLES31
https://infoactive.co/data-design/ch14.html
FROM
CREATING EFFECTIVE CHARTS 32
DON’T TRUNCATE AXES
https://infoactive.co/data-design/ch18.html
FROM
CREATING EFFECTIVE CHARTS
BACK TO OUR DATA…33
CREATING EFFECTIVE CHARTS
APPLYING DESIGN PRINCIPLES
34
CREATING EFFECTIVE CHARTS
LET’S GIVE IT A TRY!35
KEY OBJECTIVE AGENDA
RESOURCESDELIVERABLE
EXERCISE FOR CREATING EFFECTIVE CHARTS
Create an effective chart 25 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
36
CREATING EFFECTIVE CHARTS
ALTERNATIVE TIME-SERIES
37
CREATING EFFECTIVE CHARTS
STACKED BARS38
VISUAL DESIGN WITH DATA
DATA VIZ TOOLS + TECHNIQUES
40
DATA VIZ TOOLS + TECHNIQUES
NARRATIVE!41SHIFT + CONTROL + COMMAND + 4 —> SELECT / SPACEBAR-CLICK —> PASTE
DATA VIZ TOOLS + TECHNIQUES
NARRATIVE!42SHIFT + CONTROL + COMMAND + 4 —> SELECT / SPACEBAR-CLICK —> PASTE
DATA VIZ TOOLS + TECHNIQUES
NESTED CHARTS + SMALL MULTIPLES43SHIFT + CONTROL + COMMAND + 4 —> SELECT / SPACEBAR-CLICK —> PASTE
DATA VIZ TOOLS + TECHNIQUES
2X2S
44
VISUAL DESIGN WITH DATA
ADVANCED DATA VIZ TOOLS
48
DATA VIZ TOOLS + TECHNIQUES
GOOGLE ANALYTICS
52ANALYTICS.GOOGLE.COM
FOR WEBSITE TRAFFIC
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
DATA VIZ TOOLS + TECHNIQUES
TOOLS APLENTY58
TE
XT
UA
L VISU
AL
ANALYTICS + INSIGHT
PROCESSING + NORMALIZATION
VISUAL ANALYTICSSTATISTICAL ANALYTICS
DATA TRANSFORMATION (ETL)
EVENT-BASED ANALYTICS
DATA DISPLAY + DASHBOARDING
AC
TIV
ITY
MODALITY
VISUAL DESIGN WITH DATA
FINAL THOUGHTS59
FINAL THOUGHTS
DATA OBESITY!60
FINAL THOUGHTS
A NEW TYPE OF KNOWLEDGE WORKER
61
http://www.doclens.com/87922/think-issue-7-2014/
FINAL THOUGHTS
AN INCREDIBLY VALUABLE SKILL62
https://studentforce.wordpress.com/2013/09/21/umuc-big-data-revolution-is-here/
FINAL THOUGHTS
DATA AS INTERFACE63
for
using
FINAL THOUGHTS
OR HERE69
BUT MOST IMPORTANTLY…
HAVE FUN!71
DISCUSSION TIMEVISUAL DESIGN WITH DATA 72
QUESTIONS · FEEDBACK · IDEAS · INSIGHTS
