Skip to content

Instantly share code, notes, and snippets.

@jeremycflin
Created December 19, 2017 20:33
Show Gist options
  • Save jeremycflin/c57afba925242c6420f7fb1364820a2e to your computer and use it in GitHub Desktop.
Save jeremycflin/c57afba925242c6420f7fb1364820a2e to your computer and use it in GitHub Desktop.
Point Grid Cartogram
license: mit

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.

forked from armollica's block: Point Grid Cartogram

<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>
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment