Celebrating the World Cup Visualizations

Nick Myers

July 7, 2010

We really enjoyed watching the World Cup over lunch here in the Cooper office. The games sparked many conversations about soccer, beloved sporting traditions, and why FIFA is so bloody minded about goal-line technology use (okay, maybe that last one was just from a bitter England fan).

It's also been a time to admire the many new and unusual visualizations used for the tournament brackets, game-by-game breakdowns, and statistical replays. For the fans that wake up in the coming weeks with an empty feeling, perhaps this library of visualizations will provide a glimmer of comfort and distraction until the next tournament. (That is unless you're an England fan.) There are many visualizations to look at here but if I could suggest one to look at closely it would be the Guardian twitter replay. The best of the bunch.

And of course, congratulations to Spain on winning the World Cup!

Game Schedules & Results

The classic visualization for the World Cup is the table breakdown and brackets. For any hardcore fan this is the most exciting visualization where supporters can see their team's road to the final and victory.

MARCA World Cup calendar
One stadium visualization received plenty of attention for it's beautiful form and elegant interaction but, for me, it failed to illustrate the future match-ups. I never could understand the rationale of the order of the teams either.

World Cup radial bracket poster
While just a poster, this visualization gives a very quick glimpse into potential future opponents. It also is beautifully designed with bright colors and typography. Sadly, it isn't interactive.
Game tracker from Positive
This beautiful visualization was good for the early tournament rounds and arranged game schedules on a circular arc. The smooth rotation allows for a wonderful spin of the wheel but fails to offer deeper information.

BBC Sport brackets
The classic tables and brackets are the best way to see the World Cup schedules and results. The BBC news site does a great job of presenting table data and brackets on one screen.

ESPN Soccernet brackets
ESPN also presents the brackets in a condensed manner. Both ESPN and BBC provide easy access to team data through these visualizations.

Analysis

Supporters can follow match statistics during and after games to get a sense of the player performance, team possession, and game commentary.

New York Times
The New York Times has an interesting analysis visualization for each game. Probably the most interesting of these visualizations is their heat maps that represent the action from minute to minute. Passes are also illustrated by the minute. Sadly there's no composite representation for the entire game for each of these visualizations which would provide additional data for the match. One minute increments also don't accurately portray the flow of the game. It might be better to summarize information in five minute chunks that tend to represent possession more clearly. The overview displays a nice breakdown of stats in a sparkline view.

Mint Digital iPad challenge
Mint Digital's iPad application shows one of the best illustrated maps of possession. The size of the player squares indicates influence and the possession line shifts to reflect the balance of play. Other screens are filled with stats in a very simple, sleek visual design.

Visual sport
Visual sport shows match stats and key plays on the field. Some of the visualizations are interesting but the data is hard to grasp and minuscule in size. The player portraits are a nice touch and comical, but the visualization reflects a dry feel for what is a more dramatic event.

ESPN Soccernet commentary
The better analysis tools tend to be accompanied by live commentary from skilled journalists. Again, I look at the BBC and ESPN sites for best analysis coverage. ESPN's visualization is not only very well rendered but allows for visitors to instantly access video replays and see in-depth coverage of stats, conversations and photos.

Social Spectating

Twitter has had a larger impact on the World Cup than any other technology in 2010. There are many instances where twitter technology has been put to good use to bring supporters together from across the globe.

Guardian Twitter replay
My favorite visualization of the tournament by far has been the Twitter replays on the Guardian news site. This replay tool lets visitors see how Twitter reacted during every game. The animation feels very reactive during key moments in the game and it's almost as if the animation behaves like a crowd.

CNN Twitter
CNN's Twitter buzz map presents each country with the most buzz in order and size priority. You can also see player and topic buzz. The visualization is current and changes often on some feeds but is not as compelling as the Guardian's site. It is most interesting to watch during a game as is the Twitter World Cup match live tweet.

Recaps

These examples are not strictly visualizations but highlight some interesting ways that game highlights are viewable.

LegoFussball
A humorous slant on game replays was illustrated by the site, Lego Fussball. The major highlights of the game were recounted with original commentary using lego bricks.

ESPN 3 video replay
One of the most unique interactions exists in the ESPN 3 video interfaces. Key moments in the game are marked on a timeline that can be selected to view the replay. This happens while regular video play continues as an added benefit.

Miscellaneous

These additional visualizations don't service supporters' major goals but are still worth a look.

Estadio
Estadio is a rich visualization that maps international players to the different professional leagues they play in. Rolling over the visualization clarifies some of the relationships by filtering out some of the noise. Interesting note: that the German, English and Italian players all play in their national leagues.

Google search results
The visualizations on Google's search results appear when users search for relevant information and it's a pleasant surprise to be presented with such specific and relevant information. Very thoughtful, goal-directed design.

New York Times Facebook player mentions
And finally, the New York Times recently added a new visualization representing player mentioned on Facebook by day. The size of each player represents their general popularity for that day. A nice, fluid, and visually interesting diagram.

FusionCharts
While not the most visually stunning example from the bunch, this visualization from FusionCharts paints a larger picture using multiple visualizations together. The illustration of the countries, match total, and Fifa World Cup trophy are all very simply presented.

Umbro Infographic
This beautiful and dense visualization represents passes, shots, and goals throughout the tournament for every game. The information is presented as sparklines and there are some nice details not to be missed such as overtime, penalties, and the world cup winners.