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
