GeoJSON geographic differences between d3 and sheet

Question

My goal is to use d3 to generate SVG paths for each function in this collection of GeoJSON objects.

When I map paths using the flyer, all the functions look perfect.

d3.json("ct_counties.geo.json", function(data) { var leaflet_paths = leaflet_map.addLayer(new L.GeoJSON(data)); }); 

But when I map paths using d3, some functions look wrong.

 d3.json("ct_counties.geo.json", function(collection) { var bounds = d3.geo.bounds(collection); var path = d3.geo.path().projection(project); var feature = g.selectAll("path") .data(collection.features) .enter().append("path") .attr('class','county'); d3_map.on("viewreset", reset); reset(); function project(x) { var point = d3_map.latLngToLayerPoint(new L.LatLng(x[1], x[0])); return [point.x, point.y]; } function reset() { var bottomLeft = project(bounds[0]); var topRight = project(bounds[1]); svg.attr("width", topRight[0] - bottomLeft[0]) .attr("height", bottomLeft[1] - topRight[1]) .style("margin-left", bottomLeft[0] + "px") .style("margin-top", topRight[1] + "px"); g.attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")"); feature.attr("d", path); } }); 

See the differences between the cards here .

And refer to the full code here .

Since both cards use the same collection of functions, why is the d3 version wrong?

Answer 1

D3 is not mistaken, the data is incorrect, and the leaflet is more lenient.

Take Lichfield (upper left district) as an example:

 { "type" : "Feature", "properties" : { "kind" : "county", "name" : "Litchfield", "state" : "CT" }, "geometry" : { "type" : "MultiPolygon", "coordinates" : [ [ [ [ -73.0535, 42.0390 ], [ -73.0097, 42.0390 ], [ -73.0316, 41.9678 ], [ -72.8892, 41.9733 ], [ -72.9385, 41.8966 ], [ -72.9495, 41.8090 ], [ -73.0152, 41.7981 ], [ -72.9823, 41.6392 ], [ -73.1631, 41.5571 ], [ -73.1576, 41.5133 ], [ -73.3219, 41.5078 ], [ -73.3109, 41.4694 ], [ -73.3876, 41.5133 ], [ -73.4424, 41.4914 ], [ -73.4862, 41.6447 ], [ -73.5191, 41.6666 ], [ -73.4862, 42.0500 ] ] ] ] } } 

The multipolygon is not closed, its end is not equal to the beginning. I built the coordinates, indicating the first coordinate of red, and the last green -

As you can see, the last coordinate is discarded by d3.

GeoJSON specification says

A LinearRing closes a LineString with 4 or more positions. The first and last positions are equivalent (they represent equivalent points).

So, d3 has a point (not intended for pun intended), and MultiPolygon should be closed by adding the initial coordinate to the end:

 ...[ -73.4862, 42.0500 ], [ -73.0535, 42.0390 ] ] ] ]