d3 Workshop - Rosling

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
<body>
  <script>
    var outerWidth = 960,
      outerHeight = 400;

var margin = {
      top: 50,
      left: 30,
      right: 50,
      bottom: 30
    };

var scaledByPopulation = false;

var width = outerWidth - margin.left - margin.right,
      height = outerHeight - margin.top - margin.bottom;

var xScale = d3.scaleLinear()
      .range([0, width]);

var yScale = d3.scaleLinear()
      .range([height, 0]);

var radiusScale = d3.scaleSqrt()
      .range([1, 25]);

var colorScale = d3.scaleOrdinal()
      .range(['#8dd3c7','#ffffb3','#bebada','#fb8072','#80b1d3','#fdb462','#b3de69','#fccde5','#d9d9d9','#bc80bd']);

d3.csv("rosling.csv", function(err, csvData){
      csvData.forEach(function(row){
        row.income = +row.income;
        row.lifeExpectancy = +row.lifeExpectancy;
        row.population = +row.population;
        row.year = +row.year;
      });

csvData = csvData.filter(function(row){
        return row.year === 1800;
      });

var incomes = csvData.map(function(row){
        return row.income;
      });

var lifeExpectancies = csvData.map(function(row){
        return row.lifeExpectancy;
      });

var populations = csvData.map(function(row){
        return row.population;
      });

xScale.domain(d3.extent(incomes));

yScale.domain([22, d3.max(lifeExpectancies)]);

radiusScale.domain([0, d3.max(populations)]);

var svg = d3.select("body")
        .append("svg")
          .attr("width", outerWidth)
          .attr("height", outerHeight)
          .append("g")
            .attr("transform", "translate(" + margin.left + " " + margin.top + ")");

var tooltip = d3.select("body")
        .append("div")
        .text("Hover over a country for details");

var yAxis = d3.axisLeft(yScale);

var yAxisContainer = svg.append("g");

var xAxis = d3.axisBottom(xScale)
        .tickFormat(function(value){
          return "$" + value;
        });

var xAxisContainer = svg.append("g")
        .attr("transform", "translate(0 " + height + ")");

//yAxis(yAxisContainer);
      yAxisContainer.call(yAxis);

//xAxis(xAxisContainer);
      xAxisContainer.call(xAxis);

csvData.forEach(function(row){
        svg.append("circle")
          .attr("r", 3)
          .datum(row);
      });

var button = d3.select("body").append("button");

if (scaledByPopulation) {
        button.text("Equal size");
      } else {
        button.text("Scale by population");
      }

button.on("click", function(){
        // Flip true to false or false to true
        scaledByPopulation = !scaledByPopulation;

if (scaledByPopulation) {
          button.text("Equal size");
        } else {
          button.text("Scale by population");
        }

circles
          .transition()
          .duration(1000)
          .attr("r", function(pieceOfData) {
            if (scaledByPopulation) {
              return radiusScale(pieceOfData.population);
            } else {
              return 3;
            }
          });
      });

});
  </script>
</body>

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