World Cup Champions

HTML5 Infographic about World Cup Champions

by Fabio Dan

HTML

<section>
<h1>WORLD CUP CHAMPIONS</h1>
    <div>
    <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>

    <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>
    <canvas id="graph" width="800" height="500"></canvas>
    </div>

</section>

CSS

body { margin: 0; padding: 0; font-family: helvetica; }  
div { position: relative; }
h1 { font-weight: bold; text-align: center; padding: 10px; }  
ul { width: 800px; text-align: center; } 
ul li { display: inline-block; text-align:center; }
ul#teams { margin: 500px 0 0 0; }  
canvas { position: absolute; top: 17px; }

JavaScript

// 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"
},
    graph = document.getElementById("graph"),
    ctx = graph.getContext("2d"),

    // To do: generate the elements dinamically relying on json data.
    years = document.querySelectorAll('#years li'),
    teams = document.querySelectorAll('#teams 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,
                    teamRightPos = teamLeftPos + teams[j].offsetWidth;
    
                // Initializing graph properties.
                ctx.globalAlpha = 0.3;
                ctx.fillStyle =...