Custom marks that return Plot objects instead of SVG

[Hvass-Labs]

I sometimes like to use a dashed line to designate y=0, but I only want to add it when the plot contains both pos and neg data on the y-axis, and I cannot hard-code this because the data comes from a database. It is a bit of a hassle to manually extract the y-axis range from the data itself, especially for plots that have multiple marks, or that transform the data such as a stacked areaY.

I learned from another answer you gave me, that I can make a custom mark, which is really a function that gets various data from the plotting system, including the y-axis range (aka. domain), so I don't have to manually process the data to infer its range. So I essentially have the following:

Plot.plot({

    marks: [
        // Various marks for the main plot ...

        // Custom mark for y=0.
        (index, scales, values, dimensions) => {
            const [y_min, y_max] = scales.scales.y.domain;

            if (y_min < 0 && y_max >= 0) {
               return Plot.ruleY([0], {strokeDasharray: 10, opacity: 0.5});
            }
        }
    ]});

This gives the following error in the plot.min.js file (I am still using a beta-build based on v0.6.11 that has the brushing feature):

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

I tried debugging but the source-file is minified so it is quite hard to read.

My guess is that when the plotting-algorithm sees the mark is a function, it assumes it returns an SVG string, but instead it returns a Plot.ruleY object which the system doesn't expect. Is that the problem?

I looked in the source-code and I can see that mark classes have a render function, but it has different arguments than the ones I get when I make a custom mark, so I don't know how to use that function to render the SVG.

How can I make this work? Please provide the actual code I would need, as I'm not really a Java-script programmer so it is hard for me to make a solution from just an abstract description.

Thanks!

[Fil]

Again it would be much easier to help if there was a complete example with some (possibly fake) data. Otherwise, I have to make one up, which will or will not match this use case, then create a fix that will or will not work in your situation. It is not a great way of providing support.

[Hvass-Labs]

OK, please take a look here: https://observablehq.com/d/8b9252f47ac2e85a

[Fil]

In this case I would create the svg element directly:

(index, scales, values, dimensions) => {
  const [y_min, y_max] = scales.scales.y.domain;
  if (y_min < 0 && y_max >= 0) {
    const y = scales.scales.y.apply(0);
    return svg`<line
      stroke="red"
      stroke-dasharray="10"
      x1="${dimensions.marginLeft}"
      x2="${dimensions.width - dimensions.marginRight}"
      y1="${y}"
      y2="${y}"
    >`;
  }
}

However I reckon that this doesn't give you all the goodies of using a mark. You could also write this:

  if (y_min < 0 && y_max >= 0) {
    return Plot.ruleY([0], { strokeDasharray: 10, opacity: 0.5 }).plot({
      y: scales.scales.y,
      axis: null,
      ...dimensions
    });
  }

note that this returns a whole chart (the "svg" node).

For something more precise, just select the rule element:

  if (y_min < 0 && y_max >= 0) {
    return Plot.ruleY([0], { strokeDasharray: 10, opacity: 0.5 }).plot({
      y: scales.scales.y,
      ...dimensions
    }).querySelector("[aria-label=rule]");
  }

[Hvass-Labs]

Thanks very much!

I am using your last solution because that seems to be the best for me. It works and adds very little time-overhead.

However, I would expect that a custom mark could return a Plot object directly, so I wouldn't have to manually render the mark and extract the correct SVG-element, which is quite complicated.

May I suggest that you extend the plotting engine to support this, so the user doesn't have to hack it like this.

[mbostock]

What you’re asking isn’t possible because it introduces a circular dependency (or feedback loop) between the Plot’s dimensions and scales and the marks themselves.

[Hvass-Labs]

OK thanks, I'll mark this as answered then. But perhaps it could show a more informative error-message when a mark is of an invalid type, because the one shown above is rather cryptic.

[Fil]

The mark has a correct type in the sense that it is a function. But its implementation is not conform to the API, because it must return a SVG element (the "Node" in the error message). I agree that the error message is difficult to grok, but it's not far off, in that sense.

Another element coming from your example could be discussed as a new feature: the possibility for a mark to make its data NOT part of the determination of the default domains for any scale, or for a given scale (in this case, y). Currently if you add a mark with Plot.ruleY([0]) and you don't set the domain for y, then the default domain will include 0. In this case, you'd want to skip this mark, let the other marks inform the default domain, and maybe clip the resulting rule to the frame (so that it's not shown if it's outside the default domain).

A different way of seeing this is #1577, which would make the determination of the default domain part of the API; you could then give your own function, that would receive the channels and the options, and return the domain. (The interesting options include nice, min, max…). I could see using this for example to say "something that covers 95% of the channel values, extended by 10%" (thus ignoring outliers).