VISUAL DESIGN

WITH DATA
START HERE!
Seth Familian
Founder + Principal, Familian&1 familian1.com/vdwd
BEFORE WE START 2

SOME DATA VIZ INSPIRATION!

HTTPS://WWW.THEGUARDIAN.COM/US-NEWS/NG-INTERACTIVE/2015/OCT/19/HOMAN-SQUARE-CHICAGO-POLICE-DETAINEES

HTTP://FALLEN.IO
A BIT ABOUT ME 3

SETH FAMILIAN, FOUNDER + PRINCIPAL, FAMILIAN&1

BUSINESS STRATEGY PRODUCT MANAGEMENT WEB PRESENCE

GROWTH HACKING TEACHING + EDUCATION PROCRAFTINATION

AGENDA 4

What makes good (data) design?

Sparklines

Creating effective charts

Data viz techniques

Tools beyond Google Spreadsheets

VISUAL DESIGN WITH DATA 5

WHATS GOOD
(DATA) DESIGN?
WHATS GOOD (DATA) DESIGN? 6

CONSISTENT.

NINJA TIP:
Shift-select multiple
columns/rows and
drag-resize to make
them all the same
size with a single
gesture!
WHATS GOOD (DATA) DESIGN? 7

UNCLUTTERED.

NINJA TIP:
Copy any formatting
and past-special
Format Only to carry
over the formatting
to many more rows
or columns
WHATS GOOD (DATA) DESIGN? 8

MUTED COLORS.

NINJA TIP:
Using 1-2 gradations
on a single color
enables endless
formatting
possibilities.
WHATS GOOD (DATA) DESIGN? 9

MUTED COLORS.

NINJA TIP:
Using 1-2 gradations
on a single color
enables endless
formatting
possibilities.
WHATS GOOD (DATA) DESIGN? 10

LETS GIVE IT A TRY!

visit familian1.com/vdwd
EXERCISE FOR GOOD (DATA) DESIGN 11

KEY OBJECTIVE AGENDA

Emulate good data design. 10 mins 1. Visit familian1.com/vdwd

2. Click on Visit the Exercises Spreadsheet
3. Go to 1 - Consistent
4. Normalize fonts, borders, and column widths
5. Go to 2 - Uncluttered
6. Make it uncluttered!
DELIVERABLE RESOURCES 7. And so on :)

A cleaner spreadsheet! Google Spreadsheets

WHATS GOOD (DATA) DESIGN? 12

ROLLED-UP.

NINJA TIP:
Copy-paste formulas
in line with the start
of each block youre
summarizing to
ensure consistency.
VISUAL DESIGN WITH DATA 13

SPARKLINES
SPARKLINES 14

SPARKLINES

https://support.google.com/docs/answer/3093289?hl=en

http://chandoo.org/wp/2010/05/18/excel-sparklines-tutorial/
SPARKLINES 15

ARENT
THEY
PERTY?
SPARKLINES 16

CUSTOM
SPARK-
LINES
EXERCISE FOR SPARKLINES 17

KEY OBJECTIVE AGENDA

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

DELIVERABLE RESOURCES

In-line sparklines! Google Spreadsheets

SPARKLINES 18

WHATS POSSIBLE
VISUAL DESIGN WITH DATA 19

BREAK TIME!
Stretch your legs

Hydrate or grab a snack

Well start again in 10 mins!

VISUAL DESIGN WITH DATA 20

CREATING
EFFECTIVE CHARTS
SPARKLINES + CHART AESTHETICS 21

WHICH IS BETTER?

FROM
SPARKLINES + CHART AESTHETICS 22

WHICH IS BETTER?

FROM
SPARKLINES + CHART AESTHETICS 23

WHICH IS BETTER?

FROM
CREATING EFFECTIVE CHARTS 24
https://developers.google.com/chart/interactive/docs/gallery

CHART TYPES
CREATING EFFECTIVE CHARTS 25

ANOTHER APPROACH

FROM
CREATING EFFECTIVE CHARTS 26

CHART ANATOMY

FROM
CREATING EFFECTIVE CHARTS 27

FIELD ELEMENTS

FROM

https://infoactive.co/data-design/ch14.html
CREATING EFFECTIVE CHARTS 28

AXIS TITLES

FROM

https://infoactive.co/data-design/ch14.html
CREATING EFFECTIVE CHARTS 29

AXIS TITLES

FROM

https://infoactive.co/data-design/ch14.html
CREATING EFFECTIVE CHARTS 30

DONT TRUNCATE AXES

FROM

https://infoactive.co/data-design/ch18.html
CREATING EFFECTIVE CHARTS 31

LESS IS MORE

FROM
CREATING EFFECTIVE CHARTS 32

BACK TO OUR DATA

CREATING EFFECTIVE CHARTS 33

APPLYING DESIGN
PRINCIPLES
CREATING EFFECTIVE CHARTS 34

LETS GIVE IT A TRY!

EXERCISE FOR CREATING EFFECTIVE CHARTS 35

KEY OBJECTIVE AGENDA

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

DELIVERABLE RESOURCES

A cleaner spreadsheet! Google Spreadsheets

CREATING EFFECTIVE CHARTS 36

ALTERNATIVE
TIME-SERIES
CREATING EFFECTIVE CHARTS 37

STACKED BARS
CREATING EFFECTIVE CHARTS 38

COMBO CHARTS
WITH CHARTED.CO
CREATING EFFECTIVE CHARTS 39

PLOTTING ACTUALS V. PROJECTIONS

VISUAL DESIGN WITH DATA 40

DATA VIZ TECHNIQUES

DATA VIZ TECHNIQUES SHIFT + CONTROL + COMMAND + 4 > SELECT / SPACEBAR-CLICK > PASTE
41

NARRATIVE!
DATA VIZ TECHNIQUES SHIFT + CONTROL + COMMAND + 4 > SELECT / SPACEBAR-CLICK > PASTE
42

NARRATIVE!
DATA VIZ TECHNIQUES 43

NARRATIVE!
VIA MIXPANEL SCREENSHOTS
DATA VIZ TECHNIQUES 44

THE POWER OF NARRATIVE HTTP://FALLEN.IO

DATA VIZ TECHNIQUES 45

SMALL MULTIPLES HTTPS://PROQUESTIONASKER.GITHUB.IO/PROJECTS/MOVIEDIALOGUEINTERACTIVE

DATA VIZ TECHNIQUES SHIFT + CONTROL + COMMAND + 4 > SELECT / SPACEBAR-CLICK > PASTE
46

NESTED CHARTS + SMALL MULTIPLES

DATA VIZ TECHNIQUES 47

2X2S
DATA VIZ TECHNIQUES 48
D8R8R.COM

2X2S
DATA VIZ TECHNIQUES 49
HTTPS://PUDDING.COOL/PROCESS/HOW-TO-IMPLEMENT-SCROLLYTELLING/

SCROLLYTELLING!
DATA VIZ TECHNIQUES 50
HTTPS://PUDDING.COOL/PROCESS/HOW-TO-IMPLEMENT-SCROLLYTELLING/

SCROLLYTELLING!
DATA VIZ TECHNIQUES 51
HTTPS://PUDDING.COOL/PROCESS/HOW-TO-IMPLEMENT-SCROLLYTELLING/

SCROLLYTELLING!
VISUAL DESIGN WITH DATA 52

DATA VIZ TOOLS

DATA VIZ TOOLS 53
CHARTED.CO

CHARTED
FOR SUPER SIMPLE CHARTS
DATA VIZ TOOLS 54
TAGUL.COM

TAGUL
FOR GORGEOUS WORD CLOUDS
DATA VIZ TOOLS 55
QUID.COM

QUID
FOR UNSTRUCTURED ANALYSIS
DATA VIZ TOOLS 56
MAPBOX.COM

MAPBOX
FOR GEOGRAPHIC DATA
DATA VIZ TOOLS 57
MIXPANEL.COM

MIXPANEL
FOR USER-EVENT DATA
DATA VIZ TOOLS 58
GECKOBOARD.COM

GECKOBOARD
DATA VIZ TOOLS 59
KLIPFOLIO.COM

KLIPFOLIO
VISUAL DESIGN WITH DATA 60

FINAL THOUGHTS
FINAL THOUGHTS 61

DATA OBESITY!
FINAL THOUGHTS 62

A NEW TYPE OF
KNOWLEDGE
WORKER

http://www.doclens.com/87922/think-issue-7-2014/
FINAL THOUGHTS 63

AN INCREDIBLY VALUABLE SKILL

https://studentforce.wordpress.com/2013/09/21/umuc-big-data-revolution-is-here/
FINAL THOUGHTS 64

DATA AS INTERFACE
FINAL THOUGHTS 65

DATA AS INTERFACE HTTPS://PROQUESTIONASKER.GITHUB.IO/PROJECTS/MOVIEDIALOGUEINTERACTIVE

FINAL THOUGHTS 66
for

DATA AS INTERFACE using

FINAL THOUGHTS 67
D3JS.ORG

START HERE
FINAL THOUGHTS 68
C3JS.ORG

OR HERE
FINAL THOUGHTS 69
INFOACTIVE.CO/DATA-DESIGN

OR HERE
FINAL THOUGHTS 70
HBR.ORG

OR HERE
DATA VIZ TOOLS + TECHNIQUES 71
FAMILIAN1.COM

OR HERE
BUT MOST IMPORTANTLY 72

HAVE FUN!
VISUAL DESIGN WITH DATA 73

SURVEY TIME!
HEAD BACK TO

familian1.com/vdwd
AND SCROLL TO THE BOTTOM

BECAUSE FEEDBACK IS KEY :)

AMYBITGENERAL
ABOUT ME
ASSEMBLY WORKSHOPS 74
THANK YOU! 75

KEEP IN TOUCH.

SETH@FAMILIAN1.COM @SETHFAM1