| license: gpl-3.0 | |
| height: 1200 |
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> |
