D3 Examples - d3 Workshop

xxxxxxxxxx
 
<!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 circles = svg.selectAll("circle")
        .attr("cx", function(pieceOfData) {
          return xScale(pieceOfData.income);
        })
        .attr("cy", function(pieceOfData) {
          return yScale(pieceOfData.lifeExpectancy);
        })
        .attr("fill", function(pieceOfData) {
          return colorScale(pieceOfData.region);
        })
        .on("mouseover", function(pieceOfData){
          tooltip.text(pieceOfData.name);
          d3.select(this).attr("stroke", "black")
            .attr("stroke-width", "3");
        })
        .on("mouseout", function(pieceOfData){
          tooltip.text("Hover over a country for details");
          d3.select(this).attr("stroke", "none");
        });
​
      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>
​
    