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