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