by Peter Cook / @prcweb / www.prcweb.co.uk
Freelance data visualisation and web development
Brighton based
Portfolio and more at prcweb.co.uk
Question: how many ways can a single dataset by visualised?
Data: Wimbledon 2012
Comma separated value (CSV) data from tennis-data.co.uk
Single table, each row represents a single match
Each match consists of: round, player names, ATP points, games won in each set etc.
Questions & aims
Design
Data wrangling
Implementation
Who won?
What were the surprises?
Who were the heroes?
Surprise defeats?
What were the interesting matches?
etc.
No message - just allow the user to explore.
Pencil & paper
node.js + Underscore.js
D3 + HTML + SVG + CSS
Iterative
Match overview
Player overview
Hybrid?
___
Tournament is a tree structure
Circle more space efficient than triangle
D3 partition layout
D3 + HTML/CSS (no SVG)
Surprisingly usable
D3 + HTML/CSS (no SVG)
Transitions
Only shows top 32 due to space!
D3 + HTML/CSS (no SVG)
Sortable
Interaction
Shows all players in one screen
Graph -> force directed?
SVG: paths (arcs)
Another tree structure
Node = player & children = defeated players
D3 pack layout
Games won vs. ATP points
We expect games won to increase with ATP points
Outliers are heroes or losers
Hero score = sum of point differences (of unexpected win)
Simple bar chart - div elements
Graph structure
Matches where winner defeated player of higher rank
D3 force-directed layout
For each match, show the game differences
Sort by 'swinginess'
D3 + HTML/CSS (no SVG)
Design
Data wrangling
Implementation
Pencil & paper + in browser design (no Illustrator/Photoshop)
Iterative process: design, implement, design etc.
node.js + Underscore.js
5 sets of json (matches, players, matchtree, winstree, herograph)
D3/HTML/CSS/SVG in fairly equal measure
Main uses of D3: binding data to HTML/SVG elements, binding events, selection, layouts
Nothing out of the ordinary
How many ways can a single dataset be visualised? At least 10!
Start with questions
Consider exploratory visualisations too
Iterative design
Setting a challenge results in creativity
Peter Cook / @prcweb / prcweb.co.uk
___
One day beginner's D3 workshop
Brighton 3rd July 2013
Discount code: londond3