FIFA World Cup Dashboard

An interactive visual dashboard with instant cross-filters enabled to help explore the world cup attendance over the years.

Home Team
Away Team
Stage
Winners

Project Description

A Dashboard showing multiple charts to explore, using filters, the historical attendance of the FIFA world cup.

The main chart is a Bar Chart, clicking on it will filter the data to that year. Multiple filters can be selected at once. There are 2 selectable lists showing the home and away teams, they will be filtered along side the bar chart and the column chart. The column chart shows the stages of the tournament for that year (it changes in format over the years). Finally the winners pie chart, only shows the total winners of the world cup, but filters do not apply on it.

It is created using DC.js, which is a charting library with native crossfilter support.

DC.js library allows for the creation of multiple charts that can be natively supported by crossfilter which makes it easier to filter on one chart and allow for those filter to take effects on the rest of the dashboard.

Project Technicals

  • Dashboard created using dc.js Charting Library
  • Crossfilter library used to allow for fast multidimensional filtering for coordinated views. For example, if you pick a home team and an away team, it will show you all the matches they played and in what stage/year it was. The only exception here is the pie chart, it's made to only show the winners by percentage and does not include the filter feature
  • Data format is in TSV
  • The dashboard is responsive and will adjust to all screen sizes
  • Colours used in the bars/legend/pie chart have different hues representing different values, generated from Color Brewer 2.0
  • Tooltips appear on hover showing various data depending on the chart