Polygons are in anticlockwise (D3js)

[zhik]

Hey,

I am having issues with importing geojson into d3.js. It seems to be related to how the json is structured d3/d3-geo#227

The json that is returned (example below) is anticlockwise which causes paths exported by the d3.geoPath function to span the full globe. Rewinding the coordinates orders seems to fix it.

 {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "coordinates": [
          [
            [
              -73.98184731377465,
              40.76805485662834
            ],
            [
              -73.97298060280693,
              40.76432477079467
            ],
            [
              -73.94921655865086,
              40.79689325670785
            ],
            [
              -73.9581323755779,
              40.80063095637897
            ],
            [
              -73.98184731377465,
              40.76805485662834
            ]
          ]
        ],
        "type": "Polygon"
      }
    },

[zhik]

Here is an example with central park
https://observablehq.com/d/8da9c5df732f514d

[chriswhong]

Hi @zhik, I am not sure I understand your issue, and the observable notebook you linked to is set to private.

If you draw a polygon in geojson.io, its outer ring will be anticlockwise per the geojson spec. (geojson.io uses the geojson-rewind package to enforce this regardless of how the polygon was drawn.)

If you're not getting the expected data out of geojson.io, let's dig into that.

[chriswhong]

Here's another thread that explains how d3 does not follow the geojson spec and requires clockwise outer rings.

https://stackoverflow.com/questions/64379885/d3-geopath-geojsonlint-cw-vs-ccw

D3 does not adhere to the geojson spec regarding winding order of geojson. D3 requires reverse winding (coordinates wound like a shapefile). This is awkward when validating your geojson. It is slightly odd that the spec specifies an order when it also mandates Cartesian coordinates, which means there is only one way to fill a polygon regardless of its winding. D3 breaks the spec again by using spherical math, which means winding order matters. It should cause no issues to reversely wind geojson for most practical purposes, turf.js offers a method to wind on the fly if needed. –
Andrew Reid

Closing as we are not going to take action on this