The Process

Questions & aims

Design

Data wrangling

Implementation

Questions

Who won?

What were the surprises?

Who were the heroes?

Surprise defeats?

What were the interesting matches?

etc.

Exploration? Art?

No message - just allow the user to explore.

Design

Pencil & paper

Data wrangling

node.js + Underscore.js

Implementation

D3 + HTML + SVG + CSS

Iterative

Overviews

Circular Match Tree

Tournament is a tree structure

Circle more space efficient than triangle

D3 partition layout

Match Table

D3 + HTML/CSS (no SVG)

Surprisingly usable

Top 32 Players

D3 + HTML/CSS (no SVG)

Transitions

Only shows top 32 due to space!

Player Grid

D3 + HTML/CSS (no SVG)

Sortable

Interaction

Shows all players in one screen

Who Played Whom?

Graph -> force directed?

SVG: paths (arcs)

Player Bubbles

(Who Defeated Whom?)

Another tree structure

Node = player & children = defeated players

D3 pack layout

Heroes

Scatter-plot

Games won vs. ATP points

We expect games won to increase with ATP points

Outliers are heroes or losers

Heroes

Hero score = sum of point differences (of unexpected win)

Simple bar chart - div elements

David & Goliath

Graph structure

Matches where winner defeated player of higher rank

D3 force-directed layout

Interesting matches

Match swings

For each match, show the game differences

Sort by 'swinginess'

D3 + HTML/CSS (no SVG)

The process

Design

Data wrangling

Implementation

Design

Pencil & paper + in browser design (no Illustrator/Photoshop)

Iterative process: design, implement, design etc.

Data wrangling

node.js + Underscore.js

5 sets of json (matches, players, matchtree, winstree, herograph)

Implementation

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