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
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.
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.
