Visualizing the World Cup

Home | World Cup Visualization | Fake Heatmap Generator

An interactive view of the teams that played in the World Cup finals since FIFA began the tournament in 1930.

Roll your mouse over the team's national flag to see which years they made it to the World Cup Finals. (Blue bars mean they won, red means they lost).
Mouse over the years to see that year's matchup.

What are we looking at here?

The visualization above is accomplished using html5 and css3 and by viewing it in a modern web browser. If you are using internet explorer all you'll see is an unordered list!

I've aped robby macdonell's nhl html5 piece and repurposed it for the world cup. I learned a great deal about html5, css3, javascript, jquery, and world cup soccer doing this. Thanks again to robby macdonell's pioneering efforts and his graciousness in sharing his code.

Learn more about robert ivan at metaprinter.

What happened in 1942 and 1946?

World War 2 prevented the World Cup from being played.

Other interesting notes

Bookmark and Share

HTML5/CSS3 rocks

This webpage is also an exploration of several display technologies available in modern web browsers (canvas, font-embedding, css transitions, etc). I wanted to see how rich of a visualization I could create using nothing more than CSS and javascript.

Webkit Browsers (Safari, Chrome)

You get the full experience. YAY!

Firefox (3.6.x)

You get 98% of it, but there's some css animation sizzle you're missing out on.

Firefox (4.0 beta )

You get the full experience. YAY!

Internet Explorer

This fails completely in all versions of IE