Post on 07-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
A BIT ABOUT ME 3MY GENERAL ASSEMBLY WORKSHOPS
AGENDA
‣ What makes good (data) design?
‣ Sparklines
‣ Creating effective charts
‣ Data viz techniques
‣ 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
SPARKLINES13
SPARKLINES
SPARKLINES14
http://chandoo.org/wp/2010/05/18/excel-sparklines-tutorial/
https://support.google.com/docs/answer/3093289?hl=en
SPARKLINES
AREN’T THEY PERTY?
15
SPARKLINES
CUSTOM SPARK-LINES
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
17
SPARKLINES
WHAT’S POSSIBLE18
VISUAL DESIGN WITH DATA
CREATING EFFECTIVE CHARTS
19
SPARKLINES + CHART AESTHETICS 20
WHICH IS BETTER?
FROM
SPARKLINES + CHART AESTHETICS 21
WHICH IS BETTER?
FROM
SPARKLINES + CHART AESTHETICS 22
WHICH IS BETTER?
FROM
CREATING EFFECTIVE CHARTS
CHART TYPES23
https://developers.google.com/chart/interactive/docs/gallery
CREATING EFFECTIVE CHARTS 24
ANOTHER APPROACH
FROM
CREATING EFFECTIVE CHARTS 25
CHART ANATOMY
FROM
CREATING EFFECTIVE CHARTS
FIELD ELEMENTS26
https://infoactive.co/data-design/ch14.html
FROM
CREATING EFFECTIVE CHARTS
AXIS TITLES27
https://infoactive.co/data-design/ch14.html
FROM
CREATING EFFECTIVE CHARTS
AXIS TITLES28
https://infoactive.co/data-design/ch14.html
FROM
CREATING EFFECTIVE CHARTS 29
DON’T TRUNCATE AXES
https://infoactive.co/data-design/ch18.html
FROM
CREATING EFFECTIVE CHARTS 30
LESS IS MORE
FROM
CREATING EFFECTIVE CHARTS
BACK TO OUR DATA…31
CREATING EFFECTIVE CHARTS
APPLYING DESIGN PRINCIPLES
32
CREATING EFFECTIVE CHARTS
LET’S GIVE IT A TRY!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
34
CREATING EFFECTIVE CHARTS
ALTERNATIVE TIME-SERIES
35
CREATING EFFECTIVE CHARTS
STACKED BARS36
CREATING EFFECTIVE CHARTS 38
PLOTTING ACTUALS V. PROJECTIONS
VISUAL DESIGN WITH DATA
BREAK TIME!40
‣ Stretch your legs
‣ Hydrate or grab a snack
‣ We’ll start again in 15 mins!
VISUAL DESIGN WITH DATA
DATA VIZ TECHNIQUES41
DATA VIZ TECHNIQUES
NARRATIVE!43SHIFT + CONTROL + COMMAND + 4 —> SELECT / SPACEBAR-CLICK —> PASTE
DATA VIZ TECHNIQUES
NARRATIVE!44SHIFT + CONTROL + COMMAND + 4 —> SELECT / SPACEBAR-CLICK —> PASTE
DATA VIZ TECHNIQUES
NARRATIVE!45
VIA MIXPANEL SCREENSHOTS
DATA VIZ TECHNIQUES
SMALL MULTIPLES46
HTTPS://PROQUESTIONASKER.GITHUB.IO/PROJECTS/MOVIEDIALOGUEINTERACTIVE
DATA VIZ TECHNIQUES
NESTED CHARTS + SMALL MULTIPLES47SHIFT + CONTROL + COMMAND + 4 —> SELECT / SPACEBAR-CLICK —> PASTE
DATA VIZ TECHNIQUES
2X2S
48
VISUAL DESIGN WITH DATA
DATA VIZ TOOLS50
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
DATA AS INTERFACE63
FINAL THOUGHTS 64
DATA AS INTERFACE HTTPS://PROQUESTIONASKER.GITHUB.IO/PROJECTS/MOVIEDIALOGUEINTERACTIVE
BUT MOST IMPORTANTLY…
HAVE FUN!70
SURVEY TIME!VISUAL DESIGN WITH DATA 71
BECAUSE FEEDBACK IS KEY :)