Arbitrary clip paths

[mbostock]

It’d be nice to support arbitrary clip paths. I can implement one by wrapping a mark like so:

function clip(mark, renderClip) {
  return {
    initialize(facets, channels) {
      return mark.initialize(facets, channels);
    },
    filter(index, channels, values) {
      return mark.filter(index, channels, values);
    },
    render(facet, scales, values, dimensions, context) {
      const fragment = document.createDocumentFragment();
      const svg = fragment.appendChild(mark.render(facet, scales, values, dimensions, context));
      const clipPath = fragment.appendChild(renderClip(facet, scales, values, dimensions, context));
      svg.setAttribute("clip-path", "url(#clip)");
      clipPath.setAttribute("id", "clip");
      return fragment;
    }
  };
}

That should probably extend Mark, though? And it should generate a unique identifier rather than using “clip”.

Then I could have a function that creates a clipPath element like so:

function renderClip(facet, scales) {
  const clipPath = htl.svg`<clipPath>`;
  for (const {a, b} of abDisplayabilityCoordinates.filter(d => d.displayable)) {
    clipPath.appendChild(htl.svg`<rect
      x=${scales.x(a - 0.0025)}
      y=${scales.y(b + 0.0025)}
      width=${scales.x(a + 0.0025) - scales.x(a - 0.0025) + 1}
      height=${scales.y(b - 0.0025) - scales.y(b + 0.0025) + 1}
    />`);
  }
  return clipPath;
}

Ref. https://observablehq.com/@mjbo/oklab-named-colors-wheel

[mbostock]

Maybe duplicate of #181.

[espinielli]

I have tried to add clip-path to Plot.image() but it seems not handled by applyIndirectStyles() (that is what my browsing of the code brings me to...)

I would like to clip an image to a geo path:

    Plot.image(italy, {
      x: (d) => d.properties.lon,
      y: (d) => d.properties.lat,

      width: (d) => d.properties.width,
      height: (d) => d.properties.height,
      preserveAspectRatio: "none",
      src: (d) => d.properties.flag,
      clipPath: (d) => `url(#iso-${d.id})`,
      title: (d) => d.id
    })

I have some tinkering going on here: https://observablehq.com/d/a8fe9e54cf07cb7a

Any thoughts?

[Fil]

see #1338

[Fil]

Here's a snippet that uses the new render transform:

  marks: [
    Plot.geo(perimetro_mexico, {
      render: (i, s, v, d, c, next) =>
        svg`<clipPath id="x">${next(i, s, v, d, c).children[0]}` // create the clipPath "x"
    }),
    Plot.raster(data, {
      x: "longitude",
      y: "latitude",
      fill: "banda_interes",
      interpolate: Plot.interpolatorRandomWalk(),
      render: (i, s, v, d, c, next) =>
        svg`<g clip-path="url(#x)">${next(i, s, v, d, c)}` // reference "x" as clip-path
    }),

see https://observablehq.com/d/d5d3052622043025 & https://observablehq.com/@fil/diy-live-map-of-air-quality-in-the-us

[mbostock]

That’s really nice @Fil. I bet we could package that up into something reusable. Perhaps a clip transform where you supply a geometry channel, and it uses the geo mark under the hood?

[mbostock]

We should consider using CSS clip-path instead of SVG, since it is now widely supported and much more convenient since you don’t need a globally unique identifier.

[Fil]

clip-path + path is still very poorly supported: https://observablehq.com/d/bf434fc5675c8f13