D3 Examples - Arithmopleth Map

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/topojson.v2.min.js"></script>
  <style>
    html {
        font-family: monospace;
        }
    
    .constituency {
      fill: none;
      stroke-width: 0.25;
      stroke: #c9c9c9;
        }
    
    text {
      opacity: 0.8;
      cursor: default;
    }
  </style>
</head>
​
<body>
  <script>
    var svgWidth = 960,
        svgHeight = 500;
    
    var margin = {top: 20, right: 10, bottom: 20, left: 10};
    
    var width = svgWidth - margin.left - margin.right,
        height = svgHeight - margin.top - margin.bottom;
        
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
    .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
    var dataUrl = "https://raw.githubusercontent.com/ft-interactive/ge2017-dataset/master/financialTimes_ge2017_dataset.csv"
    
    d3.queue()
        .defer(d3.csv, dataUrl)
        .defer(d3.json, "topo_wpc.json")
        .await(ready);
    
    function ready(error, data, uk) {
      if (error) throw error;
      
      var dataObject = {};
      data.forEach(function(d, i) {
        dataObject[d.PCON15CD] = d;
      });
      
      var constituencies = topojson.feature(uk, uk.objects.wpc).features;
      
      var projection = d3.geoAlbers()
            .fitSize([width, height], topojson.feature(uk, uk.objects.wpc));
    
        var path = d3.geoPath()
            .projection(projection);
      
      var centroids = [];
      constituencies.map(function(d) {
        var centroid = path.centroid(d);
        var info = dataObject[d.id];
        var attr = "econ_unemploymentRate_2015";
        if (info) {
          if (info[attr] != "NA") {
            var datum = {
              x: centroid[0],
              y: centroid[1],
              value: +info[attr]
            }
            centroids.push(datum);
          }
        }
      });
      
      var range = d3.extent(centroids, function(d) { return Math.round(d.value)} );
      var colour = d3.scaleSequential(d3.interpolateMagma)
            .domain(range);
            
      svg.selectAll("path")
        .data(constituencies)
      .enter().append("path")
        .attr("class", "constituency")
        .attr("d", path);
      
      var numbers = svg.selectAll("text")
        .data(centroids)
      .enter().append("text")
        .attr("class", "values")
        .attr("x", function(d) { return d.x })
        .attr("y", -25)
        .style("text-anchor", "middle")
        .style("font-size", "8px")
        .style("fill", function(d) { return colour(Math.round(d.value)); })
        .text(function(d) { return Math.round(d.value) })
        .on("mouseover", function() {
            d3.select(this)
            .transition()
            .style("font-size", "16px");
        })
        .on("mouseout", function() {
            d3.select(this)
            .transition()
            .style("font-size", "8px");
        })
      
        numbers
            .transition()
            .duration(1000)
            .delay(function(d, i) { return i * 5 })
            .attr("x", function(d) { return d.x })
            .attr("y", function(d) { return d.y })
    }
​
  </script>
</body>
​
    