Add a "line" marker option

[guizmaii]

Useful to render "error" in bars

Here is a (zoomed) example:

It's my first PR here and I'm, in general, not used to making PRs on JS/TS projects, so please let me know if anything is missing (tests, etc.), I'll add anything missing 🙂

Also, I'm a super newbie with SVG. To make this work, I just copy/pasted the arrow marker and changed it until it was rendering what I wanted. I'm absolutely not sure of what I'm doing here 😅

[guizmaii]

y1 & y2 values at -2 and 2 are arbitrary. That was rendering well in my charts.
Let me know if you want to change them 🙂

[guizmaii]

Made some change to make it configurable

[Fil]

Thanks for sharing! Instead of changing Plot's source code, you can pass a function as a marker. That function can be configurable, to indicate the length of the tick. You might also want to use orient=auto so that it rotates with the curve; see for example:
https://observablehq.com/@recifs/plot-custom-markers

[guizmaii]

Hi @Fil

Thanks for the feedback and the link 🙂

Instead of changing Plot's source code, you can pass a function as a marker

That's what I did, see:

My issue was that I didn't know how to make a marker so I had to copy/paste some code from Plot internals (the create function in the screenshot).
Your link shows how to do it without having to copy Plot internals, thanks 🙂
Maybe this example should be added to the documentation, WDYT?

Finally, I still think it could be a good thing for Plot to have this additional default marker. That's why I submitted this PR.
It's not unusual to want to show "error bars", it's an option in a lot of charting libs, and this marker allows you to make these "error bars" look nice, I think.
WDYT?

[Fil]

It's still not configurable, though I don't know exactly how we'd make it simple to configure. One thing that I would like to change also is the name, because marker "line" does not really evoke this marker that is a small tick across the line (in other words perpendicular to the curve).

[guizmaii]

It's still not configurable, though I don't know exactly how we'd make it simple to configure

I think the easiest way would be to export the function so that people can use it directly:

markerStart: (color, context) => markerLine(4)(color, context)

One thing that I would like to change also is the name,

Agreed. The current name is not ideal. Open to suggestions 🙂

[mbostock]

I appreciate the suggestion, but I don’t think we would take this approach to implement error bars; the upper and lower bounds of the error bar should be specified in abstract coordinates rather than in pixels (and maybe asymmetric). Perhaps instead we should take the existing rule mark and extend it to support little bars at the end.

Here is an example using rule as it exists today:

Plot.plot({
  marks: [
    Plot.barX(alphabet, {x: "frequency", y: "letter", sort: {y: "-x"}, fill: "steelblue"}),
    Plot.ruleY(alphabet, {x1: (d) => d.frequency * 0.9, x2: (d) => d.frequency * 1.1, y: "letter"}),
    Plot.ruleX([0])
  ]
})

And here is an example using the tick mark to draw the ends of the error bars:

Plot.plot({
  marks: [
    Plot.barX(alphabet, {x: "frequency", y: "letter", sort: {y: "-x"}, fill: "steelblue"}),
    Plot.ruleY(alphabet, {x1: (d) => d.frequency * 0.9, x2: (d) => d.frequency * 1.1, y: "letter"}),
    Plot.tickX(alphabet, {x: (d) => d.frequency * 0.9, inset: 6, y: "letter"}),
    Plot.tickX(alphabet, {x: (d) => d.frequency * 1.1, inset: 6, y: "letter"}),
    Plot.ruleX([0])
  ]
})

Notebook: https://observablehq.com/d/a2cad4b219d69125