World Cup Data Visualisation in D3.js

The World Cup games data visualisation below is based on the exercise in the Udacity Data Visualization and D3.js - Communicating with Data course.

Modifications

• Instead of displaying one circle per World Cup hosting country representing total attendance, a circle is displayed for each stadium hosting World Cup matches. Each circle size represents the median attendance in the respective stadium.
• Implemented mouseover events to display the country names.
• Implemented mouseover events to display the stadium and city name, along with the number of matches played in each, and the minimum, maximum, median and mean attendance.
• The code has also been extensively refactored, using objects, to make it more reusable. For instance, the world map can be reused in other charts by making use of the WorldChart object.
• The World Cup through history animation can also be viewed at any time, not just on page load.
• Individual World Cup years can be viewed through the years drop-down list.
• Fixed the geo location of the Luis Casanova stadium in Valencia, which in the original file was located in Mexico.
• Fixed all stadium and location names that required non-latin unicode characters.

Aim of Animation

The goal of the above animation is to show how the World Cup evolved through the years. In the first few editions of the World Cup only some countries participated. In contrast, recent editions have seen countries from all over the world participating.

Also, the matches used to be held in a few stadiums, whereas in recent editions matches are hosted in various stadiums spread out all over the country. This is particularly apparent if one compares the 1950 World Cup with the 2014 World Cup, both held in Brazil. In the 1950 edition all matches were held in 6 stadiums. On the other hand, in the 2014 edition matches were held in 11 stadiums.

One final aim of the animation is to show how match attendance increases over the years. This is apparent through the circle sizes. In the Udacity course, the instructor suggests one explanation for this could be that mass transit over the globe via airlines, which is both convenient and affordable, made it possible for many more fans to watch their home country play.

Data

The world map data is in GeoJSON format, world_countries.json, as provided in the above mentioned Udacity course.

The World Cup matches data file, world_cup_geo.tsv, is a tab separated values file based on the one provided in the above mentioned Udacity course. For each game the latitude and longitude geo location is also provided, making it possible to plot circles on the world map.

Note: The geo location of the Luis Casanova stadium in Valencia, Spain has been fixed in this file. Furthermore, the international names of stadiums and locations have been fixed by using Unicode.