D3 Examples - Choropleth with census CitySDK data

Choropleth with census CitySDK data

Similar Makefile to create the ok-counties.json as the previous example. Updated the ok-counties.json with name, fips as id, and area. Uses CitySDK to retrieve county level data for the state of Oklahoma. We use that data to construct a map to then style the county with the appropriately scaled color.

Please change the API key from the census bureau if you're forking. Thanks.

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
.county {
  fill: #eee;
}
​
.county-border {
  fill: none;
  stroke: #fff;
}
​
.state-border {
  fill: none;
  stroke: #333;
}
​
.caption {
  font-weight: bold;
}
​
.key path {
  display: none;
}
​
.key line {
  stroke: #000;
  shape-rendering: crispEdges;
}
​
svg {
  display: block;
  margin: auto;
  font: 10px sans-serif;
}
​
body {
  margin: 0;
}
​
@-webkit-keyframes rotate-infinite {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100%  {
    -webkit-transform: rotate(360deg);
  }
}
​
.loading-spinner {
  position: absolute;
  display: block;
  margin: auto;
  width: 100%;
  margin: auto;
  text-align: center;
  top: 40%;
}
​
.loading-spinner::after {
  content: "";
  -webkit-animation: rotate-infinite .8s linear infinite;
  border: 5px solid #99d8c9;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  height: 50px;
  width: 50px;
}
​
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
​
<script src="//cdn.jsdelivr.net/gh/uscensusbureau/citysdk/release1.1/js/citysdk.js"></script>
<script src="//cdn.jsdelivr.net/gh/uscensusbureau/citysdk/release1.1/js/citysdk.census.js"></script>
<script>
​
d3.select('body')
  .append('div')
  .attr('class', 'loading-spinner');
​
var width = 960;
var height = 500;
​
var path = d3.geo.path()
  .projection(null);
​
var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);
​
d3.json("ok-counties.json", function(error, ok) {
  if (error) throw error;
​
  var counties = topojson.feature(ok, ok.objects.counties);
​
  svg.append("g")
    .attr("class", "counties")
    .selectAll("path")
    .data(counties.features, function(d) { return d.id; })
    .enter()
    .append("path")
    .attr('class', 'county')
    .attr("d", path);
​
  svg.append("path")
    .datum(topojson.mesh(ok, ok.objects.counties, function(a, b) { return a !== b; }))
    .attr("class", "county-border")
    .attr("d", path);
​
  svg.append("path")
    .datum(topojson.mesh(ok, ok.objects.counties, function(a, b) { return a === b; }))
    .attr("class", "state-border")
    .attr("d", path);
});
​
var variableByFIPS = d3.map();
var color = d3.scale.threshold()
  .domain([0, 20, 75, 200, 500])
  .range( ["#edf8fb", "#ccece6", "#99d8c9", "#66c2a4", "#2ca25f", "#006d2c"] );
​
// A position encoding for the key only.
var x = d3.scale.linear()
  .domain([0, 600])
  .range([0, 240]);
​
var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom")
  .tickSize(13)
  .tickValues(color.domain());
​
var g = svg.append("g")
  .attr("class", "key")
  .attr("transform", "translate(20,200)");
​
g.selectAll("rect")
  .data(color.range().map(function(d, i) {
    return {
      x0: i ? x(color.domain()[i - 1]) : x.range()[0],
      x1: i < color.domain().length ? x(color.domain()[i]) : x.range()[1],
      z: d
    };
  }))
  .enter()
  .append("rect")
  .attr("height", 8)
  .attr("x", function(d) { return d.x0; })
  .attr("width", function(d) { return d.x1 - d.x0; })
  .style("fill", function(d) { return d.z; });
​
g.call(xAxis)
  .append("text")
  .attr("class", "caption")
  .attr("y", -6)
  .text("Population per square mile");
​
var sdk = new CitySDK();
var census = sdk.modules.census;
census.enable("1b948e68b95a0ecf4936f0a6cf17c0e63c82d4de");
​
var request = {
  "level": "state",
  "state": "OK",
  "sublevel": true,
  "variables": [
    "population"
  ]
};
​
census.APIRequest(request, function (response) {
​
  console.log(response)
​
  response.data.forEach(function(d) {
    variableByFIPS.set(d.state + "" + d.county, +d.population)
  });
​
  d3.select('.loading-spinner').remove();
​
  d3.selectAll('.county')
    .style('fill', function(d) { return color(d.density = variableByFIPS.get(d.id) / d.properties.area ); })
    .append('title')
    .text(function(d) { return d.properties.name + " " + d.density.toFixed(0) + "/mi²"; });
​
});
​
</script>
​
    