block by mbostock 5126418

New Jersey State Plane

Full Screen

An example of the New Jersey state plane, a transverse Mercator projection with an origin of 74° 30′ W and 38° 50′ N. The projections for each state are defined in the USGS publication, State Plane Coordinate System of 1983. This map shows census tracts; the data is available as TopoJSON in the U.S. Atlas project.

This example uses projection.fitExtent to set the projection’s scale and translate automatically from the displayed geometry.

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.tract {
  fill: #eee;
}

.tract:hover {
  fill: orange;
}

.tract-border {
  fill: none;
  stroke: #777;
  pointer-events: none;
}

</style>
<svg width="960" height="1200"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

d3.json("nj-tracts.json", function(error, nj) {
  if (error) throw error;

  var land = topojson.feature(nj, {
    type: "GeometryCollection",
    geometries: nj.objects.tracts.geometries.filter(function(d) {
      return (d.id / 10000 | 0) % 100 !== 99;
    })
  });

  // EPSG:32111
  var path = d3.geoPath()
      .projection(d3.geoTransverseMercator()
          .rotate([74 + 30 / 60, -38 - 50 / 60])
          .fitExtent([[20, 20], [940, 1180]], land));

  svg.selectAll("path")
    .data(land.features)
    .enter().append("path")
      .attr("class", "tract")
      .attr("d", path)
    .append("title")
      .text(function(d) { return d.id; });

  svg.append("path")
      .datum(topojson.mesh(nj, nj.objects.tracts, function(a, b) { return a !== b; }))
      .attr("class", "tract-border")
      .attr("d", path);
});

</script>