March 8, 2012

D3 Lap Charts

A while ago I blogged about lap charts; I compared the static charts used by the FIA to visualize Formula 1 Grand Prix races, with an interactive "stack flow" created using Impure to visualize rankings of the world's most populous cities.  I concluded that the stack flow's interactivity improved the ability to make sense of such charts.

To put this to the test I've created an interactive lap-chart using D3.js.  It visualizes the Australian 2010 Formula 1 Grand Prix.  The interactive version allows you to highlight a driver's race by positioning your mouse cursor over his name or lap trace.  If you don't have a modern browser (Firefox, Chrome, Opera, Safari or IE + Chrome Frame) then you can refer to the images shown below.

Australian 2010 Formula 1 Grand Prix Lap Chart implemented in D3.js
Highlighting Felipe Massa's race

It's much easier to make sense of the interactive lap chart compared with the static chart used by the FIA.  However, there's still room for improvement.  Around laps 8, 9 and 10 most of the drivers make a pit stop.  This results in many brief but significant changes in race position.  Even with interaction it's a bit messy.  This could be improved by adding interactive zooming, e.g. click on a lap and it (and neighbouring laps) will expand horizontally making it easier to see the rapid changes that occur over the space of a few laps.  Something for version 2.0 perhaps.

The visualization is shared using a Creative Commons license, and the source-code is available on GitHub.  You can use the visualization with your own race data.  Simply place it in a JSON object file and refer to it from the code.

The JSON object is an associative array with values for
  • lapCount: the total number of race laps
  • laps: the lap data for each driver, which is an associative array with values for
    • name: driver's name
    • placings: placing at the end of each lap completed (first value is grid position)
    • accident: lap(s) on which an accident occurred
    • pitstops: lap(s) on which the driver pitted
    • mechanical: lap(s) on which mechanical failure occurred
  • lapped: the race positions that were lapped by the lead driver (-1 indicates none)
  • safety: the laps on which the safety car was deployed