Old school D3 from simpler times

All examples By author By category About

stevenae

Full window Github gist

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>

xxxxxxxxxx
 
<!-- data from https://www.bea.gov/iTable/index_regional.cfm -->
​
​
<!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