Tag Archives: football

Interactive Tournament Map

Interactive Tournament Map

I hadn’t followed the UEFA 2012 European football championship (called soccer in the US) and wanted to catch up on where things stand. Enter the interactive tournament map on the official UEFA website:

Row selection highlights games at that stadium

When you first enter the map it animates the timeline from left to right by drawing the colored lines for each team. The tabular layout shows time in daily columns from left to right and teams in rows by 4 tournament groups. Today’s day column is always highlighted. Here are some of the interactive elements:

  • Mouse over any of the colored lines highlights the corresponding team’s games along it’s timeline.
  • Clicking on a particular day column header highlights the games played on that date.
  • Clicking on the stadium symbol at the right end highlights the games played at that stadium.
  • Clicking on any circle brings up a dialog with details for that game.
  • Clicking on a row header on the left brings up a dialog with details for that team.
  • Selecting the tournament stage at the bottom (quarter-, semi-, final) moves to the date interval.

Detail for team Spain

Spain is the reigning football world champion, so they are clearly one of the favorites of this tournament and will actually play their semi-final against Portugal later this evening.

The final will be played in the Olympic Stadium in Kyiv, capital of participating host country Ukraine.

Detail with game schedule for stadium

From these details you can click on the games and get to yet more detail (videos, comments, etc.) for that particular game.

When I first looked at the map, the amount of information displayed had me a bit confused. The color scheme is often difficult to separate, for example the three orange-red tones in Group B. The black background feels attractive, although I could do without the pattern overlay, which doesn’t add information and only distracts. Lastly, I could do without the colorful advertisements around the map. On first glance I thought the stadium symbols on the right were also just colored ads.

The interactive nature made the map grow on me. It’s intuitive and the tabular layout easy to navigate. You may not have a screen wide enough to see the map in its entirety, but I suppose you wouldn’t want to see time down the vertical axis, would you?

Postscript 7/1/12: Sure enough, Spain beat Italy 4:0 in today’s final and went on to become the European football champion 2012.

Leave a comment

Posted by on June 27, 2012 in Recreational


Tags: , , , , ,

%d bloggers like this: