visualdesignwithdata-feb2017-170217004512.pdf

In an age where data drives decision-making, "Visual Design with Data" offers a comprehensive guide to harnessing the power of visual storytelling. This book delves into the principles of effective visual design, illustrating how to transform complex datasets into engaging, understandable graphics that resonate with audiences.

1. Seth Familian
Founder + Principal, Familian&1
VISUAL DESIGN
WITH DATA
START HERE!
familian1.com/vdwd

2. SETH FAMILIAN, FOUNDER + PRINCIPAL, FAMILIAN&1
A BIT ABOUT ME 2
BUSINESS STRATEGY
GROWTH HACKING
PRODUCT MANAGEMENT WEB PRESENCE
TEACHING + EDUCATION PROCRAFTINATION

3. AGENDA
‣What makes good (data) design?
‣Sparklines
‣Creating effective charts
‣Data viz techniques
‣Tools beyond Google Spreadsheets
3

4. VISUAL DESIGN WITH DATA
WHAT’S GOOD
(DATA) DESIGN?
4

5. WHAT’S GOOD (DATA) DESIGN?
CONSISTENT.
5
NINJA TIP:
Shift-select multiple
columns/rows and
drag-resize to make
them all the same
size with a single
gesture!

6. WHAT’S GOOD (DATA) DESIGN?
UNCLUTTERED.
6
NINJA TIP:
Copy any formatting
and past-special
Format Only to carry
over the formatting
to many more rows
or columns

7. WHAT’S GOOD (DATA) DESIGN?
ROLLED-UP.
7
NINJA TIP:
Copy-paste formulas
in line with the start
of each block you’re
summarizing to
ensure consistency.

8. WHAT’S GOOD (DATA) DESIGN?
MUTED COLORS.
8
NINJA TIP:
Using 1-2 gradations
on a single color
enables endless
formatting
possibilities.

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

10. WHAT’S GOOD (DATA) DESIGN?
LET’S GIVE IT A TRY!
10
visit http://bit.ly/ga-vdwd

11. 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
11

12. VISUAL DESIGN WITH DATA
SPARKLINES
12

13. SPARKLINES
SPARKLINES
13
http://chandoo.org/wp/2010/05/18/excel-sparklines-tutorial/
https://support.google.com/docs/answer/3093289?hl=en

14. SPARKLINES
AREN’T
THEY
PERTY?
14

15. SPARKLINES
CUSTOM
SPARK-

LINES
15

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
16

17. SPARKLINES
WHAT’S POSSIBLE
17

18. VISUAL DESIGN WITH DATA
CREATING 

EFFECTIVE CHARTS
18

19. SPARKLINES + CHART AESTHETICS 19
WHICH IS BETTER?
FROM

20. SPARKLINES + CHART AESTHETICS 20
WHICH IS BETTER?
FROM

21. SPARKLINES + CHART AESTHETICS 21
WHICH IS BETTER?
FROM

22. CREATING EFFECTIVE CHARTS
CHART TYPES
22
https://developers.google.com/chart/interactive/docs/gallery

23. CREATING EFFECTIVE CHARTS 23
ANOTHER APPROACH
FROM

24. CREATING EFFECTIVE CHARTS 24
CHART ANATOMY
FROM

25. CREATING EFFECTIVE CHARTS
FIELD ELEMENTS
25
https://infoactive.co/data-design/ch14.html
FROM

26. CREATING EFFECTIVE CHARTS
AXIS TITLES
26
https://infoactive.co/data-design/ch14.html
FROM

27. CREATING EFFECTIVE CHARTS
AXIS TITLES
27
https://infoactive.co/data-design/ch14.html
FROM

28. CREATING EFFECTIVE CHARTS 28
DON’T TRUNCATE AXES
https://infoactive.co/data-design/ch18.html
FROM

29. CREATING EFFECTIVE CHARTS 29
LESS IS MORE
FROM

30. CREATING EFFECTIVE CHARTS
BACK TO OUR DATA…
30

31. CREATING EFFECTIVE CHARTS
APPLYING DESIGN
PRINCIPLES
31

32. CREATING EFFECTIVE CHARTS
LET’S GIVE IT A TRY!
32

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
33

34. CREATING EFFECTIVE CHARTS
ALTERNATIVE 

TIME-SERIES
34

35. CREATING EFFECTIVE CHARTS
STACKED BARS
35

36. CREATING EFFECTIVE CHARTS
COMBO CHARTS
36
WITH CHARTED.CO

37. CREATING EFFECTIVE CHARTS 37
PLOTTING ACTUALS V. PROJECTIONS

38. VISUAL DESIGN WITH DATA
BREAK TIME!
38
‣Stretch your legs
‣Hydrate or grab a snack
‣We’ll start again in 10 mins!

39. VISUAL DESIGN WITH DATA
DATA VIZ TECHNIQUES
39

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

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

42. DATA VIZ TECHNIQUES
NARRATIVE!
42
VIA MIXPANEL SCREENSHOTS

43. DATA VIZ TECHNIQUES
THE POWER OF NARRATIVE
43
HTTP://FALLEN.IO

44. DATA VIZ TECHNIQUES
SMALL MULTIPLES
44
HTTPS://PROQUESTIONASKER.GITHUB.IO/PROJECTS/MOVIEDIALOGUEINTERACTIVE

45. DATA VIZ TECHNIQUES
NESTED CHARTS + SMALL MULTIPLES
45
SHIFT + CONTROL + COMMAND + 4 —> SELECT / SPACEBAR-CLICK —> PASTE

46. DATA VIZ TECHNIQUES
2X2S
46

47. DATA VIZ TECHNIQUES
2X2S
47
D8R8R.COM

48. VISUAL DESIGN WITH DATA
DATA VIZ TOOLS
48

49. DATA VIZ TOOLS
CHARTED
49
CHARTED.CO
FOR SUPER SIMPLE CHARTS

50. DATA VIZ TOOLS
TAGUL
50
TAGUL.COM
FOR GORGEOUS WORD CLOUDS

51. DATA VIZ TOOLS
QUID
51
QUID.COM
FOR UNSTRUCTURED ANALYSIS

52. DATA VIZ TOOLS
MAPBOX
52
MAPBOX.COM
FOR GEOGRAPHIC DATA

53. DATA VIZ TOOLS
MIXPANEL
53
MIXPANEL.COM
FOR USER-EVENT DATA

54. DATA VIZ TOOLS
GECKOBOARD
54
GECKOBOARD.COM

55. DATA VIZ TOOLS
KLIPFOLIO
55
KLIPFOLIO.COM

56. VISUAL DESIGN WITH DATA
FINAL THOUGHTS
56

57. FINAL THOUGHTS
DATA OBESITY!
57

58. FINAL THOUGHTS
A NEW TYPE OF
KNOWLEDGE
WORKER
58
http://www.doclens.com/87922/think-issue-7-2014/

59. FINAL THOUGHTS
AN INCREDIBLY VALUABLE SKILL
59
https://studentforce.wordpress.com/2013/09/21/umuc-big-data-revolution-is-here/

60. FINAL THOUGHTS
DATA AS INTERFACE
60

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

62. FINAL THOUGHTS
DATA AS INTERFACE
62
for
using

63. FINAL THOUGHTS
START HERE
63
D3JS.ORG

64. FINAL THOUGHTS
OR HERE
64
C3JS.ORG

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

66. HBR.ORG
FINAL THOUGHTS
OR HERE
66

67. DATA VIZ TOOLS + TECHNIQUES
OR HERE
67
FAMILIAN1.COM

68. BUT MOST IMPORTANTLY…
HAVE FUN!
68

69. SURVEY TIME!
VISUAL DESIGN WITH DATA 69
BECAUSE FEEDBACK IS KEY :)

70. A BIT ABOUT ME 70MY GENERAL ASSEMBLY WORKSHOPS

71. THANK YOU!
KEEP IN TOUCH.
71
[email protected] · @SFAM · @MAPTIV8