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).
license: mit |
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; } | |
</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> |