Skip to content

Instantly share code, notes, and snippets.

@nautat
Forked from mbostock/.block
Created November 22, 2012 05:14
Show Gist options
  • Save nautat/4129508 to your computer and use it in GitHub Desktop.
Save nautat/4129508 to your computer and use it in GitHub Desktop.
U.S. Counties TopoJSON

A demo of TopoJSON on a U.S. counties shapefile from the U.S. census bureau. The original GeoJSON file was 2.2M; the TopoJSON file is 660K, a reduction of 70.5%! (Or gzipped, a 71% reduction from 596K to 176K.)

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.stroke {
fill: none;
stroke: #000;
stroke-width: .5px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script src="topojson.js"></script>
<script>
var width = 960,
height = 500;
var color = d3.scale.category20c();
var path = d3.geo.path();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("../4090846/us-counties.json", function(error, topology) {
svg.selectAll("path")
.data(topojson.object(topology, topology.objects[0]).geometries)
.enter().append("path")
.attr("d", path)
.style("fill", function(d) { return color(d.id / 1000 | 0); })
.style("fill-opacity", function(d) { return ((d.id % 6) + 6) / 12; });
svg.append("path")
.datum(topojson.mesh(topology))
.attr("class", "stroke")
.attr("d", path);
});
</script>
topojson = (function() {
function mesh(topology) {
var arcs = [], i = -1, n = topology.arcs.length;
while (++i < n) arcs.push([i]);
return object(topology, {type: "MultiLineString", arcs: arcs});
}
function object(topology, o) {
var tf = topology.transform,
kx = tf.scale[0],
ky = tf.scale[1],
dx = tf.translate[0],
dy = tf.translate[1],
arcs = topology.arcs;
function arc(i, points) {
if (points.length) points.pop();
for (var a = arcs[i < 0 ? ~i : i], k = 0, n = a.length, x = 0, y = 0, p; k < n; ++k) points.push([
(x += (p = a[k])[0]) * kx + dx,
(y += p[1]) * ky + dy
]);
if (i < 0) reverse(points, n);
}
function line(arcs) {
var points = [];
for (var i = 0, n = arcs.length; i < n; ++i) arc(arcs[i], points);
return points;
}
function polygon(arcs) {
return arcs.map(line);
}
function geometry(o) {
o = Object.create(o);
o.coordinates = geometryType[o.type](o.arcs);
return o;
}
var geometryType = {
LineString: line,
MultiLineString: polygon,
Polygon: polygon,
MultiPolygon: function(arcs) { return arcs.map(polygon); }
};
return o.type === "GeometryCollection"
? (o = Object.create(o), o.geometries = o.geometries.map(geometry), o)
: geometry(o);
}
function reverse(array, n) {
var t, j = array.length, i = j - n; while (i < --j) t = array[i], array[i++] = array[j], array[j] = t;
}
return {
version: "0.0.2",
mesh: mesh,
object: object
};
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment