World Cup Champions

HTML5 Infographic about World Cup Champions

by Fabio Dan

HTML

<a target="_blank" href="https://github.com/fabiodan/infographics">This project is now under development on Github. Click here to go to the repository.</a>

<h1>WORLD CUP CHAMPIONS</h1>

<section>

    <ul id="years">
        <li>1930</li>
        <li>1934</li>
        <li>1938</li>
        <li>1950</li>
        <li>1954</li>
        <li>1958</li>
        <li>1962</li>
        <li>1966</li>
        <li>1970</li>
        <li>1974</li>
        <li>1978</li>
        <li>1982</li>
        <li>1986</li>
        <li>1990</li>
        <li>1994</li>    
        <li>1998</li>
        <li>2002</li>
        <li>2006</li>
        <li>2010</li>
    </ul>

    <canvas id="graph" width="800" height="500"></canvas>

    <ul id="teams">
        <li>Argentina</li>
        <li>Brazil</li>
        <li>England</li>
        <li>France</li>
        <li>Italy</li>
        <li>Spain</li>
        <li>Uruguay</li>
        <li>West Germany</li>
    </ul>

</section>

CSS

body { margin: 0; padding: 0; font-family: helvetica; }  
section { width: 800px; position: relative; }
h1 { font-weight: bold; text-align: center; padding: 10px; }  
ul { text-align: center; } 
ul li { display: inline-block; } 
a { font-size: 12px; }

JavaScript

/*
 * THIS PROJECT IS NOW UNDER DEVELOPMENT ON GITHUB
 * https://github.com/fabiodan/infographics
 */

// To do: get data via YQL from Wikipedia / Fifa website.
var data = {
    "1930" : "Uruguay",
    "1934" : "Italy",
    "1938" : "Italy",
    "1950" : "Uruguay",
    "1954" : "West Germany",
    "1958" : "Brazil",
    "1962" : "Brazil",
    "1966" : "England",
    "1970" : "Brazil",
    "1974" : "West Germany",
    "1978" : "Argentina",
    "1982" : "Italy",
    "1986" : "Argentina",
    "1990" : "West Germany",
    "1994" : "Brazil",
    "1998" : "France",
    "2002" : "Brazil",
    "2006" : "Italy",
    "2010" : "Spain"
};

var graph = document.getElementById("graph");
var ctx = graph.getContext("2d");

// To do: generate the elements dinamically relying on json data.
var years = document.getElementById("years").getElementsByTagName("li");
var teams = document.getElementById("teams").getElementsByTagName("li");

/*
 * Random Color Generator
 * http://www.redips.net/javascript/random-color-generator/
 */
function randomColor() {
    var hex = '0123456789ABCDEF'.split(''),
        color = '#', i;
    for (i = 0; i < 6 ; i++) {
        color = color + hex[Math.floor(Math.random() * 16)];
    }
    return color;
}

function buildGraph(data, teamsColors) {
    var memo = teamsColors || {};

    for (var i = 0; i < years.length; i++) {

        // Getting the coordinates.
        var year = years[i].firstChild.nodeValue,
            graphHeight = graph.offsetHeight,
            yearLeftPos = years[i].offsetLeft,
            yearRightPos = yearLeftPos + years[i].offsetWidth;

        for (var j = 0; j < teams.length; j++) {        
            var team = teams[j].firstChild.nodeValue;
            
            // Setting one color for each team.
            !memo[team] && (memo[team] = randomColor());
            
            if (team == data[year]) {
                var teamLeftPos = teams[j].offsetLeft;
                var teamRightPos = teamLeftPos +...