Built with blockbuilder.org
forked from bradoyler's block: us-states via Atlas-make
license: mit |
Built with blockbuilder.org
forked from bradoyler's block: us-states via Atlas-make
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v3.min.js"></script> | |
<script src="//d3js.org/topojson.v1.min.js"></script> | |
<style> | |
.mesh{ fill: #fff; stroke: #333; stroke-width: .8px;stroke-linejoin: round;} | |
.sphere { fill: #fff;} | |
.boundary { | |
fill: none; | |
stroke: #fff; | |
stroke-linejoin: round; | |
stroke-linecap: round; | |
vector-effect: non-scaling-stroke; | |
} | |
.overlay { fill: none; pointer-events: all;} | |
</style> | |
</head> | |
<body> | |
<script> | |
// topojson via https://github.com/bradoyler/atlas-make | |
var width = 960, | |
height = 400; | |
var projection = d3.geo.albersUsa() | |
var zoom = d3.behavior.zoom() | |
.scaleExtent([1, 8]) | |
.on("zoom", zoomed); | |
var path = d3.geo.path() | |
.projection(projection); | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height).append("g"); | |
var g = svg.append("g"); | |
svg.append("rect") | |
.attr("class", "overlay") | |
.attr("width", width) | |
.attr("height", height); | |
svg.call(zoom).call(zoom.event); | |
d3.json("us-states.json", function(error, ustopo) { | |
if (error) throw error; | |
g.append("path") | |
.datum({type: "Sphere"}) | |
.attr("class", "sphere") | |
.attr("d", path); | |
g.append("path") | |
.datum(topojson.mesh(ustopo)) | |
.attr("class", "mesh") | |
.attr("d", path); | |
}); | |
function zoomed() { | |
g.attr("transform", "translate(" + d3.event.translate | |
+ ")scale(" + d3.event.scale + ")"); | |
} | |
</script> | |
</body> |