Interactive Choropleth

This example shows how it is possible to use crossfilter bar charts (up to any number) to visually subset a choropleth. The map above shows the population and per-capita income growth of the US from 2011-2012.

<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="county_map.css"/>
<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="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.1/crossfilter.min.js"></script>
<script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>

<body>
<div id="title">Population and Per Capita Income Change in the United States, 2011-2012</div>
<div id="charts">
  <div id="pop-chart" class="chart">
    <div class="title">Population Change</div>
  </div>
  <div id="per_cap-chart" class="chart">
    <div class="title">Per Capita Income Change</div>
  </div>
</div>
<div id="map">
  <div id="map-legend">
    <br>
    <div class="title">Per Capita Income Change, 2011-2012
      <div class="title">-35% . . . . . . . . . . . . . . . . . +50%</div>
    </div>
  </div>
</div>
<script type="text/javascript">
      // Hack to make this example display correctly in an iframe on bl.ocks.org
      d3.select(self.frameElement).style("height", "1000px");
  </script> 
<script src="county_map.js"></script>
<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

Modified http://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.1/crossfilter.min.js to a secure url

Modified http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.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

https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.1/crossfilter.min.js

https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js