A demo of TopoJSON on a U.S. counties shapefile from the census bureau using d3.geo.albersUsa. The same TopoJSON file can also be used to show counties.
forked from mbostock's block: U.S. States TopoJSON small multiple
license: gpl-3.0 |
A demo of TopoJSON on a U.S. counties shapefile from the census bureau using d3.geo.albersUsa. The same TopoJSON file can also be used to show counties.
forked from mbostock's block: U.S. States TopoJSON small multiple
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
.land { | |
fill: #222; | |
} | |
.county-boundary { | |
fill: none; | |
stroke: #fff; | |
stroke-width: .5px; | |
} | |
.state-boundary { | |
fill: none; | |
stroke: #fff; | |
} | |
</style> | |
<body> | |
<script src="//d3js.org/d3.v3.min.js"></script> | |
<script src="//d3js.org/topojson.v1.min.js"></script> | |
<script> | |
var width = 96, | |
height = 50; | |
var projection = d3.geo.albersUsa() | |
.scale(100) | |
.translate([width / 2, height / 2]); | |
var path = d3.geo.path() | |
.projection(projection); | |
d3.json("https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/us.json", function(error, us) { | |
if (error) throw error; | |
var land = topojson.feature(us, us.objects.land), | |
land_path = path(land), | |
counties = topojson.mesh(us, us.objects.counties, function(a, b) { return a !== b && !(a.id / 1000 ^ b.id / 1000); }), | |
counties_path = path(counties), | |
states = topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }) | |
states_path = path(states); | |
for (var i=1; i<=81; i++) { | |
console.log(i, new Date()) | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
svg.insert("path", ".graticule") | |
.datum(land) | |
.attr("class", "land") | |
.attr("d", land_path); | |
svg.insert("path", ".graticule") | |
.datum(counties) | |
.attr("class", "county-boundary") | |
.attr("d", counties_path); | |
svg.insert("path", ".graticule") | |
.datum(states) | |
.attr("class", "state-boundary") | |
.attr("d", states_path); | |
} | |
}); | |
d3.select(self.frameElement).style("height", height + "px"); | |
</script> |