Plot.image render SVG elements

[mkfreeman]

I've found that rendering <svg> elements - specifically those made using plot - can be a powerful visualization technique (example). This is a first pass at supporting svg rendering through the Plot.image mark.

Unsure if this is a desired feature or approach, but figured I could start the conversation.

[mbostock]

Maybe we could approach this as a Plot.svg mark? I don’t think we want to serialize the generated SVG as a data URL; that’s a lot slower than embedding the SVG directly. You can almost do this as-is with just a bare render function, but presumably we want more flexibility to position (and resize) that element within the frame.

The harder point is that this is a “decoration” mark without data, like the frame mark, rather than a data-driven mark. Not sure how much we want to recommend this pattern vs. something more specific, like a sparkline (similar to a custom symbol with the dot mark).

Edit: The latter comment was a response to the test. The notebook demonstrates the data-driven case. But for example since the plots are rendered separately, they will not share scales and so it could be hard to use correctly.

[mkfreeman]

Thanks for your thoughts! I definitely imagine this as a data-driven mark, as in the notebook (sorry the test wasn't more representative of the use-case).

Great point that this may nudge users into a bit of an anti-pattern where they're rendering plots with different scales and showing them together.

In some cases, users may not be concerned with a shared scale across plots (for example, drawing country outlines):

I'll think a little more about how (if) a mark like Plot.svg could behave (or be described) in a more generalizable way. Will also look at the rendering.

[mbostock]

I like the idea of subplots or “subfacets” that share scales but can be positioned arbitrarily in x and y.

[mkfreeman]

Interesting - definitely a bit of a larger undertaking 😭 , will think about it!

[Fil]

A bit like https://observablehq.com/@observablehq/plot-of-plots?

[mbostock]

Yes, but with shared scales. I think it would be a similar mechanism to how facets currently work, with the difference being that you can position the facet arbitrarily in the main plot’s x and y coordinate space, and then the subplots have their own x and y scales (shared across subplots).

[mkfreeman]

There's also overlap with the desire for custom tips (#1767) - if subplots can be arbitrarily positioned in x/y space, then with a Pointer transform, they could allow for custom tip content.

Enabling the Tip mark to render svg elements (most importantly, Plots) would get most of the functionality here (except for shared scales).

[Fil]

See #1870