D3 Examples - 2014 Soccer World Cup

xxxxxxxxxx
 
<!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>
​
    