Air Force Bases in the US using counties.json

.block

license: gpl-3.0
height:1000
border: no

README.md

This map shows the US map with county-lines where blue indicates that there's an AF base. But not quite. Some counties have more than one base and I wanted to show all the bases on the map. In hindsight, that wasn't the best way to go about it. Obviously not as impressive as the original example from stevenae/8362841, but I just wanted to get a map working at the time.

I also learned a lesson here. While looking at a choropleth is fun and impressive (for the stevenae's case) if well-made, you really have to ask yourself: Do you really want to show your data on a map? I've gotten several request to show base manning level on a map, but choropleth was not the best way to go about it, especially the county level map (Imagine this US county map sparsely colored with shades of red and blue)

counties.json

county_growth.tsv

county_map.css

#title {
  text-align: center;
  padding-bottom: 60px;
  font-size: 22px;
  font-weight: 400;
}

.d3-tip {
  line-height: 1.5;
  padding: 8px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 0px;
  text-align: center;
}

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  background-color: #fff;
  width: 960px;
  height: 800px;
  margin-top: 10px;
}

#charts{
  float: left;
}

.chart {
  height: 100px;
  margin-bottom: 20px;
}

.reset {
  padding-left: 1em;
  font-size: smaller;
  color: blue;
}

.background.bar {
  fill: #ccc;
}

.foreground.bar {
  fill: steelblue;
}

.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.axis text {
  font: 10px sans-serif;
}

.brush rect.extent {
  fill: steelblue;
  fill-opacity: .125;
}

.brush .resize path {
  fill: #eee;
  stroke: #666;
}

#chart path {
  stroke: #fff;
}

#chart path.highlighted {
  cursor: pointer;
}

.counties {
  fill: none;
  stroke: #C0C0C0;
  stroke-linejoin: round;
}

.q0-9 { fill:rgb(255,255,255); }
.q1-9 { fill:rgb(247,251,255); }
.q2-9 { fill:rgb(198,219,239); }
.q3-9 { fill:rgb(158,202,225); }
.q4-9 { fill:rgb(107,174,214); }
.q5-9 { fill:rgb(66,146,198); }
.q6-9 { fill:rgb(33,113,181); }
.q7-9 { fill:rgb(8,81,156); }
.q8-9 { fill:rgb(8,48,107); }

#map {
  float: right;
}

#map-legend{
  text-align: center; 
}

county_map.js

// Various formatters.
var formatNumber = d3.format(",d"),
  formatChange = d3.format("+,d"),
  formatDate = d3.time.format("%B %d, %Y"),
  formatTime = d3.time.format("%I:%M %p");

// data across years
var extant = [];

var width = 960,
    height = 500;

var rateById = d3.map(),
  nameById = d3.map(),
  baseById = d3.map(),
  checkById = d3.map();

var quantize = d3.scale.quantize()
    .domain([0, 1])
    .range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));

var path = d3.geo.path();

var svg = d3.select("#map").append("svg")
    .attr("width", width)
    .attr("height", height);

tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .direction('n')
  .html(function(d) {
    return baseById.get(d.id)
 });
    
svg.call(tip);

var nation = crossfilter(),
  all = nation.groupAll()

queue()
    .defer(d3.json, "counties.json")
    .defer(d3.tsv, "county_growth.tsv", function(d) {

      for(var propertyName in d) {
        if (propertyName == "Area"||propertyName == "basename") {
          continue;
        };
        d[propertyName] = +d[propertyName];
      }

      nation.add([d]);
      extant.push(d.id);
      nameById.set(d.id, d.Area);
      baseById.set(d.id, d.basename);
      checkById.set(d.id,d.check);
    })
    .await(ready);

function ready(error, us) {
  svg.append("g")
      .attr("class", "counties")
    .selectAll("path")
      .data(topojson.feature(us, us.objects.counties).features)
    .enter().append("path")
      .attr("class", function(d) { return quantize(checkById.get(d.id)); })
      .attr("id", function(d) {if ((checkById.get(d.id))>1) {return d.id;} })
      .attr("d", path)
      .on('mouseover',function(d){tip.show(d)})
      .on('mouseout', tip.hide);
  renderAll();
}

index.html

<!DOCTYPE html>
<html>
<!--Example from bl.ocks.org/stevenae/8362841-->
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="county_map.css"/>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.1/crossfilter.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>  

<body>
<div id="title">Counties with Air Force installations</div>
<div id="note">Note: co-located bases in the same counties were offset to account for all bases on the map. For example, NCR area and Colorado Springs have multiple bases in the same county</div>
<div id="map">
  <div id="map-legend">
  </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>
</body>
</html>

thumbnail.png