d3-geo icon indicating copy to clipboard operation
d3-geo copied to clipboard

postclip with polygon path maybe...

Open saifulazfar opened this issue 3 years ago • 10 comments

im trying making a composite projection map as shown here

https://observablehq.com/@saifulazfar/composite-projection-with-d3-geoclippolygon

the map was originally design with avenza mappublisher to get the initial composition..i understand the sphere coordinate cause the issue of rounded with geoClip.polygon...but is there a way postclip with path/polygon? not just with rectangle...

im trying recreating this natgeo pacific map \ picture remove due to copyright concern

saifulazfar avatar Oct 05 '22 09:10 saifulazfar

We can define the spherical pre-clip shapes with more intermediate points—it still won't be a perfect line, but the issue will not be visible. On top of that, it's difficult to clip a shape with itself, so we need to take extra-care when we draw the outlines. I've sent you a suggestion. This is going to be a beautiful map!

Fil avatar Oct 05 '22 10:10 Fil

PS: There might be a way to do the correct planar clipping, but it will be for another time :)

Fil avatar Oct 05 '22 10:10 Fil

thank u for your help...looks great...

saifulazfar avatar Oct 05 '22 16:10 saifulazfar

sory another one question @Fil ... is there any plan support postclip with polygon path...while currently the map clip was define with coordinates interpolate planar...definitely works great with any projection...but its still hard-code coordinate...maybe i want like just draw mask/clip with svg/canvas so there is flexibilty to define margin/gap between composition map or such...like mbostock postclip example looks great define margin/padding but still lmit to rectangle...just wonder how with custom polygon with postclip

saifulazfar avatar Oct 07 '22 06:10 saifulazfar

d3-geo doesn't include a generic planar clipping algorithm (see https://github.com/d3/d3-polygon/issues/4). It would be neat to have a generic clipping function (polygon postclip), but I don't think there is an easy solution.

Fil avatar Oct 10 '22 01:10 Fil

hi @Fil ..sory for reopen this issue just...since interpolate planar works great to counter clip with spehere coordinate...i assume there is no way to have rounded clip right?...like shown image below NG New Zealand NewGuinea 1962

saifulazfar avatar Apr 03 '23 19:04 saifulazfar

The "rounded path" needs to be a polygon with as many vertices as necessary to give a good enough precision?

Fil avatar Apr 03 '23 19:04 Fil

need help https://observablehq.com/d/63fa416fb7f91e82 ... how to use d3.geoClipAntimeridian to clip d3.geoInterruptedHomolosine()

saifulazfar avatar Apr 07 '23 02:04 saifulazfar

you could try this:

<clipPath id="popsdensityclip"><path d="${pops_density(outline)}" /></clipPath>
<path stroke="#333333" fill="white" stroke-width="0.4" d="${pops_density(land)}" clip-path="url(#popsdensityclip)" />
<path stroke="#333333" fill="none" stroke-width="1" d="${pops_density(outline)}"  />
Capture d’écran 2023-04-07 à 06 55 02

(and remove the antimeridian clip)

Fil avatar Apr 07 '23 04:04 Fil

yeah...i tought originally there are like d3.geo.polygon way of clip the sphere of Interrupt Goode Homolosine projection...after looks at more example it seems just use svg and canvas clip only...i prefer to use d3.geo.polygon way of clipping (either clipAngle or d3.clipPolygon) since its more code literate and cleaner code output...

saifulazfar avatar Apr 07 '23 21:04 saifulazfar