|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<body> |
|
<script src="//d3js.org/d3.v3.min.js"></script> |
|
<script src="//d3js.org/topojson.v1.min.js"></script> |
|
<script> |
|
|
|
var width = 960, |
|
height = 500; |
|
|
|
var projection = d3.geo.albersUsa() |
|
.scale(1000) |
|
.translate([width / 2, height / 2]); |
|
|
|
var path = d3.geo.path() |
|
.projection(projection); |
|
|
|
var svg = d3.select("body").append("svg") |
|
.attr("width", width) |
|
.attr("height", height); |
|
|
|
d3.json("https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/us.json", function(error, us) { |
|
if (error) throw error; |
|
|
|
svg.insert("path", ".graticule") |
|
.datum(topojson.feature(us, us.objects.land)) |
|
.attr("class", "land") |
|
.attr("d", path) |
|
.style("fill","#191919"); |
|
|
|
svg.insert("path", ".graticule") |
|
.datum(topojson.mesh(us, us.objects.counties, function(a, b) { return a !== b && !(a.id / 1000 ^ b.id / 1000); })) |
|
.attr("class", "county-boundary") |
|
.attr("d", path) |
|
.style("fill","none") |
|
.style("stroke","#5f5f5f") |
|
.style("stroke-width","0.2px"); |
|
|
|
svg.insert("path", ".graticule") |
|
.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })) |
|
.attr("class", "state-boundary") |
|
.attr("d", path) |
|
.style("fill","none") |
|
.style("stroke","#5f5f5f") |
|
.style("stroke-dasharray","5, 1") |
|
.style("stroke-width","1.2px"); |
|
}); |
|
|
|
d3.select(self.frameElement).style("height", height + "px"); |
|
|
|
</script> |
