Direct label arrow on plot

Community Help
1

I am trying to figure out how to direct label some arrows on to a plot that are readable for a user. I have this notebook here as an example: Direct label direction / Sam Albers | Observable

I have manually drawn some arrows that might be about what I am after:

image
image2594×616 39.1 KB

Note that I have purposefully squeezed the < 0 portion of the plot as ideally I like to be able to extend the x axis to ensure that each arrow and annotation is always readable.

So is there a way to add arrows like this? Could be on the top or the bottow and ideally outside the plot area. I didn’t find anything in the docs so apologies if I missed it.

2

You could try this:

Plot.plot({
  marks: [
    Plot.barX(df, {y: "group", x: "value", fill: "category"}),
    Plot.arrow(df, Plot.stackX(Plot.selectMaxX({x: "value", insetStart:10, y: () => "A", dy: -20}))),
    Plot.arrow(df, Plot.stackX(Plot.selectMinX({x: "value", insetStart:10, y: () => "A", dy: -20}))),
  ]
})

It could be nicer (not having to reference y and dy, but instead frameAnchor:“top”), see One-dimension link and arrow · Issue #1541 · observablehq/plot · GitHub

3

Oh that looks really close. Any thoughts on how one might accomodate different inputs? For example, in the notebook I now have df2 which has all numbers > 0. That results in a bit of a funky plot here:

image
image1322×224 7.29 KB

4

You could filter out non-negative values with Plot.filter.