leaflet-pip | point in polygon intersections for leaflet | Dataset library

D3, including d3.geoContains, uses spherical geometry. This is in contrast to almost every other web mapping tool which treat latitude longitude points as Cartesian.

This means every connection between two points in a geographical feature follows great circle distance (which is why it is harder to draw bounding boxes, see here, while other libraries may make it harder to draw great circle arcs, see here).

By using spherical geometry, the antimeridian doesn't cause as many problems, but conversely, winding order matters: are you drawing everywhere except an area of interest or the area of interest itself.

This applies to d3.geoContains: Your polygons are wound in the opposite order as they are supposed to be. Instead of bounding a small box, they bound the rest of the world - which is why you get the opposite outcome as expected.

You have two options: rewind the polygons , for example with turf.js: