Drawing project

Data visualisation

Ever since watching Hans Rosling's famouse TED talk I've had an interest in data visualisation and I've always enjoyed having the chance to use d3 to build data visualisation for the web. Here are a couple of examples.

Visualising my steps

Like most people, I use my phone to track my steps with the aim of hitting the magic 10,000 daily step target. As I use a Google Pixel 2 phone, my health data is available through an API, which means I got to spend a day turning my step data into a little visualisation built in d3.js and Preact.

Visualising heartrate data for mammals

A submission I made for the Reddit r/dataisbeautiful DataViz Battle for the month of August 2019: Visualize heart rates, masses, and longevity of select mammals

Visualising a season of football data

The 2018/2019 Premier League football season was one of the closest ever, with the title being deciced by a single point on the final day. In addition the overall lead in the title race changed hands over 30 times.

I created a single page app that tells the story of the season from start to finish, demonstrating the closeness and dynamic nature of the title race.

Open visualisation

Reimagining the football league table

Football league tables have been around as long as we've had football leagues. A simple table whose design was intended to be printed in newspapers, the only media format available in 1888 when the first season of the Football League was played.

League table from Derbyshire Courier - Saturday 27 October 1888

Fast forward 150 years and if you open the BBC Sport app you'll see a table format that has barely changed since that first season.

We're now used to data being visualised to make it easier to see patterns in that data, and to be able to use clicks and taps to interact with the visualisation. I wanted to see how a interactive data visualisation of a league table might look so I set about building a new format with the following requirements in mind:

  • It should show the distribution of points. Teams' points are not distributed evenenly from top to bottom of the table so you shuld be able to see how the teams are distributed at a glance
  • It should have the same aspect ratio of an existing table so it could be droped in to replace a table wherever they are found now
  • It should be mobile optimised
  • It should have the ability to switch between the visual view and the traditional view so that you still have the option so see the table data

Below you can see my first stab at this. Tap anywhere on the graph to switch between the traditional and visual view.

2017/2018 Season

Manchester City won the 2017/2018 by 19 points with a record breaking total of 100, and this is clearly visible in they graph view.
You can also see how closely bunched together all the teams in the bottom half of the table are.

Current Season

This is the up to date table for this season, using football-data.org's API to provide the latest data.

SecondSync dashboard

At SecondSync, the heart of our product was the graph which showed tweets per minute for every TV we traced. This was again built using d3 and it featured a sexy animation when you zoomed in on a time period, that I'm particularly proud of. You can see this in the video below