Mike Bostock's most excellent Command-line Cartogaphy, except here it's mostly in the browser.
Last active
April 20, 2017 21:41
-
-
Save pbogden/c83675a77a2f618cf6119303350b64ad to your computer and use it in GitHub Desktop.
md chloropleth
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<title>md-geometry</title> | |
<body> | |
<script src="//d3js.org/d3.v4.min.js"></script> | |
<script src="//d3js.org/topojson.v2.min.js"></script> | |
<script src="//d3js.org/d3-scale-chromatic.v1.min.js"></script> | |
<script> | |
var width = 960, height = 500; | |
var svg = d3.select('body').append('svg') | |
.attr('width', width) | |
.attr('height', height); | |
// For d3 representation of various stateplanes, see: d3-stateplane | |
// We'll set the scale and translate later, based on the data | |
var projection = d3.geoConicConformal() | |
.parallels([38 + 18 / 60, 39 + 27 / 60]) | |
.rotate([77, -37 - 40 / 60]); | |
var path = d3.geoPath() | |
.projection(projection); | |
var threshold = d3.scaleThreshold() | |
.domain([1, 10, 50, 200, 800, 2000, 5000, 10000]) | |
.range(d3.schemeOrRd[9]); | |
d3.queue() | |
.defer(d3.json, "https://umbcvis.github.io/classes/class-12/tracts.json") | |
.defer(d3.json, "https://umbcvis.github.io/classes/class-12/population.json") | |
.await(ready); | |
function ready(error, json, population) { | |
if (error) throw error; | |
// Convert topojson to GeoJSON | |
geojson = topojson.feature(json, json.objects.tracts); | |
// Set the projection's scale and translate based on the GeoJSON | |
projection.fitSize([960, 500], geojson); | |
// Extract an array of features (one tract for each feature) | |
tracts = geojson.features; | |
console.log('tracts[0]', tracts[0]) | |
console.log('population[0]', population[0]) | |
console.log('population[1]', population[1]) | |
// Compute population density for each census tract | |
tracts.forEach(function(tract, i) { | |
var countyfips = tract.properties.COUNTYFP; | |
var tractce = tract.properties.TRACTCE; | |
var pop = +population.filter(function(d) { return (d[2] === countyfips) && (d[3] === tractce); })[0][0]; | |
var aland = tract.properties.ALAND / 2589975.2356; // area in square miles | |
tract.properties.density = pop / aland; | |
}); | |
// Tracts | |
svg.selectAll('path.tract') | |
.data(tracts) | |
.enter().append('path') | |
.attr('d', path) | |
.attr('class', 'tract') | |
.style('fill', function(d) { return threshold(d.properties.density); }) | |
.style('stroke', '#000') | |
.style('stroke-opacity', '0.15') | |
addLegend(); | |
} | |
function addLegend() { | |
var formatNumber = d3.format("d"); | |
var x = d3.scalePow().exponent('.15') | |
.domain([1, 80000]) | |
.range([0, 300]); | |
var xAxis = d3.axisBottom(x) | |
.tickSize(13) | |
.tickValues(threshold.domain()) | |
.tickFormat(formatNumber) | |
var g = svg.append("g") | |
.attr('transform', 'translate(100, 200)') | |
.call(xAxis); | |
g.select(".domain") | |
.remove(); | |
g.selectAll("rect") | |
.data(threshold.range().map(function(color) { | |
var d = threshold.invertExtent(color); | |
if (d[0] == null) d[0] = x.domain()[0]; | |
if (d[1] == null) d[1] = x.domain()[1]; | |
return d; | |
})) | |
.enter().insert("rect", ".tick") | |
.attr("height", 8) | |
.attr("x", function(d) { return x(d[0]); }) | |
.attr("width", function(d) { return x(d[1]) - x(d[0]); }) | |
.attr("fill", function(d) { return threshold(d[0]); }); | |
g.append("text") | |
.attr("fill", "#000") | |
.attr("font-weight", "bold") | |
.attr("text-anchor", "start") | |
.attr("y", -6) | |
.text("Population per square mile"); | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment