clip voronoi mesh to geo polygon

[pdebruic]

I notice in the docs the voronoi mesh is clipped to the frame. Is there a way to clip it or mask it to a e.g. a US state border or county border? Thanks!

[mbostock]

You can do it in SVG, but there’s not a built-in way to do this with Plot currently. See #1109.

[pdebruic]

Thanks for the pointer. Because I don't know how to incorporate the workflow from #1109 I ended up writing some js to post-process the plots.

var geos = document.querySelectorAll('g[aria-label="geo"]')
document.querySelectorAll('g[aria-label="voronoi"]').forEach((element,index) =>{
    var clipPath = document.createElementNS('http://www.w3.org/2000/svg', 'clipPath');
    clipPath.innerHTML=geos[index].innerHTML;
    var clipId = 'clip'+index;
    clipPath.setAttribute('id',clipId);
    var plot = element.parentNode;
    plot.appendChild(clipPath);
    element.setAttribute('clip-path',"url(#"+clipId+")");
})

Which works for my needs.

Is there a way to set a class or id attribute on a plot?

[Fil]

There's no way currently to add a class; see #1002

[mbostock]

You can however set a class on the SVG element using the top-level className option.

[pdebruic]

Thanks! Was strange to discover that a camelCase class name gives an illegal class name error on Firefox. e.g. className: "myClass" is no good. I didn't test other browsers.

[pdebruic]

saner version of the above js

document.querySelectorAll('g[aria-label="voronoi"]').forEach((element,index) =>{
    var geo = element.parentNode.querySelector('g[aria-label="geo"]')
    if(geo){
    var clipPath = document.createElementNS('http://www.w3.org/2000/svg', 'clipPath');
    clipPath.innerHTML=geo.innerHTML;
    var clipId = 'clip'+index;
    clipPath.setAttribute('id',clipId);
    var plot = element.parentNode;
    plot.appendChild(clipPath);
    element.setAttribute('clip-path',"url(#"+clipId+")");
    }})