Visualising Sports Championship Data Using Treemaps – F1 Driver & Team Standings

I *love* treemaps. If you’re not familiar with them, they provide a very powerful way of visualising categorically organised hierarchical data that bottoms out with a quantitative, numerical dimension in a single view.

For example, consider the total population of students on the degrees offered across UK HE by HESA subject code. As well as the subject level, we might also categorise the data according to the number of students in each year of study (first year, second year, third year).

If we were to tabulate this data, we might have columns: institution, HESA subject code, no. of first year students, no. of second year students, no. of third year students. We could also restructure the table so that the data was presented in the form: institution, HESA subject code, year of study, number of students. And then we could visualise it in a treemap… (which I may do one day… but not now; if you beat me to it, please post a link in the comments;-)

Instead, what I will show is how to visualise data from a sports championship, in particular the start of the Formula One 2011 season. This championship has the same entrants in each race, each a member of one of a fixed number of teams. Points are awarded for each race (that is, each round of the championship) and totalled across rounds to give the current standing. As well as the driver championship (based on points won by individual drivers) is the team championship (where the points contribution form drivers within a team is totalled).

Here’s what the results from the third round (China) looks like:

Driver	Team	Points
Lewis Hamilton	McLaren-Mercedes	25
Sebastian Vettel	RBR-Renault	18
Mark Webber	RBR-Renault	15
Jenson Button	McLaren-Mercedes	12
Nico Rosberg	Mercedes	10
Felipe Massa	Ferrari	8
Fernando Alonso	Ferrari	6
Michael Schumacher	Mercedes	4
Vitaly Petrov	Renault	2
Kamui Kobayashi	Sauber-Ferrari	1
Paul di Resta	Force India-Mercedes	0
Nick Heidfeld	Renault	0
Rubens Barrichello	Williams-Cosworth	0
Sebastien Buemi	STR-Ferrari	0
Adrian Sutil	Force India-Mercedes	0
Heikki Kovalainen	Lotus-Renault	0
Sergio Perez	Sauber-Ferrari	0
Pastor Maldonado	Williams-Cosworth	0
Jarno Trulli	Lotus-Renault	0
Jerome d’Ambrosio	Virgin-Cosworth	0
Timo Glock	Virgin-Cosworth	0
Vitantonio Liuzzi	HRT-Cosworth	0
Narain Karthikeyan	HRT-Cosworth	0
Jaime Alguersuari	STR-Ferrari	0

F1 2011 Results – China, © 2011 Formula One World Championship Ltd

We can represent data from across all the races using a table of the form:

Driver	Team	Points	Race
Lewis Hamilton	McLaren-Mercedes	25	China
Sebastian Vettel	RBR-Renault	18	China
…	…	…
Felipe Massa	Ferrari	10	Malaysia
Fernando Alonso	Ferrari	8	Malaysia
Kamui Kobayashi	Sauber-Ferrari	6	Malaysia
…	…	…
Michael Schumacher	Mercedes	0	Australia
Pastor Maldonado	Williams-Cosworth	0	Australia
…	…	…
Michael Schumacher	Mercedes	0	Australia
Pastor Maldonado	Williams-Cosworth	0	Australia
Narain Karthikeyan	HRT-Cosworth	0	Australia
Vitantonio Liuzzi	HRT-Cosworth	0	Australia

Sample of F1 2011 Results 2011, © 2011 Formula One World Championship Ltd

I’ve put a copy of the data to date at Many Eyes, IBM’s online interactive data visualisation site: F1 2011 Championship Points

Here’s what it looks like when we view it in a treemap visualisation:

The size of the boxes is proportional to the (summed) values within the hierarchical categories. In the above case, the large blocks are the total points awarded to each driver across teams and races. (The team field might be useful if a driver were to change team during the season.)

I’m not certain, but I think the Many Eyes treemap algorithm populates the map using a sorted list of summed numerical values taken through the hierarchical path from left to right, top to bottom. Which means top left is the category with the largest summed points. If this is the case, in the above example we can directly see that Webber is in fourth place overall in the championship. We can also look within each blocked area for more detail: for example, we can see Hamilton didn’t score as many points in Malaysia as he did in the other two races.

One of the nice features about the Many Eyes treemap is that it allows you to reorder the levels of the hierarchy that is being displayed. So for example, with a simple reordering of the labels we can get a view over the team championship too:

The Many Eyes treemap can be embedded in a web page (it’s a Java applet), although I’m not sure what, if any, licensing restrictions apply (I do know that the Guardian datastore blog embeds Many Eyes widgets on that site, though). Other treemap widgets are available (for example, Protovis and JIT both offer javascript enabled treemap displays).

What might be interesting would be to feed Protovis or the JIT with data dynamically form a Google Spreadsheet, for example, so that a single page could be used to display the treemap with the data being maintained in a spreadsheet.

Hmm, I wonder – does Google spreadsheets have a treemap gadget? Ooh – it does: treemap-gviz. It looks as if a bit of wrangling may be required around the data, but if the display works out then just popping the points data into a Google spreadsheet and creating the gadget should give an embeddable treemap display with no code required:-) (It will probably be necessary to format the data hierarchy by hand, though, requiring differently layed out data tables to act as source for individual and team based reports.)

So – how long before we see some “live” treemap displays for F1 results on the F1 blogs then? Or championship tables from other sports? Or is the treemap too confusing as a display for the uninitiated? (I personally don’t think so.. but then, I love macroscopic views over datasets:-)

PS see also More Olympics Medal Table Visualisations which includes a demonstration of a treemap visualisation over Olympic medal standings.