Well. I’m testing turff.js within Observable to build buffers around countries. It’s simple and it works perfectly.
On the other hand, when I try to display the result of a buffer or another calculation with d3js & svg, the whole world is colored with the fill attribute . But, when I export the json file and display it in qgis, it is displayed correctly! I don’t understand why it actually does that. If someone has some explanations or solutions to correct it, I’ll take it. Thank you.
Hi @neocarto ! This is a weird thing that happens sometimes with .geojson. @bumbeishvili has created a tool that will help:
Here’s version of your notebook with working behaviours:
1 Like
I assume that the winding order of some of your features is wrong. The d3-geo docs state:
Spherical polygons also require a winding order convention to determine which side of the polygon is the inside: the exterior ring for polygons smaller than a hemisphere must be clockwise, while the exterior ring for polygons larger than a hemisphere must be anticlockwise. Interior rings representing holes must use the opposite winding order of their exterior ring. This winding order convention is also used by TopoJSON and ESRI shapefiles; however, it is the opposite convention of GeoJSON’s RFC 7946. (Also note that standard GeoJSON WGS84 uses planar equirectangular coordinates, not spherical coordinates, and thus may require stitching to remove antimeridian cuts.)
This becomes apparent if you call:
mybuffer.geometry.coordinates.splice(1, 10)
and then rerun the SVG cell.
1 Like
Thank you. The pb is solved using geojson-rewind GitHub - mapbox/geojson-rewind: enforce polygon ring winding order for geojson.
rewind = require(‘https://bundle.run/geojson-rewind@0.3.1’)
buff2 = rewind(mybuffer, true)
1 Like
Nice notebook @neocarto :
Thank you! I really learned a lot!
3 Likes