Using D3 to show USGS shale-gas data from a national assessment that was completed in 2012. You can run your mouse over each region to see related metadata.
The state boundaries come from Natural Earth. You can click on a state to zoom in/out.
Using D3 to show USGS shale-gas data from a national assessment that was completed in 2012. You can run your mouse over each region to see related metadata.
The state boundaries come from Natural Earth. You can click on a state to zoom in/out.
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<title>shale</title> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script> | |
<style> | |
svg { | |
stroke-width: 1.5; | |
} | |
.feature { | |
stroke: Orange; | |
fill: Orange; | |
fill-opacity: .3; | |
} | |
.feature:hover { | |
stroke: Black; | |
fill: gray; | |
} | |
.tooltip { | |
margin: 20px 20px 20px 20px; | |
background-color: #D3D3D3; /* light gray */ | |
border-style: solid; | |
padding: 5px 5px 5px 5px; | |
font-size: 1.25em; | |
position: absolute; | |
z-index: 100; | |
} | |
</style> | |
<body> | |
<script> | |
var width = 960, | |
height = 500, | |
centered; | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height) | |
.append("g"); | |
var path = d3.geo.path(); | |
var tooltip = d3.select("body") | |
.append("div") | |
.attr("class", "tooltip") | |
.style("visibility", "hidden"); | |
queue() | |
.defer(d3.json, "data.json") | |
.defer(d3.json, "us.json") | |
.await(ready); | |
function ready(error, gas, us) { | |
if (error) return console.error(error); | |
svg.selectAll("path") | |
.data(us.objects.us.geometries.map(function(d) { return topojson.feature(us, d); })) | |
.enter() | |
.append("path") | |
.style("fill", "lightgray") | |
.style("stroke", "black") | |
.attr("d", path) | |
.on("click", clicked); | |
svg.selectAll(".feature") | |
.data(Object.keys(gas.objects).map(function(d) { return topojson.feature(gas, gas.objects[d].geometries[0]); })) | |
.enter() | |
.append("path") | |
.attr("class","feature") | |
.attr("d", path) | |
.on("mouseover", showTooltip) | |
.on("mousemove", moveTooltip) | |
.on("mouseout", hideTooltip) | |
.on("click", clicked); | |
}; | |
function showTooltip(d) { | |
tooltip[0][0].innerHTML = d.properties.ASSESSNAME + "<br>" + d.properties.PROV_NAME; | |
tooltip.style("visibility", "visible"); | |
tooltip.style("top", (d3.event.pageY-10)+"px") | |
.style("left",(d3.event.pageX+20)+"px"); | |
} | |
function moveTooltip(d) { | |
tooltip.style("top", (d3.event.pageY-10)+"px") | |
.style("left",(d3.event.pageX+20)+"px"); | |
} | |
function hideTooltip(d) { | |
tooltip.style("visibility", "hidden"); | |
} | |
function clicked(d) { | |
var x, y, k; | |
if (d && centered !== d) { | |
var centroid = path.centroid(d); | |
x = centroid[0]; | |
y = centroid[1]; | |
k = 4; | |
centered = d; | |
} else { | |
x = width / 2; | |
y = height / 2; | |
k = 1; | |
centered = null; | |
} | |
svg.selectAll("path") | |
.classed("active", centered && function(d) { return d === centered; }); | |
svg.transition() | |
.duration(750) | |
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")") | |
.style("stroke-width", 1.5 / k + "px"); | |
} | |
</script> |