visual design with data
TRANSCRIPT
![Page 1: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/1.jpg)
Seth Familian Founder + Principal, Familian&1
VISUAL DESIGN WITH DATA
START HERE!
familian1.com/vdwd
![Page 2: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/2.jpg)
SETH FAMILIAN, FOUNDER + PRINCIPAL, FAMILIAN&1A BIT ABOUT ME 2
BUSINESS STRATEGY
GROWTH HACKING
PRODUCT MANAGEMENT WEB PRESENCE
TEACHING + EDUCATION PROCRAFTINATION
![Page 3: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/3.jpg)
A BIT ABOUT ME 3GENERAL ASSEMBLY WORKSHOPS
![Page 4: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/4.jpg)
AGENDA
‣ What makes good (data) design?
‣ Sparklines + assumptions
‣ Creating effective charts
‣ Tools beyond Google Spreadsheets
4
![Page 5: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/5.jpg)
VISUAL DESIGN WITH DATA
WHAT’S GOOD (DATA) DESIGN?
5
![Page 6: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/6.jpg)
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!
![Page 7: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/7.jpg)
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
![Page 9: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/9.jpg)
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
![Page 10: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/10.jpg)
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
![Page 11: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/11.jpg)
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.
![Page 12: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/12.jpg)
WHAT’S GOOD (DATA) DESIGN?
MUTED COLORS.12
NINJA TIP:Using 1-2 gradations on a single color enables endless formatting possibilities.
![Page 13: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/13.jpg)
WHAT’S GOOD (DATA) DESIGN?
LET’S GIVE IT A TRY!13
![Page 14: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/14.jpg)
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
![Page 15: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/15.jpg)
EXERCISE FOR GOOD (DATA) DESIGN
DESIRED OUTCOME
15
![Page 16: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/16.jpg)
VISUAL DESIGN WITH DATA
SPARKLINES + ASSUMPTIONS
16
![Page 17: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/17.jpg)
DATA VIZ TOOLS + TECHNIQUES
SPARKLINES17
http://chandoo.org/wp/2010/05/18/excel-sparklines-tutorial/
https://support.google.com/docs/answer/3093289?hl=en
![Page 18: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/18.jpg)
DATA VIZ TOOLS + TECHNIQUES
AREN’T THEY PERTY?
18
![Page 19: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/19.jpg)
SPARKLINES
LET’S GIVE IT A TRY!19
![Page 20: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/20.jpg)
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
![Page 21: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/21.jpg)
EXERCISE FOR GOOD (DATA) DESIGN
DESIRED OUTCOME
21
![Page 22: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/22.jpg)
LAYERING IN ASSUMPTIONS 22
LET’S PREDICT THE FUTURE!
![Page 23: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/23.jpg)
ASSUMPTIONS
LET’S GIVE IT A TRY!23
![Page 24: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/24.jpg)
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
![Page 25: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/25.jpg)
LAYERING IN ASSUMPTIONS 25
THE POWER OF MANY ASSUMPTIONS
![Page 26: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/26.jpg)
VISUAL DESIGN WITH DATA
BREAK TIME!26
‣ Stretch your legs
‣ Hydrate or grab a snack
‣ We’ll start again in 15 mins!
![Page 27: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/27.jpg)
VISUAL DESIGN WITH DATA
CREATING EFFECTIVE CHARTS
27
![Page 28: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/28.jpg)
CREATING EFFECTIVE CHARTS
CHART TYPES28
https://developers.google.com/chart/interactive/docs/gallery
![Page 29: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/29.jpg)
CREATING EFFECTIVE CHARTS
ANATOMY OF A CHART29
https://infoactive.co/data-design/ch14.html
FROM
![Page 30: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/30.jpg)
CREATING EFFECTIVE CHARTS
AXIS TITLES30
https://infoactive.co/data-design/ch14.html
FROM
![Page 31: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/31.jpg)
CREATING EFFECTIVE CHARTS
AXIS TITLES31
https://infoactive.co/data-design/ch14.html
FROM
![Page 32: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/32.jpg)
CREATING EFFECTIVE CHARTS 32
DON’T TRUNCATE AXES
https://infoactive.co/data-design/ch18.html
FROM
![Page 33: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/33.jpg)
CREATING EFFECTIVE CHARTS
BACK TO OUR DATA…33
![Page 34: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/34.jpg)
CREATING EFFECTIVE CHARTS
APPLYING DESIGN PRINCIPLES
34
![Page 35: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/35.jpg)
CREATING EFFECTIVE CHARTS
LET’S GIVE IT A TRY!35
![Page 36: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/36.jpg)
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
![Page 37: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/37.jpg)
CREATING EFFECTIVE CHARTS
ALTERNATIVE TIME-SERIES
37
![Page 38: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/38.jpg)
CREATING EFFECTIVE CHARTS
STACKED BARS38
![Page 40: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/40.jpg)
VISUAL DESIGN WITH DATA
DATA VIZ TOOLS + TECHNIQUES
40
![Page 41: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/41.jpg)
DATA VIZ TOOLS + TECHNIQUES
NARRATIVE!41SHIFT + CONTROL + COMMAND + 4 —> SELECT / SPACEBAR-CLICK —> PASTE
![Page 42: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/42.jpg)
DATA VIZ TOOLS + TECHNIQUES
NARRATIVE!42SHIFT + CONTROL + COMMAND + 4 —> SELECT / SPACEBAR-CLICK —> PASTE
![Page 43: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/43.jpg)
DATA VIZ TOOLS + TECHNIQUES
NESTED CHARTS + SMALL MULTIPLES43SHIFT + CONTROL + COMMAND + 4 —> SELECT / SPACEBAR-CLICK —> PASTE
![Page 44: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/44.jpg)
DATA VIZ TOOLS + TECHNIQUES
2X2S
44
![Page 48: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/48.jpg)
VISUAL DESIGN WITH DATA
ADVANCED DATA VIZ TOOLS
48
![Page 52: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/52.jpg)
DATA VIZ TOOLS + TECHNIQUES
GOOGLE ANALYTICS
52ANALYTICS.GOOGLE.COM
FOR WEBSITE TRAFFIC
![Page 54: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/54.jpg)
DATA VIZ TOOLS + TECHNIQUES
GECKOBOARD54
GECKOBOARD.COM
FOR AGGREGATING DATA SOURCES
![Page 57: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/57.jpg)
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
![Page 58: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/58.jpg)
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
![Page 59: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/59.jpg)
VISUAL DESIGN WITH DATA
FINAL THOUGHTS59
![Page 60: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/60.jpg)
FINAL THOUGHTS
DATA OBESITY!60
![Page 61: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/61.jpg)
FINAL THOUGHTS
A NEW TYPE OF KNOWLEDGE WORKER
61
http://www.doclens.com/87922/think-issue-7-2014/
![Page 62: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/62.jpg)
FINAL THOUGHTS
AN INCREDIBLY VALUABLE SKILL62
https://studentforce.wordpress.com/2013/09/21/umuc-big-data-revolution-is-here/
![Page 63: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/63.jpg)
FINAL THOUGHTS
DATA AS INTERFACE63
for
using
![Page 69: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/69.jpg)
FINAL THOUGHTS
OR HERE69
![Page 71: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/71.jpg)
BUT MOST IMPORTANTLY…
HAVE FUN!71
![Page 72: Visual Design with Data](https://reader033.vdocuments.site/reader033/viewer/2022051705/58aa57dc1a28ab10578b61fb/html5/thumbnails/72.jpg)
DISCUSSION TIMEVISUAL DESIGN WITH DATA 72
QUESTIONS · FEEDBACK · IDEAS · INSIGHTS