Neighboring Geography Selection

Testing out selecting neighboring geographic units. Uses TopoJSON's topojson.neighbors(objects) function.

Hover to highlight a county and it's neighboring counties. This lets you see how a county compares to its immediate neighbors for a given variable, here the 2014 unemployment rate.

Data sources: Unemployment data from U.S. Bureau of Labor Statistics. Shapefile from U.S. Census Bureau, cleaned up with QGIS, simplified with mapshaper.org. Color palette from ColorBrewer

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Neighboring Geography Selection</title>
    <style>

body {
        font: 9px sans-serif;
      }

.county {
        stroke: slategrey;
        stroke-width: 1px;
      }

.bar {
        stroke: lightgrey;
        stroke-width: .5px;
      }
      .q-0 { fill: #f7f7f7; }
      .q-1 { fill: #d9d9d9; }
      .q-2 { fill: #bdbdbd; }
      .q-3 { fill: #969696; }
      .q-4 { fill: #636363; }
      .q-5 { fill: #252525; }

.hovered {
        webkit-transition: 250ms;
        -moz-transition: 250ms;
        -o-transition: 250ms;
        transition: 250ms;
        fill: red;
        font-weight: bold;
      }

.neighbor {
        webkit-transition: 250ms;
        -moz-transition: 250ms;
        -o-transition: 250ms;
        transition: 250ms;
        fill: rgb(255, 129, 129);
        font-weight: bold;
      }

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

.axis path {
        display: none;
      }

svg {
        position: absolute;
      }

.map {
        left: 300px;
      }

</style>
  </head>
  <body>
    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
    <script>
      var margin = {top: 10, left: 70, bottom: 40, right: 20},
          width = 960/2 - margin.left - margin.right,
          height = 700 - margin.top - margin.bottom;

var projection = d3.geo.conicConformal()
        .rotate([90, 0])
        .center([.2, 44.75])
        .parallels([29.5, 45.5])
        .scale(6000)
        .translate([
          (width + margin.left + margin.right) / 2,
          (height + margin.top + margin.bottom) / 2
        ])
        .precision(.1);

var path = d3.geo.path()
          .projection(projection);

var scale = {
        x: d3.scale.linear().range([0, width]),
        y: d3.scale.ordinal().rangeBands([height, 0], .1),
        color: d3.scale.quantize()
          .range(d3.range(6))
      };

var axis = {
        x: d3.svg.axis().scale(scale.x).orient("bottom"),
        y: d3.svg.axis().scale(scale.y).orient("left")
      };

var chart = d3.select("body").append("svg")
          .attr("class", "chart")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
        .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var map = d3.select("body").append("svg")
        .attr("class", "map")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom);

chart.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")");

chart.append("g")
        .attr("class", "y axis");

d3.json("wi.json", ready)

function ready(error, wi) {
        if (error) throw error;

var countyData = cleanData(wi);

scale.x.domain([0, d3.max(countyData, function(d) { return d.unemployment_rate; })]);
        scale.y.domain(countyData.map(function(d) { return d.name; }));
        scale.color.domain(d3.extent(countyData, function(d) { return d.unemployment_rate; }));

// Draw map
        var counties = map.selectAll(".county").data(countyData)
          .enter().append("path")
            .attr("class", function(d) { return "county q-" + scale.color(d.unemployment_rate); })
            .attr("d", path)
            .on("mouseenter", mouseenter)
            .on("mouseleave", mouseleave);

// Draw bar chart
        var bars = chart.selectAll(".bar").data(countyData)
          .enter().append("rect")
            .attr("x", function(d) { return scale.x(0); })
            .attr("y", function(d) { return scale.y(d.name); })
            .attr("width", function(d) { return scale.x(d.unemployment_rate); })
            .attr("height", function(d) { return scale.y.rangeBand(); })
            .attr("class", function(d) { return "bar q-" + scale.color(d.unemployment_rate); })
            .on("mouseenter", mouseenter)
            .on("mouseleave", mouseleave);

chart.select(".x.axis")
            .call(axis.x)
          .append("text")
            .attr("x", width)
            .attr("y", 30)
            .style("text-anchor", "end")
            .text("Unemployment Rate (%)");

chart.select(".y.axis")
          .call(axis.y);

function mouseenter(hovered) {
          counties
            .classed("hovered", function(d) { return d === hovered; })
            .classed("neighbor", function(d) { return hovered.neighbors.indexOf(d) !== -1; });

bars
            .classed("hovered", function(d) { return d === hovered; })
            .classed("neighbor", function(d) { return hovered.neighbors.indexOf(d) !== -1; });

labels
            .classed("hovered", function(d) { return d === hovered; })
            .classed("neighbor", function(d) { return hovered.neighbors.indexOf(d) !== -1; });

chart.select(".y.axis").selectAll("g")
            .classed("hovered", function(name) { return name === hovered.name; })
            .classed("neighbor", function(name) {
              return hovered.neighbors
                .filter(function(d) { return d.name === name; }).length > 0;
            });
        }

function mouseleave() {
          counties
            .classed("hovered", false)
            .classed("neighbor", false);

bars
            .classed("hovered", false)
            .classed("neighbor", false);

labels
            .classed("hovered", false)
            .classed("neighbor", false);

chart.select(".y.axis").selectAll("g")
            .classed("hovered", false)
            .classed("neighbor", false);
        }
      }

return countyData;
      }

d3.select(self.frameElement)
        .style("width", 800 + "px")
        .style("height", (height + margin.top + margin.bottom) + "px");
    </script>
  </body>
</html>

https://d3js.org/d3.v3.min.js

https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js

https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js