Metro choropleth

A choropleth example showing commute time by U.S. metro area. This uses a variation on Mike Bostock's us-atlas that includes quantized metro areas as a separate object, and the build script is included here.

Built with blockbuilder.org

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
  background: #FEFFE1;
}
.states {
  fill: none;
  stroke: #333;
  stroke-linejoin: round;
}

.tick { font: 9px sans-serif; }

</style>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="//d3js.org/topojson.v2.min.js"></script>
<script>

var palette = ['#ffffe0', '#ffcb91', '#fe8f6a', '#e65758', '#c0223b', '#8b0000'];
var stops = [10, 20, 25, 30, 35, 40];

var width = 1200,
    height = 900;
    
var x = d3.scaleLinear()
    .domain([stops[0],stops[stops.length - 1]])
    .range([550,850]);

var color = d3.scaleThreshold()
    .domain(stops)
    .range(palette);

var path = d3.geoPath();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
    
// Legend
var g = svg.append("g")
    .attr("class", "key")
    .attr("transform", "translate(0,40)");

g.selectAll("rect")
  .data(color.range().map(function(d) {
      d = color.invertExtent(d);
      if (d[0] == null) d[0] = x.domain()[0];
      if (d[1] == null) d[1] = x.domain()[1];
      return d;
    }))
  .enter().append("rect")
    .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 color(d[0]); });

g.append("text")
    .attr("class", "caption")
    .attr("x", x.range()[0])
    .attr("y", -6)
    .attr("fill", "#000")
    .attr("text-anchor", "start")
    .attr("font-weight", "bold")
    .text("Average commute (minutes)");

g.call(d3.axisBottom()
    .scale(x)
    .tickSize(13)
    .tickFormat(function(x, i) { return (i == 0 || i > 1) ? x : ''; })
    .tickValues(color.domain())
  )
  .select(".domain")
    .remove();

// End legend

d3.queue()
    .defer(d3.json, "10m-all.json")
    .defer(d3.csv, "avg_commute_time.csv")
    .await(ready);

function ready(error, us, commute) {
  if (error) throw error;

var commuteById = {};

commute.forEach(function(d) { commuteById[String(d.id)] = +d.avg_commute_time; });

svg.append("g")
      .attr("class", "metros")
    .selectAll("path")
      .data(topojson.feature(us, us.objects.metros).features)
    .enter().append("path")
      .attr("d", path)
      .attr("fill", function(d) { return color(commuteById[String(d.id)]) || 'rgba(0,0,0,0)'; });

svg.append("path")
      .datum(topojson.feature(us, us.objects.states, function(a, b) { return a.id !== b.id; }))
      .attr("class", "states")
      .attr("d", path);
}

</script>

https://d3js.org/d3.v4.min.js

https://d3js.org/topojson.v2.min.js