D3 Examples - GeoJson Map of US Oil and Gas Basins

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
h1, h2 {
  font-family: "Lato", "Open Sans", "sans-serif";
  margin: 0px;
  padding: 3px;
}
​
.text-things {
  margin-bottom: 8px;
}
​
.tract { stroke: #fff; }
.tract:hover { opacity: 0.5; transition-delay: 500ms;}
​
.d3-tip {
  line-height: 1;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}
​
</style>
​
<div class="text-things">
    <h1>US Weekly Oil and Gas Rig Count</h1>
    <h2>December 29, 2017</h2>    
</div>
​
<svg width="960" height="550"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="d3-tip.js"></script>
<script>
var svg = d3.select("svg"),
    margin = { top: 20, bottom:20, right: 20, left: 20},
    width = +svg.attr("width"),
    height = +svg.attr("height");
​
var netCount = d3.map();
var netChange = d3.map();
​
var tip = d3.tip()
    .attr("class", "d3-tip")
    .html(function(d) {
      return "Basin: " + d.properties.display_name  +
      "<br>Current total: " + netCount.get(d.properties.display_name) +
      "<br>Weekly change: " + netChange.get(d.properties.display_name);
      });
​
svg.call(tip);
​
d3.queue()
  .defer(d3.json, "us_basins.json")
  .defer(d3.csv, "netCount.csv", function(d) { return netCount.set(d.basin, +d.value); })
  .defer(d3.csv, "netChange.csv", function(d) { return netChange.set(d.basin, +d.change_1wk); })
  .await(ready);
​
function ready(error, data) {
  if (error) throw error;
​
  var path = d3.geoPath()
      .projection(d3.geoAlbers()
          .fitExtent([[margin.left, margin.top], [width-margin.right, height-margin.bottom]], data)
      );
  
  var signs = [1, 0, -1];
​
  var colScale = d3.scaleOrdinal()
               .domain(signs)
               .range(["#4682b4", "#7f7f7f", "#a52a2a"]);
​
  var timeout;
​
  svg.selectAll("path")
    .data(data.features)
    .enter().append("path")
      .attr("class", "tract")
      .attr("fill", function(d) {
        return colScale(Math.sign(netChange.get(d.properties.display_name))); })
      .attr("d", path)
      .on("mouseover", function(d) {
        var context = this;
        var args = [].slice.call(arguments);
        args.push(this);
        clearTimeout(timeout);
        timeout = setTimeout(function() {
          tip.show.apply(context, args);
          }, 500);
      })
      .on("mouseout", function(d) {
        clearTimeout(timeout);
        tip.hide(d);
        });
};
​
</script>
    