fifa_data_visualisation.js

var teamInfo = REP_Fifa_data.data
var top9 = teamInfo.filter(rank => rank[2] < 10);

var teamColor = d3.scaleOrdinal()
    .domain(["F", "E", "B", "D", "G", "H", "C"])
    .range(["#f9e6e6", "#7294d4", "#d8a499", "#c6cdf7", "#e6a0c4",
                "#66b266", "#ffff7f"]);

// Static Graphics
teamG = REframe.append("g")
    .attr("transform", "scale(2)translate(30,100)")
    .selectAll("team")
    .data(top9)
    .enter()
    .append("g")
    .attr("class", "team")
    .attr("transform", (d, i) =>`translate(${(i * 55)}, 0)`)

teamG.selectAll("text")
    .attr("y", 45)
	.text(d => d[1]);

teamG.append('use')
    .attr('xlink:href', '#ball')
    .attr('fill', (d) => {
    	return teamColor(d[3])
    })
    .attr('stroke', 'black')

// Interactivity
teamG
	.on("click", (d) => {
        if (d.length == 7)
            d.shift();
        REframe.selectAll("td.data").data(d3.values(d))
            .html(p => p)
    })
    .on('mouseover', function(d) {
    	d3.select(this).select("circle").transition().duration(300).attr("r", "30");
	})
    .on('mouseout', function(d) {
    	d3.select(this).select("circle").transition().duration(300).attr("r", "0");
	})

d3.select('#winnertoken')
    .on("mouseover", function(d) {
    	d3.select(this).select("path.outerCircle").attr("fill", "red");

    })
    .on("mouseout", function(d) {
    	d3.select(this).select("path.outerCircle").attr("fill", "#FFCA10");
    })
    .on('click', () => {
		d3.select(winnername)
        	.attr("display", "visible")
    })

// Entry animation

d3.select('#title')
    .on('click', playAnimation)

function playAnimation() {
    teamG
        .insert("circle", 'use')
        .attr("r", 0)
        .transition()
        .delay((d, i) => i * 100)
        .duration(800)
        .attr("r", 40)
        .transition()
        .duration(800)
        .attr("r", 0);
}

playAnimation()