New Jersey State Plane

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.

forked from mbostock's block: New Jersey State Plane

<!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>

https://d3js.org/d3.v4.min.js

https://d3js.org/topojson.v1.min.js