2014 Soccer World Cup

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <link type="text/css" rel="stylesheet" href="d3la.css" />
</head>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/colorbrewer.v1.min.js"></script>
<script>
function createSoccerViz() {
  d3.csv("worldcup.csv", (err,data) => {
    if (err) {
      console.log("Error: ", err);
    } else {
      overallTeamViz(data);
    }
  })
};

function overallTeamViz(incomingData) {
  d3.select("svg")
  	.append("g")
  	.attr("id", "teamsG")
  	.attr("transform", "translate(50,300)")
  	.selectAll("g")
  	.data(incomingData)
  	.enter()
  	.append("g")
  	.attr("class", "overallG")
  	.attr("transform", (d, i) =>"translate(" + (i * 50) + ", 0)");
  var teamG = d3.selectAll("g.overallG");
  teamG
  	.append("circle")
    .attr("r", 20)
  teamG
    .append("text")
    .attr("y", 30)
    .text(d => d.team)

const dataKeys = Object.keys(incomingData[0])
	.filter(d => d !== "team" && d !== "region")

d3.select("#controls").selectAll("buttons.teams")
	.data(dataKeys).enter()
	.append("button")
	.on("click", buttonClick)
	.html(d => d);
 
function buttonClick(datapoint) {
  var maxValue = d3.max(incomingData, d => parseFloat(d[datapoint]))
  var radiusScale = d3.scaleLinear()
  	.domain([0, maxValue]).range([2, 20])
  d3.selectAll("g.overallG").select("circle")
  	.attr("r", d => radiusScale(d[datapoint]))
}
  
  
}
</script>
<body onload="createSoccerViz()">
<div id="viz">
  <svg style="width:500px;height:500px;border:1px lightgray solid;" />
</div>
<div id="controls" />
</body>

https://d3js.org/d3.v4.min.js

https://d3js.org/colorbrewer.v1.min.js