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.

WHAT’S GOOD (DATA) DESIGN?

LET’S GIVE IT A TRY!11

visit http://bit.ly/ga-vdwd

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

COMBO CHARTS 37

WITH CHARTED.CO

CREATING EFFECTIVE CHARTS 38

PLOTTING ACTUALS V. PROJECTIONS

BEFORE WE BREAK

THE POWER OF NARRATIVE!39

HTTP://FALLEN.IO

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!42

HTTP://FALLEN.IO

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

DATA VIZ TECHNIQUES

2X2S

49D8R8R.COM

VISUAL DESIGN WITH DATA

DATA VIZ TOOLS50

DATA VIZ TOOLS

CHARTED51

CHARTED.CO

FOR SUPER SIMPLE CHARTS

DATA VIZ TOOLS

TAGUL52

TAGUL.COM

FOR GORGEOUS WORD CLOUDS

DATA VIZ TOOLS

QUID53

QUID.COM

FOR UNSTRUCTURED ANALYSIS

DATA VIZ TOOLS

MAPBOX54

MAPBOX.COM

FOR GEOGRAPHIC DATA

DATA VIZ TOOLS

MIXPANEL55

MIXPANEL.COM

FOR USER-EVENT DATA

DATA VIZ TOOLS

GECKOBOARD56

GECKOBOARD.COM

DATA VIZ TOOLS

KLIPFOLIO57

KLIPFOLIO.COM

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

FINAL THOUGHTS

START HERE65

D3JS.ORG

FINAL THOUGHTS

OR HERE66

C3JS.ORG

FINAL THOUGHTS

OR HERE67

INFOACTIVE.CO/DATA-DESIGN

HBR.ORG

FINAL THOUGHTS

OR HERE68

DATA VIZ TOOLS + TECHNIQUES

OR HERE69

FAMILIAN1.COM

BUT MOST IMPORTANTLY…

HAVE FUN!70

SURVEY TIME!VISUAL DESIGN WITH DATA 71

BECAUSE FEEDBACK IS KEY :)

THANK YOU!

KEEP IN TOUCH.72

SETH@FAMILIAN1.COM · @SFAM · @MAPTIV8