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.
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.
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.
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.
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:
Below you can see my first stab at this. Tap anywhere on the graph to switch between the traditional and visual view.
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.
This is the up to date table for this season, using football-data.org's API to provide the latest data.
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