FIFA World Cup Appearances

.block

license: gpl-3.0
height: 560
border: no

README.md

Anticipating the 2010 FIFA World Cup, DataMarket decided the tournament was a great excuse to spend a little time cooking up something fun. Someone suggested going with a World Cup riff on Ben Fry's Fortune 500 visualization. Lacking a better suggestion we ran with it.

The result is a schoolbook example of how a simple thing can scale in complexity incredibly quickly. It should have been immediately obvious that this wasn't going to work.

Ignoring the fact that the visualization doesn't suit the data at all. The data, once we starting really looking at it, was way too complicated:

• Countries fragment and even rejoin (in the case of Germany). FIFA has official decisions on what happens where. This fragmentation needed to be shown, however, somehow.

• The final order of the teams may have joint seat placing. Because no one really cares about anything other than the first 3-4 places.

• We prepared flags for all countries, this takes time for 81 countries (some of which no longer exist). Unless you have a system to do so (we didn't).

• At the time, we had not properly solved vector graphics for Internet Explorer. I can't remember what our plan was for that (we ended up with only text highlighting).

Things like this can cost you a lot of time to work around. In order to show the history of Yugoslavia, you first need to understand the breakup of Yugoslavia. And then you need to annotate the data.

So the short of it is that we simply ran out of the time we had to spend on it. We pushed what we had managed to do live. Despite having had fun working on it, I guess none of us felt super proud of it. At least, it always bothered me that the thing never looked anything like our original vision for it.

So I've finally gone back and finished it. Not great, but at least it looks closer to how we envisioned it. For many of us, what it really ended up being was a harsh lesson in effort estimation.

driver.js

/* globals d3 */
const svg = d3.select('svg');
const margin = { top: 10, right: 0, bottom: 0, left: 0 };
const width = +svg.attr('width') - margin.left - margin.right;
const height = +svg.attr('height') - margin.top - margin.bottom;

const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);
const plot = g.append('g').attr('transform', `translate(${margin.left},${margin.top + 100})`);
const table = g.append('g').attr('transform', `translate(${margin.left},${margin.top + 100})`);

g.append('text')
  .attr('class', 'hint')
  .text('Hover the mouse cursor on a country code to see the history of the country\'s World Cup participation. Click to compare two countries.')
  .attr('y', height - 5);

const parseRow = row => {
  row.host = row.host.split(' ');
  row.tags = row.tags.split(' ');
  row.year = +row.year;
  row.place = +row.place;
  return row;
};

function updatePanels (team1, team2) {
  const teams = g.selectAll('.team')
      .data([ team1, team2 ], d => d ? d.team : '--');

  teams.exit().remove();

  const teamsEnter = teams.enter()
    .append('g')
      .attr('class', 'team')
      .attr('transform', (d, i) => `translate(${i * width / 2},0)`);

  teamsEnter.append('image')
      .attr('x', 1)
      .attr('height', 50)
      .attr('width', 76);

  teams.merge(teamsEnter)
      .transition()
        .attr('transform', (d, i) => `translate(${i * width / 2},0)`)
    .selectAll('image')
      .attr('href', d => {
        return d ? `https://upload.wikimedia.org/wikipedia/commons${d.flag}` : '';
      });

  const textLines = teamsEnter.merge(teams)
      .selectAll('text')
      .data(d => {
        if (d) {
          return [
            { text: d.name, size: 24, y: 0 },
            { text: `${d.year} – ${d._tied ? 'Joint ' : ''}${d.place}. place`, size: 18, y: 28 }
          ].concat(
            d.note
              ? d.note.split('\n').map((t, i) => ({ text: t, y: 52 + i * 15 }))
              : []
          );
        }
        return [];
      });

  textLines.exit().remove();

  textLines.enter()
    .append('text')
      .attr('font-size', d => d.size)
      .attr('dy', '.8em')
      .attr('y', d => d.y)
      .attr('x', 85)
    .merge(textLines)
      .text(d => d.text);
}

d3.json('./teams.json', (err, teamList) => {
  if (err) { throw err; }
  d3.csv('./fifa.csv', parseRow, (err, allResults) => {
    if (err) { throw err; }

    // console.log(allResults);
    allResults.forEach(d => {
      Object.assign(d, teamList.find(s => d.team === s.id));
      // turn all "formerly" props into arrays to simplify things later on
      if (!Array.isArray(d.formerly)) {
        d.formerly = [ d.formerly ].filter(Boolean);
      }
    });

    // order entries but shuffle tied teams
    const ties = d3.nest()
        .key(d => [ d.year, d.place ].join('/'))
        .entries(allResults)
        .filter(d => d.values.length > 1);
    ties.forEach(g => g.values.forEach(d => { d._tied = true; }));

    const byYear = d3.nest()
        .key(d => d.year)
        .entries(d3.shuffle(allResults));
    byYear.forEach(d => {
      d.values = d.values.sort((a, b) => a.place - b.place);
      d.values.forEach((d, i) => { d.rowIndex = i; });
    });

    const maxPlaces = d3.max(byYear, d => d.values.length);
    const places = d3.range(maxPlaces);
    const years = Array.from(new Set(allResults.map(d => d.year))).sort(d3.ascending);

    const x = d3.scaleBand()
        .domain(years)
        .range([ 0, width ]);

    const tableHeight = 426;
    const cellHeight = tableHeight / maxPlaces;
    const cellWidth = width / years.length;

    const y = d3.scaleBand()
        .domain(places)
        .range([ 18, 18 + tableHeight ]);

    const xBand = x.bandwidth() / 2;

    const last_year = d3.max(years);

    // current champion starts selected
    let selected_item = allResults.find(d => d.year === last_year && d.place === 1);
    let current_item = null;

    const path = d3.line()
        .curve(d3.curveCardinal.tension(0.5))
        .y(d => y(d.rowIndex))
        .x(d => x(d.year) + xBand);

    const current_line = plot.append('g').attr('stroke', 'rgba(150,40,0,0.3)');
    const selected_line = plot.append('g').attr('stroke', 'rgba(0,50,150,0.3)');

    const xAx = table.append('g')
        .attr('class', 'axis x');
    xAx.selectAll('text')
        .data(years).enter()
      .append('text')
        .attr('text-anchor', 'middle')
        .attr('alignment-baseline', 'middle')
        .attr('x', d => x(d) + xBand)
        .text(String);

    table.selectAll('.tie')
        .data(ties).enter()
      .append('rect')
        .attr('class', 'tie')
        .attr('rx', 3)
        .attr('x', d => x(d.values[0].year) + cellWidth * 0.05)
        .attr('y', d => y(d3.min(d.values, d => d.rowIndex)) - cellHeight / 2 - 1)
        .attr('width', cellWidth * 0.9)
        .attr('height', d => cellHeight * d.values.length);

    function update () {
      updateLine(current_line, current_item);
      updateLine(selected_line, selected_item);
      updateTable(current_item, selected_item);
      updatePanels(current_item, selected_item);
    }

    let leaveTimer;

    const column = table.selectAll('.cell')
        .data(allResults).enter()
      .append('g')
        .attr('class', 'cell')
        .attr('transform', d => `translate(${x(d.year) + xBand},${y(d.rowIndex)})`)
        .on('mouseenter', d => {
          clearTimeout(leaveTimer);
          if (selected_item && d.team === selected_item.team) {
            current_item = null;
            update();
          }
          else {
            current_item = d;
            update();
          }
        })
        .on('mouseleave', () => {
          clearTimeout(leaveTimer);
          leaveTimer = setTimeout(() => {
            current_item = null;
            update();
          }, 50);
        })
        .on('click', d => {
          if (current_item) {
            selected_item = current_item;
            current_item = null;
          }
          update();
        });

    column.append('text')
        .attr('text-anchor', 'middle')
        .attr('alignment-baseline', 'middle')
        .text(d => d.team);

    function updateTable (team1, team2) {
      const tags = new Set((team1 ? team1.tags : []).concat(team2 ? team2.tags : []));
      table.selectAll('.cell').attr('class', d => `cell ${tags.has(d.team) ? 'active' : ''}`);
    }

    function updateLine (line, team) {
      line.html(null);
      if (!team) { return; }
      const tags = new Set(team.tags);

      const relevant = allResults
        .filter(d => tags.has(d.team))
        .sort((a, b) => d3.ascending(a.year, b.year) || d3.ascending(a.place, b.place));

      const lines = [];

      function link (prev, next) {
        if (!prev || !next) { return; }
        // can connect to a prior line?
        for (let i = 0; i < lines.length; i++) {
          const line = lines[i];
          if (line[line.length - 1] === prev) {
            line.push(next);
            return;
          }
        }
        // start a new one
        lines.push([ prev, next ]);
      }

      years.forEach(year => {
        // this year's teams
        const dt = relevant.filter(d => d.year === year);
        if (!dt.length) { return; } // skip non-present years
        dt.forEach(item => {
          const teamId = item.team;
          const former = new Set([ item.team ].concat(item.formerly));
          // find what passed items we can link to
          const prior = relevant.reduce((a, c) => {
            if (c.year < year && former.has(c.team) && (!a[c.team] || a[c.team].year < c.year)) {
              a[c.team] = c;
            }
            return a;
          }, {});
          // if we have a more recent occurence of "former" than latest of team, preclude linking to team again
          if (teamId in prior) {
            for (const key in prior) {
              if (key !== teamId && prior[key].year >= prior[teamId].year) {
                delete prior[teamId];
                break;
              }
            }
          }
          const opts = Object.keys(prior);
          // can link to a prior occurence of team
          if (teamId in prior) {
            link(prior[teamId], item);
          }
          else if (opts.length) {
            opts.forEach(key => link(prior[key], item));
          }
        });
      });

      line.selectAll('.track')
          .data(lines).enter()
        .append('path')
          .attr('class', 'track')
          .attr('d', path);
    }

    update();

  });
});

fifa.csv

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>FIFA World Cup team appearances</title>
</head>
<body>
<style>
body {
  background: white;
}
svg {
  font-family: sans-serif;
  font-size: 10px;
}
.tie {
  fill: none;
  stroke: #999;
}
.cell {
  cursor: pointer;
}
.cell text {
  fill: #999;
}
.active text {
  fill: #000;
}
.x text {
  font-size: 14px;
}
.hint {
  font-size: 11px;
  fill: #999;
}
.track {
  fill: none;
  stroke-width: 2;
}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.16.0/polyfill.js"></script>
<script src="//d3js.org/d3.v4.min.js"></script>
<svg width="960" height="560"></svg>
<script src="driver.js"></script>
</body>
</html>

preview.png

teams.json

[
  { "id": "ALG",
    "name": "Algeria",
    "flag": "/7/77/Flag_of_Algeria.svg" },
  { "id": "ANG",
    "name": "Angola",
    "flag": "/9/9d/Flag_of_Angola.svg" },
  { "id": "ARG",
    "name": "Argentina",
    "flag": "/1/1a/Flag_of_Argentina.svg" },
  { "id": "AUS",
    "name": "Australia",
    "flag": "/b/b9/Flag_of_Australia.svg" },
  { "id": "AUT",
    "name": "Austria",
    "flag": "/4/41/Flag_of_Austria.svg" },
  { "id": "BEL",
    "name": "Belgium",
    "flag": "/9/92/Flag_of_Belgium_%28civil%29.svg" },
  { "id": "BIH",
    "name": "Bosnia and Herzegovina",
    "note": "Bosnia and Herzegovina became independent from Yugoslavia in 1991\n and is considereda distinct team by FIFA.",
    "flag": "/b/bf/Flag_of_Bosnia_and_Herzegovina.svg",
    "formerly": "YUG" },
  { "id": "BOL",
    "name": "Bolivia",
    "flag": "/4/48/Flag_of_Bolivia.svg" },
  { "id": "BRA",
    "name": "Brazil",
    "note": "Brazil is only country to have played in every World Cup.",
    "flag": "/0/05/Flag_of_Brazil.svg" },
  { "id": "BUL",
    "name": "Bulgaria",
    "flag": "/9/9a/Flag_of_Bulgaria.svg" },
  { "id": "CMR",
    "name": "Cameroon",
    "flag": "/4/4f/Flag_of_Cameroon.svg" },
  { "id": "CAN",
    "name": "Canada",
    "flag": "/c/cf/Flag_of_Canada.svg" },
  { "id": "CHI",
    "name": "Chile",
    "flag": "/7/78/Flag_of_Chile.svg" },
  { "id": "CHN",
    "name": "People's Republic of China",
    "flag": "/f/fa/Flag_of_the_People%27s_Republic_of_China.svg" },
  { "id": "COL",
    "name": "Colombia",
    "flag": "/2/21/Flag_of_Colombia.svg" },
  { "id": "COD",
    "name": "Democratic Republic of Congo",
    "note": "Formerly competed as Zaire in 1974.",
    "flag": "/6/6f/Flag_of_the_Democratic_Republic_of_the_Congo.svg" },
  { "id": "CRC",
    "name": "Costa Rica",
    "flag": "/f/f2/Flag_of_Costa_Rica.svg" },
  { "id": "CIV",
    "name": "Côte d'Ivoire",
    "flag": "/f/fe/Flag_of_Côte_d%27Ivoire.svg" },
  { "id": "CRO",
    "name": "Croatia",
    "note": "Croatia became independent from Yugoslavia in 1991 and is considered\na distinct team by FIFA.",
    "flag": "/1/1b/Flag_of_Croatia.svg",
    "formerly": "YUG" },
  { "id": "CUB",
    "name": "Cuba",
    "flag": "/b/bd/Flag_of_Cuba.svg" },
  { "id": "TCH",
    "name": "Czechoslovakia",
    "note": "Czechoslovakia was divided into Slovakia and the Czech Republic in 1993.",
    "flag": "/7/7f/Flag_of_Czechoslovakia.png" },
  { "id": "CZE",
    "name": "Czech Republic",
    "note": "Czechoslovakia was divided into Slovakia and the Czech Republic in 1993.",
    "formerly": "TCH",
    "flag": "/c/cb/Flag_of_the_Czech_Republic.svg" },
  { "id": "DEN",
    "name": "Denmark",
    "flag": "/9/9c/Flag_of_Denmark.svg" },
  { "id": "DEI",
    "name": "Dutch East Indies",
    "note": "The Dutch East Indies became modern Indonesia in 1949.",
    "flag": "/2/20/Flag_of_the_Netherlands.svg" },
  { "id": "DDR",
    "name": "East Germany",
    "note": "Germany was divided into East and West halves between 1949–1990.",
    "formerly": "GER",
    "flag": "/a/a1/Flag_of_East_Germany.svg" },
  { "id": "ECU",
    "name": "Ecuador",
    "flag": "/e/e8/Flag_of_Ecuador.svg" },
  { "id": "EGY",
    "name": "Egypt",
    "flag": "/f/fe/Flag_of_Egypt.svg" },
  { "id": "SLV",
    "name": "El Salvador",
    "flag": "/3/34/Flag_of_El_Salvador.svg" },
  { "id": "ENG",
    "name": "England",
    "flag": "/b/be/Flag_of_England.svg" },
  { "id": "FRA",
    "name": "France",
    "flag": "/c/c3/Flag_of_France.svg" },
  { "id": "GER",
    "name": "Germany",
    "note": "Germany was divided into East and West halves between 1949–1990.\nFIFA attributes results of the West Germany team to current day Germany.",
    "formerly": [ "DDR", "FRG" ],
    "flag": "/b/ba/Flag_of_Germany.svg" },
  { "id": "GHA",
    "name": "Ghana",
    "flag": "/1/19/Flag_of_Ghana.svg" },
  { "id": "GRE",
    "name": "Greece",
    "flag": "/5/5c/Flag_of_Greece.svg" },
  { "id": "HAI",
    "name": "Haiti",
    "flag": "/5/56/Flag_of_Haiti.svg" },
  { "id": "HON",
    "name": "Honduras",
    "flag": "/8/82/Flag_of_Honduras.svg" },
  { "id": "HUN",
    "name": "Hungary",
    "flag": "/c/c1/Flag_of_Hungary.svg" },
  { "id": "IDN",
    "name": "Indonesia",
    "note": "Indonesia competed as the Dutch East Indies in 1938.",
    "formerly": "DEI",
    "flag": "/9/9f/Flag_of_Indonesia.svg" },
  { "id": "IRN",
    "name": "Iran",
    "flag": "/c/ca/Flag_of_Iran.svg" },
  { "id": "IRQ",
    "name": "Iraq",
    "flag": "/f/f6/Flag_of_Iraq.svg" },
  { "id": "ISR",
    "name": "Israel",
    "flag": "/d/d4/Flag_of_Israel.svg" },
  { "id": "ITA",
    "name": "Italy",
    "flag": "/0/03/Flag_of_Italy.svg" },
  { "id": "JAM",
    "name": "Jamaica",
    "flag": "/0/0a/Flag_of_Jamaica.svg" },
  { "id": "JPN",
    "name": "Japan",
    "flag": "/9/9e/Flag_of_Japan.svg" },
  { "id": "PRK",
    "name": "Korea DPR",
    "flag": "/5/51/Flag_of_North_Korea.svg" },
  { "id": "KOR",
    "name": "Korea Republic",
    "flag": "/0/09/Flag_of_South_Korea.svg" },
  { "id": "KUW",
    "name": "Kuwait",
    "flag": "/a/aa/Flag_of_Kuwait.svg" },
  { "id": "MEX",
    "name": "Mexico",
    "flag": "/f/fc/Flag_of_Mexico.svg" },
  { "id": "MAR",
    "name": "Morocco",
    "flag": "/e/ea/Flag_of_Monaco.svg" },
  { "id": "NED",
    "name": "Netherlands",
    "flag": "/2/20/Flag_of_the_Netherlands.svg" },
  { "id": "NZL",
    "name": "New Zealand",
    "flag": "/3/3e/Flag_of_New_Zealand.svg" },
  { "id": "NGA",
    "name": "Nigeria",
    "flag": "/7/79/Flag_of_Nigeria.svg" },
  { "id": "NIR",
    "name": "Northern Ireland",
    "flag": "/f/f6/Flag_of_Northern_Ireland.svg" },
  { "id": "NOR",
    "name": "Norway",
    "flag": "/d/d9/Flag_of_Norway.svg" },
  { "id": "PAR",
    "name": "Paraguay",
    "flag": "/2/27/Flag_of_Paraguay.svg" },
  { "id": "PER",
    "name": "Peru",
    "flag": "/c/cf/Flag_of_Peru.svg" },
  { "id": "POL",
    "name": "Poland",
    "flag": "/1/12/Flag_of_Poland.svg" },
  { "id": "POR",
    "name": "Portugal",
    "flag": "/5/5c/Flag_of_Portugal.svg" },
  { "id": "IRL",
    "name": "Republic of Ireland",
    "flag": "/4/45/Flag_of_Ireland.svg" },
  { "id": "ROU",
    "name": "Romania",
    "flag": "/7/73/Flag_of_Romania.svg" },
  { "id": "RUS",
    "name": "Russia",
    "note": "FIFA considers Russian team the successor team of the USSR.",
    "formerly": "URS",
    "flag": "/f/f3/Flag_of_Russia.svg" },
  { "id": "KSA",
    "name": "Saudi Arabia",
    "flag": "/0/0d/Flag_of_Saudi_Arabia.svg" },
  { "id": "SCO",
    "name": "Scotland",
    "flag": "/1/10/Flag_of_Scotland.svg" },
  { "id": "SEN",
    "name": "Senegal",
    "flag": "/f/fd/Flag_of_Senegal.svg" },
  { "id": "SRB",
    "name": "Serbia",
    "note": "FIFA considers Serbia the successor to the Serbia and Montenegro team\nwhich succeded the Yugoslavian team.",
    "formerly": "SCG",
    "flag": "/f/ff/Flag_of_Serbia.svg" },
  { "id": "SCG",
    "name": "Serbia and Montenegro",
    "note": "FIFA considers Serbia and Montenegro the successor team to Yugoslavia.\nIt is in turn succeded by the Serbian team.",
    "formerly": "YUG",
    "flag": "/9/90/Flag_of_Serbia_and_Montenegro.svg" },
  { "id": "SVK",
    "name": "Slovakia",
    "note": "Czechoslovakia was divided into Slovakia and the Czech Republic in 1993.",
    "formerly": "TCH",
    "flag": "/e/e6/Flag_of_Slovakia.svg" },
  { "id": "SVN",
    "name": "Slovenia",
    "note": "Slovenia became independent from Yugoslavia in 1992 and is considered\na distinct team by FIFA.",
    "flag": "/f/f0/Flag_of_Slovenia.svg",
    "formerly": "YUG" },
  { "id": "RSA",
    "name": "South Africa",
    "flag": "/a/af/Flag_of_South_Africa.svg" },
  { "id": "URS",
    "name": "Soviet Union",
    "note": "The Soviet Union was dissolved in 1991. FIFA considers Russian team the\nsuccessor team of USSR.",
    "flag": "/a/a9/Flag_of_the_Soviet_Union.svg" },
  { "id": "ESP",
    "name": "Spain",
    "note": "Spain are the current world champions.",
    "flag": "/9/9a/Flag_of_Spain.svg" },
  { "id": "SWE",
    "name": "Sweden",
    "flag": "/4/4c/Flag_of_Sweden.svg" },
  { "id": "SUI",
    "name": "Switzerland",
    "flag": "/f/f3/Flag_of_Switzerland.svg" },
  { "id": "TOG",
    "name": "Togo",
    "flag": "/6/68/Flag_of_Togo.svg" },
  { "id": "TRI",
    "name": "Trinidad and Tobago",
    "flag": "/6/64/Flag_of_Trinidad_and_Tobago.svg" },
  { "id": "TUN",
    "name": "Tunisia",
    "flag": "/c/ce/Flag_of_Tunisia.svg" },
  { "id": "TUR",
    "name": "Turkey",
    "flag": "/b/b4/Flag_of_Turkey.svg" },
  { "id": "UKR",
    "name": "Ukraine",
    "note": "FIFA considers Russian team the successor team of USSR.",
    "formerly": "URS",
    "flag": "/4/49/Flag_of_Ukraine.svg" },
  { "id": "UAE",
    "name": "United Arab Emirates",
    "flag": "/c/cb/Flag_of_the_United_Arab_Emirates.svg" },
  { "id": "USA",
    "name": "United States",
    "flag": "/a/a4/Flag_of_the_United_States.svg" },
  { "id": "URU",
    "name": "Uruguay",
    "flag": "/f/fe/Flag_of_Uruguay.svg" },
  { "id": "WAL",
    "name": "Wales",
    "flag": "/5/59/Flag_of_Wales_2.svg" },
  { "id": "FRG",
    "name": "West Germany",
    "note": "FIFA attributes results of the West Germany team to current day Germany.",
    "formerly": "GER",
    "flag": "/b/ba/Flag_of_Germany.svg" },
  { "id": "YUG",
    "name": "Yugoslavia",
    "note": "Yugoslavia was formally dissolved in 1992. FIFA considers the Serbia and\nMontenegro team, and subsequenty the Serbian team the current successor.",
    "flag": "/7/71/Flag_of_SFR_Yugoslavia.svg" },
  { "id": "ZAI",
    "name": "Zaire",
    "note": "Zaire became The Democratic Republic of Congo on 1997.",
    "flag": "/5/5c/Flag_of_Zaire.svg" },
  { "id": "???",
    "name": "???"
  }
]

thumbnail.png