Make your charts pop and your data tell a story with these top tips from data expert, Ryan Withop. Originally presented at the SF Analytics Summit 2016, Ryan describes the C's of great data visualization: Chart type, Clean, Color, and Sizing and provides examples of how to make your charts and dashboards easy to understand from a distance.

1. Ryan Withop
Former Sr. Mgr. Analytics, Electronic Arts
Analytics Lead, Chosen.fm
@RyanWithop
Data Visualization & Storytelling Tips
SF Analytics Summit 03/16
Comments in gray were added post-facto to help Slideshare readers.

2. Source: Star Wars Battlefront, EA, DICE
Video game play recording of rwithopswag
This is what I was competing against visually at Electronic Arts.

3. Source: Charley Kyd, MBA
http://exceluser.com/training/reporting/dashboard-ebook.html
Great for Finance. Terrible for communicating action.

4. Source: James Gonzales, Ryan Withop
Electronic Arts (EA)
412,000
This is what is possible.

5. Coaching Youth Soccer

6. Coach’s Tip
Look for the Coach’s Tip logo signifying points to remember in
data communication.

7. It’s not about graphing,
it’s about
communicating.

8. Source: Github Kibana
https://www.mihneadb.net/a-github-river-for-elasticsearch/
Graphing

9. Thank You Email Drives 10% Lift
In 2nd Purchases
0%
5%
10%
15%
20%
25%
30%
Made a 2nd Purchase
(1/1 – 2/28/2015, n=11K)
+10%
Communicating.

10. 1. Understandable at-a-glance
2. Tell a Story
3. Actionable

11. Thank You Email Drives 10% Lift
In 2nd Purchases
0%
5%
10%
15%
20%
25%
30%
Made a 2nd Purchase
(1/1 – 2/28/2015, n=11K)
+10%
Recommendation: Deploy “Thank You” emails across purchasing
system within one hour of first transaction
State the results at the top and provide next steps.

12. Common Mistakes
In Communicating

13. So small!
Source: Snellen Eye Chart
http://www.medicalsupplymegastore.com/snellen-eye-chart

14. Noise
Source: Grammar Tales Blog
https://grammartales.wordpress.com/category/signs/
Can you find 985 in just a couple seconds?

15. Poor Communication
Methods
Charades
Choosing the wrong means of communicating, such as
“Charades”, will also stifle action.

16. Data Analysts commit the
same mistakes.

17. So small!
$0.8
$0.9
$1.0
$1.1
$1.2
$1.3
$1.4
$1.5
$1.6
$1.7
$1.8
$1.9
$2.0
Millions
Revenue

18. Noise
Source: Dashboard Junkie
http://www.dashboardjunkie.com/social-media-dashboard
How should the Marketing Manager determine what to do next?
Too many signals.

19. Poor Communication Methods
0.0
0.1
0.2
0.3
0.4
0.5
0.6
Ellen Dance
Rock
Taylor Swift
Punjabi
Is this the best way to signify how Taylor Swift is performing?

20. 1. Chart Type
2. Clean
3. Color
4. Size
The C’s of Data Visualization

21. 1. Examples
2. C’s
3. Dashboarding
4. Trends in Visualization
Overview

22. • Tableau, Domo, Looker
• Geckoboard
• Amplitude Analytics
• Mixpanel, Kissmetrics
• JS: wrapboostrap
• Chart.io, QlikView
8+2 Visualization Solutions
These are the data platforms/visualization solutions I recently reviewed.
Ask me on twitter if you have questions about these for your business.

23. Examples of Great
Visualizations

24. Source: USA Today Super Bowl Ads 2014
http://visual.ly/m/portfolio/science-of-superbowl-ads-usa-today/
Easy to visually determine the ROI.

25. Source: Michael Carper, Apparatus
http://www.tableau.com/about/blog/2013/12/viz-hall-fame-27270
Interactive. Easy to see biggest companies by state.

26. Source: Michael Carper, Apparatus
http://www.tableau.com/about/blog/2013/12/viz-hall-fame-27270

27. Source: Diana Gosi, Fuze
http://visual.ly/ugly-truth-about-meetings
Time in Meetings
Simple use of color to highlight. Simplicity.

28. Source: Diana Gosi, Fuze
http://visual.ly/ugly-truth-about-meetings
Time in Meetings
0%
10%
20%
30%
40%
50%
60%
Total Org. Middle Mgmt Upper Mgmt
Management Time in Meetings
If story is that Upper Mgmt wastes the most time, this would be
more effective.

29. Source: Ryan Sleeper - Evolytics
https://public.tableau.com/profile/osmguy
$100K $483K $45K
Adding just a few visual elements, makes the data story more engaging.

30. Source: Arsenal
https://www.facebook.com/Arsenal/
This is really just one image and clever use of font sizes to make a point.
You can do this with very little effort.

31. Chosen – where selfies compete

32. Chosen
Example app used for the next series of charts. With some demo
data I show how to best express the app’s performance.

33. Chosen, Ellen Show
Source: TechCrunch, 12/4/2015
http://techcrunch.com/2015/12/04/the-ellen-showsen/

34. Chart Types

35. What is the Story?
0.0
0.1
0.2
0.3
0.4
0.5
0.6
Ellen Dance
Rock
Taylor Swift
Punjabi
It is not clear what we are trying to say here. Changing the chart
type will help us better communicate our message.

36. Vertical Column Charts
are for showing
volume

37. Horizontal Bar Charts
are for
comparisons

38. Ellen’s Dance Off Highest Retention
Last Month
25%
28%
36%
48%
0% 20% 40% 60%
Retention by Game
(08/01 – 08/30/2015, n= 4.5K)
Ellen Dance
Rock
Taylor Swift
Punjabi Prayer
Notice how horizontal charts make it appear like the categories
are competing against each other?

39. Pie Chart
N. America
Ellen Dance Off
Country
Rock
Pop
Taylor Swift
Ed Sheeran
R&B
Rap
Grunge
Europe
Ellen Dance Off
Country
Rock
Pop
Taylor Swift
Ed Sheeran
R&B
Rap
Grunge
Asia
Ellen Dance Off
Country
Rock
Pop
Taylor Swift
Ed Sheeran
R&B
Rap
Grunge

40. Pie is for
eating not charting

41. Source: James Wright - YouTube
Patti Labelle Sweet Potato Pie
Video of James Wright singing about pie.

42. Horizontal Stacked Bar Chart
0% 20% 40% 60% 80% 100%
N.America
Asia
Players by Game
(11/2015, n=54K)
Ellen Dance Off
Country
Rock
Pop
Taylor Swift
Ed Sheeran
R&B
Rap
Grunge
Compared to pie charts, this is much easier to compare any
category between N.America and Asia.

43. Line graphs best for
trends

44. Trend Obvious
$0.8
$1.0
$1.2
$1.4
$1.6
$1.8
$2.0
Millions Revenue

45. Just OK At Comparison
0%
10%
20%
30%
40%
50%
60%
Retention by Game
Ellen Dance
Rock
Taylor Swift
Punjabi

46. Alternatives

47. 0%
5%
10%
15%
20%
25%
Conversion
0
10,000
20,000
30,000
40,000
50,000
Visitors
75%
80%
85%
90%
95%
100%
Retention
$0.8
$1.0
$1.2
$1.4
$1.6
$1.8
$2.0
Janua…
Febru…
March
April
May
June
July
August
Septe…
Octob…
Millions
Revenue
Add a 60% area chart, and change the data point formatting to no
fill. See how your eyes no longer get lost on this page?

48. Too Many Bar Charts?
0
1
2
3
4
5
2014 2015 2016 Proj
Revenue YoY
2014
2015
2016 Proj

49. Sunrise Chart
$5.0M
$3.5M
$2.5M
Revenue YoY
2016 Proj
2015
2014
If you are demonstrating growth, here is an alternative. Y-axis is
the and revenue are driven by the revenue in that year.

50. Source: Nelson Minar, Windhistory.org using D3.js
http://windhistory.com/station.html?KSFO
How about a Rose Diagram to show multiple dimensions.

51. Source: XpertRule Decision Tree
http://www.xpertrule.com/pages/tech_da_engine.html
Data Scientists: nobody understands this Decision Tree but you.

52. 5x
ARPU
1. Buy within 10mins
2. Come from a referral
If your conclusion from the Decision Tree is this, than just show
the results that matter.

53. Clean

54. Too Many Categories
0% 20% 40% 60% 80% 100%
N.America
Asia
Players by Game
(11/2015, n=54K)
Ellen Dance Off
Country
Rock
Pop
Taylor Swift
Ed Sheeran
R&B
Rap
Grunge

55. Reduce to
5-6 categories

56. Horizontal Stacked Bar Chart
Reduce to five categories
0% 20% 40% 60% 80% 100%
N.America
Asia
Players by Game
(11/2015, n=54K)
Ellen Dance Off
Country
Rock
Pop
Others

57. $0.8
$1.0
$1.2
$1.4
$1.6
$1.8
$2.0Millions
Revenue

58. $0.8
$1.0
$1.2
$1.4
$1.6
$1.8
$2.0Millions
Revenue
Removing unnecessary grid lines makes your chart easier to read.

59. Revenue ($M)
$1,538,212
Do you even need the axis if all they want to know is what is our
current value and are we improving?

60. 0%
5%
10%
15%
20%
25%
Retention
75%
80%
85%
90%
95%
100%
Retention
0.8
1.0
1.2
1.4
1.6
1.8
2.0
Janua…
Febru…
March
April
May
June
July
August
Septe…
Octob…
Millions
Visitors
0%
5%
10%
15%
20%
25%
Conversion

61. 23%
conversion rate
+2%
45,936
visitors
+5%
95%
retention rate
+3%
Most asked questions by decision makers are what is the current
value and are we improving. So why show line graphs (prev
slide) when we can show just what they want to see?

62. Color

63. Let the story
STAND OUT

64. Source: Github Kibana
https://www.mihneadb.net/a-github-river-for-elasticsearch/

65. Too Much Color
25%
28%
36%
48%
0% 20% 40% 60%
Retention by Game
(10/01 – 12/31/2015, n= 4.5K)
Ellen Dance
Rock
Taylor Swift
Punjabi Prayer

66. Gradient Colors
25%
28%
36%
48%
0% 20% 40% 60%
Retention by Game
(10/01 – 12/31/2015, n= 4.5K)
Ellen Dance
Rock
Taylor Swift
Punjabi Prayer
Simplifies the message. Darkest value gets the most attention.

67. Gradient Colors
25%
28%
36%
48%
0% 20% 40% 60%
Retention by Game
(10/01 – 12/31/2015, n= 4.5K)
Ellen Dance
Rock
Taylor Swift
Punjabi Prayer
1
1 5% improvement in Rock category
How to highlight an important result.

68. Which Games Should We Cross-Promote?

69. Which Games Should We Cross-Promote?
Dark Green is High Affinity
Removing the text and using affinity as the shading dimension, we
can now see that Ellen Dance Off and Taylor Swift should be
cross promoted.

70. Which Games Should We Cross-Promote?
Dark Green is High Affinity
Add values back if they are relevant to your decision makers.

71. Size

72. Can It Be Read From the Back?
16+pt axes fonts, 20-24pt title font
$0.8
$0.9
$1.0
$1.1
$1.2
$1.3
$1.4
$1.5
$1.6
$1.7
$1.8
$1.9
$2.0
Millions
Revenue
$1.0
$1.1
$1.2
$1.3
$1.4
$1.5
$1.6
$1.7
$1.8
January
February
March
April
May
June
July
August
September
October
Millions
Revenue

73. Does It Tell Your Story?
Scale Axes
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
Made a 2nd Purchase
0%
5%
10%
15%
20%
25%
30%
Made a 2nd Purchase
+10%

74. Does Scale Change the Story?
1,500,000
1,550,000
1,600,000
1,650,000
1,700,000
1,750,000
1,800,000
NumberofUsers
New Users

75. Does Scale Change the Story?
1.00
1.10
1.20
1.30
1.40
1.50
1.60
1.70
1.80
NumberofUsers
Millions
New Users
The previous slide made it appear that every dip was important,
when these are actually normal deviations. Increase your y-axis
scale to tell the story that there is little change.

76. Animation

77. Show Change in Static Chart
0%
10%
20%
30%
40%
50%
60%
Retention
November October

78. Simple Animation
0%
10%
20%
30%
40%
50%
60%
Retention
November October
If showing change over time with animation, use Sequence Effect Options in
Excel or growth in D3.js.

79. Show Change in a Static Chart
$2.7
$3.2
$0.8$0.7
$-
$0.5
$1.0
$1.5
$2.0
$2.5
$3.0
$3.5
$4.0
0 1 2 3 4
Revenue($M)
Weeks Active
Change in Key Performance Metrics
You don’t need animations if you always show older values in a
more transparent color.

80. Source: C3.js on pubnub.com
https://www.pubnub.com/blog/2015-02-26-building-realtime-live-updating-animated-graphs-c3-js/
Animated Donut Chart - C3.js

81. Dashboarding

82. 23%
conversion rate
+2%
45,936
visitors
+5%
95%
retention rate
+3%
Use size and contrast to draw focus. Dark colors are current
values, transparent colors are previous or unmet values.

83. 1. What happened?
2. How did we do against our goals?
3. Are we getting better at this?
Dashboarding Guidelines

84. 23%
conversion rate
+2%
visitors
+5%
95%
retention rate
+3%
45,936
50K
Encourage the team to meet their goals. Notice how you naturally
feel the need for the dark bars to complete the gray goals bar.

85. Establish a clear
GRID

86. Source: Color Admin Theme - wrapbootstrap
https://wrapbootstrap.com/themes
Poor gridding makes your eyes wander.

87. Source: Homer Theme - wrapbootstrap
https://wrapbootstrap.com/themes
Simple griding makes it easy to find information, esp. if grouped.

88. Draw in users eyes with
CONTRAST

89. Source: Cloudfront Theme - wrapbootstrap
https://wrapbootstrap.com/themes
Good contrast showing different data types above. Lower boxes
contrast is too high and competes for our attention.

90. Source: Github Kibana
https://www.mihneadb.net/a-github-river-for-elasticsearch/
What is important here?

91. Most important
information
TOP LEFT

92. Source: ClickTale Heatmap
http://www.clicktale.com
Web studies of our eye movements show the users mostly view the
top left of a page. This is where your most important results belong.

93. Simple use of color with this demo dashboard. How could it be
improved?

94. Jennifer Veesenmeyer
“How to Master the Art
of Dashboard Design”
@wholly_geek

95. Source: James Gonzales, Ryan Withop
Electronic Arts (EA)
412,000
Simple color scheme, bar chart for hitting goals, sizing metrics for
highlighting what is important, and a simple graphic.
You can do this too now.

96. Future of Visualization
• Open Source
• D3.js, Chart.js, Rmarkdown, ggplot2,
OpenStreetmap, wrapbootstrap
• Animation
• Easier creation of complex visualizations

97. 1. Understandable at-a-glance
2. Tell a Story
3. Actionable

98. 1. Chart Type
2. Clean
3. Color
4. Size
The C’s of Data Visualization

99. Doesn’t have to be beautiful,
but it does have to be
UNDERSTANDABLE

100. Ryan Withop
Former Sr. Mgr. Analytics, Electronic Arts
Analytics Lead, Chosen.fm
@RyanWithop
Data Visualization & Storytelling Tips
SF Analytics Summit 03/16