Plot: rule across different groups

[nicola]

I have several graphs in a single plot (like this one Facets / Observable Plot / Observable | Observable) and I wanted to make a single verticle red rule across graphs.

I can’t find documentation for something like this.

Is this possible?

[mootari]

Sounds like you’re looking for the rule mark:

  marks: [
    // ...
    Plot.ruleX([35], {stroke: "red"})
  ]

Rule Mark / Observable Plot

[nicola]

Unfortunately the rule mark will create a rule in each of the graph, while instead I would like to have a single rule!

[mbostock]

If you just want it on a specific facet, you can specify that using the corresponding fx or fy option. For example, in the barley chart in the Plot: Facets notebook, if you just want a red rule at x = 20 on the Grand Rapids facet, you’d say:

Plot.ruleX([20], {stroke: "red", fy: ["Grand Rapids"]})

[mootari]

Additionally you can remove the padding between facets to get the appearance of a single continuous line:

  fy: { padding: 0 },

[nicola]

I want to achieve what mootari is showing, except that I the rule should go across graphs, the padding works, but I wonder if there is a better strategy.

Thank you!

[mbostock]

There’s not currently a way to draw a single rule at a specific abstract x value while connecting that rule across facets. Faceted marks are interrupted across facets, so you get multiple rules.

That said, you can make the rules appear as a single rule by turning off padding between facets as @mootari suggested, or by extending the rule using negative insets. (You’ll have to futz with the exact value of the negative inset if you don’t want adjacent rules to overlap.)

Plot.ruleX([35], {stroke: "red", inset: -7})

As an alternative strategy, you can use super faceting (facet: "super") which does allow you to draw a single mark across facets. But in this case you are not allowed to use the x or y scales, so you must position the rule yourself in screen coordinates. This feature is typically used for axis labels or to draw plot frames. For example, here’s a red rule offset by 100px from the left edge of the frame:

Plot.frame({anchor: "left", dx: 100, stroke: "red", facet: "super"})

[nicola]

Thank you, brilliant!