fabianmoronzirfas
11/21/2012 - 8:20 AM

U.S. Counties TopoJSON

U.S. Counties TopoJSON

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
  };
})();
<!DOCTYPE html>
<meta charset="utf-8">
<style>

path {
  fill: none;
  stroke: #000;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="topojson.js"></script>
<script>

var width = 960,
    height = 500;

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.append("path")
      .datum(topojson.mesh(topology))
      .attr("d", path);
});

</script>

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.)