block by armollica 219d6d312f46b8e58d797ebb81854e0c

Point Grid Cartogram

Full Screen

Create a point grid style cartogram from polygon-based geographic data.

Takes an evenly-spaced grid of point at 20 mile intervals, estimates the population for that point by taking a weighted average of the population of counties within 20 miles of that point. The estimated population at a given point is encoded by the circle’s area.

The geoprocessing methods used here for taking point buffers and calculating the polygon intersections are slow compared to using something like PostGIS or shapely.

index.html

<html>
  <head>
    <style>
      .point {
        fill: rgba(240, 66, 15, .75);
      }
    </style>
  </head>
  <body>
    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
    <script src="//api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.7.0/lodash.min.js"></script>
     <script>
       var width = 600,
           height = 600;
       
       var area = d3.scale.linear().range([0, 800]);
       
       var projection = d3.geo.conicConformal()
        .rotate([90, 0])
        .center([0.2, 44.75])
        .parallels([29.5, 45.5])
        .scale(6000)
        .translate([width/2, height/2])
        .precision(.1);
       
       var path = d3.geo.path()
        .projection(projection);
       
       var map = d3.select("body").append("svg")
        .attr("class", "map")
        .attr("width", width)
        .attr("height", height);
       
       // add "loading" message
       map.append("text")
        .attr("x", width/2)
        .attr("y", height/2)
        .style("text-anchor", "middle")
        .text("Loading... (this might take a bit)");
        
       d3.json("wi.json", ready);
       
       function ready(error, wi) {
        if (error) throw error;
        
        var countyFeatures = topojson.feature(wi, wi.objects.wi).features;
        var pointFeatures = turf.pointGrid([-93.5, 42.3, -86.49, 47.3], 20, "miles").features
          .map(function(pointFeature) {
            // get buffer of a point
            var bufferedPointFeature = turf.buffer(pointFeature, 20, "miles").features[0];
            
            // get info on counties that intersect this point buffer
            var intersectingCountiesData = countyFeatures
              .map(function(countyFeature) {
                // if county intersects get the area within the point buffer
                // and return data on that county
                var intersection = turf.intersect(bufferedPointFeature, countyFeature);
                if (intersection !== undefined) {
                  var area = turf.area(intersection);
                  var countyProperties = _.clone(countyFeature.properties);
                  countyProperties.areaWithinBuffer = area;
                  return countyProperties;
                }
                else { return null; }
              })
              .filter(function(d) { return d !== null; });
            
            // estimate population within a point buffer by taking a 
            // geo-weighted average of the counties that intersect with it
            var totalArea = d3.sum(intersectingCountiesData, function(d) { return d.areaWithinBuffer; });
            var population = intersectingCountiesData
              .map(function(intersectingCountyData) {
                var areaShare = intersectingCountyData.areaWithinBuffer / totalArea;
                return {
                  weight: areaShare,
                  population: +intersectingCountyData["wi-data__1"]
                };
              })
              .reduce(function(a, b) {
                return a + b.population * b.weight;
              }, 0);
              
            pointFeature.properties.population = population;
            
            return pointFeature;
          });
        
        // remove "loading" message
        map.select("text").remove();
        
        area.domain([0, d3.max(pointFeatures, function(d) { return d.properties.population; })]);
        
        var points = map.selectAll(".point").data(pointFeatures)
          .enter().append("circle")
            .attr("class", "point")
            .attr("cx", function(feature) {
              return projection(feature.geometry.coordinates)[0];
            })
            .attr("cy", function(feature) {
              return projection(feature.geometry.coordinates)[1];
            })
            .attr("r", function(feature) {
              var A = area(feature.properties.population);
              return Math.sqrt(A / Math.PI);
            });
      }
      
      d3.select(self.frameElement)
        .style("width", width + "px")
        .style("height", height + "px");
     </script>
  </body>
</html>