Rosling

forked from veltman's block: 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 = 500;

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

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]);

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(d3.extent(lifeExpectancies));

radiusScale.domain(d3.extent(populations));

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

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")
          .datum(row)
          .attr("fill", "blue");
      });

svg.selectAll("circle")
        .attr("cx", function(pieceOfData) {
          return xScale(pieceOfData.income);
        })
        .attr("cy", function(pieceOfData) {
          return yScale(pieceOfData.lifeExpectancy);
        })
        .attr("r", function(pieceOfData) {
          return radiusScale(pieceOfData.population);
        });
      button.text("Scale by population");
    });
  </script>
</body>

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