GeoJson Map of US Oil and Gas Basins

Map of US Oil and Gas Basins

Fork and edit of John Alexis Guerra Gómez's GeoJson Map of Bogotá.

Simple map of US oil and gas basins made from EIA data and hand-drawn data (via the R package mapedit).

<!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>

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>

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