Wednesday, July 15, 2015

Visualising 2015 Tour de France yellow jersey data

The Tour is here! I have always been fascinated by how GC (General Classification) contenders fight for their rights to wear the yellow jersey up in the mountains of the Pyrenees and the Alps. Names like Col du Tourmalet and L’Alpe d’Huez evoke scenes of epic battle between climbers riding out of the saddles, pushing their very limits.

So I decided to have a go at visualising the stage-by-stage times for the top yellow jersey contenders, to see how they gain and lose ground over the 21 stages.

Voila:

http://www.seewah.com/tour-de-france-2015/


I used the excellent (and free) import.io tool to extract data from http://www.letour.com/le-tour/2015/us/. By creating an import.io extractor, I was able to


I then wrote a couple of Node.js scripts to, on a daily basis,

  • fetch fresh data using the REST api and persist results from each individual stage into MongoDB
  • create and persist the json array required by the Google Charts library to render the line chart, based on the latest top 10 GC contenders

I came across the problem of having too many asynchronous operations (e.g. MongoDB queries) to manage in the second script. To avoid callback hell, I gave the q npm package a go. While I had been using jQuery promise (on the client side) for years, this was the first time I tried such technique in Node.js on the server side. Good news is the package worked a treat - below is a simple code snippet to illustrate how simple it was to use:

p.s. Today Chris Froome destroyed everyone during the climb up La Pierre-Saint-Martin to stretch his advantage to 2 minutes 52 seconds. Let's see whether he can maintain his lead all the way to Paris!