What is good data visualisation. How do we apply best practises of data visualisation at scale? How do we make sure that all visualisations produced by your analytics team both look good and is effortless.

1. Agile Data Visualisation
Volodymyr (Vlad) Kazantsev
Head of Data Science at Product Madness

2. volodymyrk
About myself
MS Math,
Probability Theory
Kiev, 1999-2004
Graphics
Programming,
Video Games
Kiev, 2002-2005
Visual Effect
Programming
Berlin, Sydney, London
2005-2010
MBA
London Business
School
2010-2012
Product Manager
(King, Splash Damage)
2012-2013
Head of Data Science
2013-present

3. volodymyrk
Product Madness
● Social Casino Games - not gambling
● 60 people in London, 30 in San Fran, 25 in Minsk

4. volodymyrk
Product Madness in Rankings
iPad rankings, US iPad rankings, Australia

5. volodymyrk
Data Science at Product Madness
● Team of 6
● Analyse product releases, A/B tests, etc.
● Audit Marketing activities
● Dev/support of DWH (AWS Redshift)
● analysis: ipynb, pandas, matplotlib, scipy..
● products: Flask, AWS, D3.js
● .. and SQL

6. volodymyrk
Data Visualisation at Product Madness
1. Research and ad-hoc analysis
2. Self-Service Dashboards
3. Self-service Big Data BI

7. volodymyrk
What is Advanced Visualisation?
- Effective
- Not limited by immediately available tools
- Impressive

8. volodymyrk
People still make those .. in 2015
100% Real charts taken from company’s
Strategy meeting

9. volodymyrk
My rules for Effective Data Visualisation
1. Keep it simple
2. Keep a high data-ink ratio
3. Consistency is important
4. Mind the Context

10. Effective Data
Visualisation in
IPython

11. This does not look great
by default.
(but defaults are much
improved, especially
with seaborn)

12. publish()
1. formats the chart
2. create chart label (large font)
3. saves “Random Data.png”
into “Images” folder with high
DPI

13. volodymyrk
Python Visualisations for reports
compared to Matplotlib:
1. no borders
2. double width lines
3. markers
4. Cynthia Brewer colors
5. borderless legend
6. light-grey grid lines
7. slightly darker grey on
x-axis
8. ticks outside, x-axis
only

14. volodymyrk
Python Visualisations for reports
● White background for presentations
● Avoid vector formats (.svg, .swf). Use high DPI .png
● Consistent style, colors and fonts make reports look professional

15. Web-based
Dashboards

16. volodymyrk
Dashboards, V1

17. volodymyrk
Dashboards, V2 - Tableau

18. volodymyrk
Dashboards, V2 - The Style Guide
❑ Charts should be 800px wide, the dashboard no wider than 1000px. Charts height: 200-300px
❑ Charts BG RGB: 238 243 250
❑ Dates should be formatted “d mmm” e.g. “7 Jan”. Only include the year if absolutely necessary
❑ Don’t show unnecessary precision: 0.50% is the same as 0.5%
❑ Bar charts always start their axis at 0
❑ A line graphs’ axis should start wherever makes the average slope 45º
❑ Add titles for Chart (centered, bold), axis too (if not obvious)
❑ Add “Updated at … UTC” in the bottom of the first chart in Dashboard
❑ Still looking for a perfect Date selector.. Use Default Tableau one, not minimalistic one.
❑ Filters should apply to all charts in a dashboard
❑ No scrolling anywhere on the dashboard. Browser has a scrolling bar already. Huge legends/filters are useless.

19. volodymyrk
❑ Charts should be 800px wide, the dashboard no wider than 1000px. Charts height: 200-300px
❑ Charts BG RGB: 238 243 250
❑ Dates should be formatted “d mmm” e.g. “7 Jan”. Only include the year if absolutely necessary
❑ Don’t show unnecessary precision: 0.50% is the same as 0.5%
❑ Bar charts always start their axis at 0
❑ A line graphs’ axis should start wherever makes the average slope 45º
❑ Add titles for Chart (centered, bold), axis too (if not obvious)
❑ Add “Updated at … UTC” in the bottom of the first chart in Dashboard
❑ Still looking for a perfect Date selector.. Use Default Tableau one, not minimalistic one.
❑ Filters should apply to all charts in a dashboard
❑ No scrolling anywhere on the dashboard. Browser has a scrolling bar already. Huge legends/filters are useless.
Dashboards, V2 - The Style Guide
No Version Control
Maintenance takes time
..and still no good Date Selector

20. Self-service
Big Data BI

21. volodymyrk
BI Tools Triangle
Easy to setup
for IT & Data teams
Easy to use
for end users
Powerful
for end users

22. volodymyrk
Scale
● Code naturally promote
reuse-ability
● Code have version-control
● You never really “develop
from scratch”

23. volodymyrk
Dashboards, V3 - Flask+JS
Front End:
- dc.js
- bootstrap.js
- colorbrewer.js
Back End:
- Flask
- pandas
- Redshift (data cubes)
- S3: csv cache

24. volodymyrk
Tech Stack
● Redshift Back-End (ELT+Cubes)
● Python, Flask, Pandas
● DC.js, scrossfilter.js, D3.js

25. volodymyrk
Self-Serve Big Data BI
● Tableau client
● Looker
● ElasticSearch + Kibana
● Bokeh

26. volodymyrk
Summary
● Good looking visualisation is better than an ugly one
● Interactivity leads to more insights
● Consistency matters; Code allows to style once
● You never really “develop from scratch”, or “just use
off-the-shelf” tool
● Mind your team capabilities and aspirations
● Don’t be limited by your existing tool(s)

27. volodymyrk
Questions?
W
e are hiring