D3 Examples - Median US Property Tax Collections by County

Median US Property Tax Collections by County

This is a map of median property taxes collected at the county level, averaged over a 5-year period from 2008 to 2012. This data is based on census surveys.

This map was built to generate SVGs which would be further manipulated in Adobe Illustrator, so no CSS is used to apply styles to SVG elements.

This map takes two base colors, a number of predefined scale increments, and a predefined range to generate and apply a limited number of specific colors to each county. In this example, the scale ranges from $0 to $4,000, with $500 increments. So between $0 and $499.99 is the first increment, between $500 and $999.99 the second, etc., until the final increment of $4,000 and above. Light colors correspond to low values, and dark to high values.

xxxxxxxxxx
 
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>US County Map of Median Property Tax Collections</title>
  </head>
  <body>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://d3js.org/topojson.v1.min.js"></script>
    <script src="https://d3js.org/queue.v1.min.js"></script>
    <script>
      var width = 960,
          height = 500;
      
      var svg = d3.select("body").append("svg")
          .attr("width", width)
          .attr("height", height);
      
      // Define increments for data scale
      var dataScale = [],
          min = 0, //Floor for the first step
          max = 4000, //Anything above the max is the final step
          steps = 9;
          increment = (max-min)/(steps-1);
      // Create the scale of data values from min to max by # of steps
      for (var step = 0; step < steps; step++) {
          dataScale.push(min + increment * step);
      }
      
      // Create distinct colors for each increment based on two base colors
      var colors = [],
          borderColor = "#fff",
          noDataColor = "#ccc", //Color applied when no data matches an element
          lowBaseColor = "#ffedb8", //Color applied at the end of the scale with the lowest values
          highBaseColor = "#15276d"; //Color applied at the end of the scale with the highest values
      var scaleColor = d3.scale.linear()
        .domain([0,steps-1])
        .range([lowBaseColor,highBaseColor])
        .interpolate(d3.interpolateHcl);
      for (var c = 0; c < steps; c++) {
          //create legend
          svg.append("rect")
              .attr("height", 20)
              .attr("width", 20)
              .attr("x", width - 120)
              .attr("y", 200 + c*30)
              .attr("fill", scaleColor(steps - 1 - c));
          svg.append("text")
              .attr("x", width - 90)
              .attr("y", 218 + c*30)
              .text((max - increment*c) + ((c === 0) ? "+" : "-" + (max - increment*(c-1))));
          //add these distinct colors to array
          colors.push(scaleColor(c));
      }
      
      var projection = d3.geo.albersUsa()
          .translate([width / 2, height / 2]);
      
      var path = d3.geo.path()
          .projection(projection);
      
      var mapColor = d3.scale.quantize()
          .domain([min, max])
          .range(colors);
      
      queue()
          .defer(d3.json, "us.json")
          .defer(d3.csv, "propertyTaxCountyData.csv")
          .await(ready);
      
      function ready(error, us, tax) {
          if (error) return console.error(error);
      
          svg.append("g")
              .attr("class", "counties")
          .selectAll("path")
              .data(topojson.feature(us, us.objects.counties).features)
          .enter().append("path")
              .attr("d", path)
              .attr("fill", noDataColor)
              .attr("stroke", borderColor)
              .attr("stroke-width", 0.25)
              .attr("id", function(d){return "county" + d.id;});
      
              tax.forEach(function(d){
                d3.select("#county" + d.id)
                  .style("fill", mapColor(d.medianTaxesPaid));
              });
      
          svg.append("path")
              .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
              .attr("fill", "none")
              .attr("stroke", "#fff")
              .attr("stroke-width", 1.5)
              .attr("d", path);
      }
    </script>
  </body>
</html>
    