Peter Cook / @animateddata
animateddata.co.uk
Data visualisation designer & developer
Data Visualisation Brighton Meetup organiser
(Next Meetup on Tues 24th June)
William Playfair (1805)
www.xcellextech.com/Blog/2010/06/designing-interactive-excel-2007-charts/
www.nytimes.com/interactive/2013/05/25/sunday-review/corporate-taxes.html
Exploration
Analysis
Insight
Informing
Story telling
Spreadsheet from tennis-data.co.uk
Single table, each row represents a single match
Each match consists of: round, winner, loser, ATP points, games won in each set etc.
It starts with questions
Data exploration
Data analysis
Excel
Tableau
R + ggplot2 (free)
Python / ipython / pandas / matplotlib (free)
qplot(Sepal.Length, Petal.Length, data = iris, color = Species,
size = Petal.Width)
blog.echen.me/2012/01/17/quick-introduction-to-ggplot2/
titanic = pd.read_excel("data/titanic.xls", "titanic")
bp = titanic.boxplot(column='age', by='pclass', grid=False)
for i in [1,2,3]:
y = titanic.age[titanic.pclass==i].dropna()
x = np.random.normal(i, 0.04, size=len(y))
plot(x, y, 'r.', alpha=0.2)
Excel
Tableau
R + ggplot2 (free)
Python / ipython / pandas / matplotlib (free)
NodeBox (free)
http://www.datadrivenconsulting.com/2010/02/data-visualization-challenge-my-dashboard-design/
Power Map plug-in
Highcharts, Google Charts etc.
D3
Custom coded (SVG, Canvas)
See also datavisualization.ch
Off-the-shelf charts
Usually requires custom coding
Custom coded
Driven from tab-separated-value data
www.nytimes.com/interactive/2013/05/25/sunday-review/corporate-taxes.html
Custom coded
HTML5 Canvas element
www.bbc.co.uk/blogs/internet/posts/BBC-Online-20-data-visualisation
Primarily programmatic (JavaScript)
More often than not, driven from spreadsheet (CSV) data
Usually use D3, but not always
Mix of Excel & custom scripts
Moving towards Python, pandas etc.
Browser based
Load data in from csv or JSON
Simple reformatting
D3 & custom code to present data
Data from World Bank
Matrix of migratory flows (spreadsheet)
Convert into JSON format using Python (offline)
{"Canada":
{"totalIn": 7202340,
"totalOut": 1185392,
"out": [
{"country": "United States", "amount": 834945}
],
"in": [
{"country": "China", "amount": 543573},
{"country": "Germany", "amount": 199541},
{"country": "Guyana", "amount": 101505},
{"country": "Hong Kong, China", "amount": 250786},
etc.
Python is often used server-side so this could be live data...
Simple webpage (one HTML file)
Load in JSON using JavaScript
Draw map using SVG, JavaScript and D3
Peter Cook / @animateddata
Data Visualisation Brighton meetup
24th June 7.30pm
@datavisbrighton