d3.chart Choropleths

Choropleth charts built with the d3.chart framework. choropleth_chart.js is the chart type definition, which allows for rapid iteration of different quantize-scale domain/range, colors, and projections. The colors are based on color brewer, and you can pass any of the sequential scale abbreviations ('BuGn', 'PuBuGn', etc) to the range parameter to iterate on colors.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.counties {
  fill: none;
  stroke: #fff;
  stroke-opacity: .3;
}

#map1 {
  float:left;
}

</style>
<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 src="d3.chart.min.js"></script>
<script src="choropleth_chart.js"></script>

// Create two instances of a chart using d3 selections
var chart_1 = d3.select('#map1')
  .append("svg")
  .attr("height", 500)
  .attr("width", 480)
  .chart("Choropleth")
  .domain([0, 15])
  .range('YlGnBu')
  .projection(d3.geo.albersUsa())
  .scale(500);

var chart_2 = d3.select('#map2')
  .append("svg")
  .attr("height", 500)
  .attr("width", 480)
  .chart("Choropleth")
  .domain([0, 25])
  .range('OrRd')
  .projection(d3.geo.albersUsa())
  .scale(500);

// Load the Data
queue()
    .defer(d3.json, 'Unemployment_2011.json')
    .defer(d3.json, 'us_counties_20m_topo.json')
    .await(makeMap)

function makeMap(error, data, geo) {

county_feat = topojson.feature(geo, geo.objects.us_counties_20m).features
  bind_data = data[0];
  mapData = {'Geo': county_feat, 'ToBind': bind_data};

// Draw the charts
  chart_1.draw(mapData)
  chart_2.draw(mapData)

};

</script>

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