A guide to creating custom marks with Plot

Show and Tell
1

Whenever I wish to add a little more expressiveness when using Plot I find myself having to search this forum and examples to remember what to do.

So I thought I create an explainer with examples for the different ways Plot marks can be customised beyond the standard channel encodings. It started as a simple ‘hello’ page, but grew a little as I explored more. I ended up being pleasantly surprised at how easy it was to customise, which is mostly down to the elegant design of Plot from @mbostock and @Fil

customMontage
customMontage1920×1960 398 KB

I hope others find it useful. But also happy to receive comments for improvements / simplifications, especially those with more in-depth knowledge of SVG and the inner workings of Plot.

Here’s the page:

5 Likes
2

Nice work, Jo! Thanks for writing this up and sharing.

Another technique I use sometimes is a render function; this is essentially shorthand for a custom mark. You can use this when your custom mark doesn’t need any data, but you still want access to the plot’s scales. An example of this is here for the (court) markings mark:

You can also use this technique to invert the pattern you demonstrated: instead of embedding a plot into an SVG template literal, you can embed the SVG template literal into the plot. Another example is generating the linearGradient element for these bars:

The render mark option is also quite useful for, in effect, extending a built-in mark to add some custom rendering. This example could probably simplified, but here’s a “growUp” render transform that applies to the bar mark to add a little (and gratuitous) intro animation:

This reminds me that we still need to document all these things better. Fil has a great start in #1811 but I haven’t had much time to contribute yet.

1 Like
3

Thanks Mike. I like this approach particularly, as it would make adapting existing code more straightforward (we just add one extra ‘mark’ to the list). However, if I’ve understood correctly, this limits the scope of the <defs> to the marks alone, so wouldn’t work, for example, if you needed to reference them in a color’s range specification outside the marks list.