D.C. Choropleth

This gist shows a map of Washington, D.C. divided into census tracts. Each tract is shaded according to the owner occupancy % for all households. Points of interest are indicated as red dots. A key in the lower left shows the quantize thresholds associated with each shade.

Shapefiles came from census.gov TIGER files. Owner occupancy data came from the 2012 5-year American Community Survey of the US Census. Points come from Ben Balter's map of D.C. bars (shots are likely to have been taken at these locations).

Map projection scale created dynamically by code from Bostock's New Jersey State Plane block.

Shading key element is Bostock's Threshold Key block, adapted for d3.quantize().

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Washington, D.C.</title>
<style>

svg {
  font: 12px sans-serif;
}

.points {
  fill: red;
}

.caption {
  font-weight: bold;
}

.key path {
  display: none;
}

.key line {
  stroke: #000;
  shape-rendering: crispEdges;
}
</style>
</head>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script>

var width = 960,
    height = 500,
    maxscale = 7,
    formatPercent = d3.format(".0%");
    
var rateByTract = d3.map();

var quantize = d3.scale.quantize()
    .domain([0, 1])
    .range(["#c6d8ef", "#9ecae1", "#6baed6", "#4292c6", "#2171b5", "#085192", "#08306b"]);

// return quantize thresholds for the key    
var qrange = function(max, num) {
    var a = [];
    for (var i=0; i<num; i++) {
        a.push(i*max/num);
    }
    return a;
}
    
var projection = d3.geo.albersUsa();

var path = d3.geo.path()
    .projection(projection);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

queue()
    .defer(d3.json, "dc.json")
    .defer(d3.json, "bars.json")
    .defer(d3.csv, "dcdata.csv", function(d) { rateByTract.set(d.tract, (d.households>0) ? +d.owners/d.households : 0); })
    .await(ready);

function ready(error, dc, bars) {

var tracts = topojson.feature(dc, dc.objects.dctracts);

// define and scale the projection so the map fits nicely in the screen
  projection
    .scale(1)
    .translate([0, 0]);

var b = path.bounds(tracts),
    s = 1.0 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
    t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];

projection
      .scale(s)
      .translate(t);
   
  // add census tracts
  svg.selectAll("path")
      .data(tracts.features)
    .enter().append("path")
      .attr("fill", function(d) { return quantize(rateByTract.get(d.properties.NAMELSAD)); })
      .attr("d", path)
    .append("title")
      .text(function(d) { return d.properties.NAMELSAD; });
  
  // add points of interest
  svg.append("path")
      .datum(topojson.feature(bars, bars.objects.bars))
      .attr("class", "points")
      .attr("d", path);

// add key
  var x = d3.scale.linear()
    .domain([0, 1])
    .range([0, 300]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickSize(14)
    .tickValues(qrange(quantize.domain()[1], quantize.range().length))
    .tickFormat(function(d) { return formatPercent(d); });

var g = svg.append("g")
    .attr("class", "key")
    .attr("transform", "translate( 50," + height * 3 / 4 + ")");

g.selectAll("rect")
    .data(quantize.range().map(function(color) {
      var d = quantize.invertExtent(color);
      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", 10)
    .attr("x", function(d) { return x(d[0]); })
    .attr("width", function(d) { return x(d[1]) - x(d[0]); })
    .style("fill", function(d) { return quantize(d[0]); });

g.call(xAxis).append("text")
    .attr("class", "caption")
    .attr("y", -6)
    .text("Household owner occupancy rate");

}
</script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/queue.v1.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

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

https://d3js.org/queue.v1.min.js

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