Order of coordinates for GeoJson feature affects fill/stroke

The example below shows a GeoJson triangle (called randomShape) being drawn on an orthographic projection. I wanted to fill the triangle in red, but you can see that the entire projection except for the triangle gets filled in red. I also noticed that if I just stroke the triangle and not fill it, the outline of the orthographic projection also gets stroked in red. I would have expected only the triangle to be stroked in red.

If I reverse the order of the coordinates of the triangle and fill it (this version of the triangle is called randomShapeReversed), it successfully gets filled in red.

Why the change in behavior based on the order of the feature’s coordinates? Is this expected behavior? Or perhaps I’m missing something in my code.

Yes, winding order affects the definition of spherical polygons. See this notebook:

Thank you! I also see that the GeoJson documentation explains the right-hand rule, although it states that a “linear ring MUST follow the right-hand rule with respect to the area it bounds, i.e., exterior rings are counterclockwise, and holes are clockwise”. I believe it’s the opposite, correct? Exterior rings should be clockwise while holes are counterclockwise.

D3 does not use the suggested coordinate reference system in the current GeoJSON specification, and has a different definition of the right-hand rule (as described in the linked notebook and as used by ESRI in the Shapefile format specification, “The neighborhood to the right of an observer walking along the ring in vertex order is the inside of the polygon. Vertices for a single, ringed polygon are, therefore, always in clockwise order”). Originally (in 2008) GeoJSON did not dictate a coordinate system. GeoJSON later standardized on the WGS84 coordinate reference system, effectively an equirectangular projection.

D3 uses spherical coordinates. D3 interprets a line between two points as a geodesic arc, whereas GeoJSON interprets it as a straight Cartesian line in the equirectangular projection. D3 uses spherical rather than planar coordinates to support arbitrary aspects via spherical rotation and spherical clipping.