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; }
</style>
​
<div class="text-things">
    <h1>US Weekly Oil and Gas Rig Count</h1>
    <h2>Week of: December 8, 2017</h2>    
</div>
​
<svg width="960" height="550"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    margin = { top: 20, bottom:20, right: 20, left: 20};
​
d3.json("us_basins.json", function(error, data) {
  if (error) throw error;
​
  var path = d3.geoPath()
      .projection(d3.geoAlbers()
          //.rotate([0,0,-40]) // Make it horizontal (kind of)
          .fitExtent([[margin.left, margin.top], [width-margin.right, height-margin.bottom]], data)
      );
  
  var signs = [1, 0, -1];
​
  var colScale = d3.scaleOrdinal()
               .domain(signs)
               .range(["#4fa8ff", "#7f7f7f", "#ce1141"]);
​
  svg.selectAll("path")
    .data(data.features)
    .enter().append("path")
      .attr("class", "tract")
      .attr("fill", function(d) {
        return colScale(Math.sign(d.properties.change_1wk)); })
      .attr("d", path)
    .append("title")
      .text(function(d) { return "Basin: " + d.properties.display_name +
      "\nCurrent total: " + d.properties.value +
      "\nWeekly change: " + d.properties.change_1wk; });
});
​
​
</script>
    