Plot.text should default to tabular figures / numbers

[visnup]

If you plot some numbers as text with a text-anchor: end, it'd be nice if the numbers were tabular and aligned horizontally by default.

For example:

Plot.plot({
  marks: [
    Plot.ruleX([0], { stroke: 'lightgray' }),
    Plot.text(
      [
        ["a", 3.4],
        ["b", 2.1],
        ["c", 12.8]
      ],
      { y: "0", text: "1", textAnchor: "end", dx: 7.5 }
    )
  ],
  width: 100
})

Produces:

Where the decimal is not quite aligned due to the thinner 1 in 2.1.

I'm pretty sure there are some arcane CSS styles that may fix this.

[tophtucker]

imo even regardless of textAnchor!

[Fil]

I don't think svg is that smart? Here's a solution, that could be more generic if we exposed Plot.transform (#411):

[
    Plot.text(data, {
      ...options,
      text: (d) => `${text(d)}`.replace(/^(\d+).*/, "$1"),
      textAnchor: "end"
    }),
    Plot.text(data, {
      ...options,
      text: (d) => `${text(d)}`.replace(/^(\d+)/, ""),
      textAnchor: "start"
    })
  ]

https://observablehq.com/@fil/tabular-align-577

Note that if we have to measure the bbox of the text, it might not hold if people change the styles afterwards. However, a drawback of the method above is that we can't do a "halo" below the text.

[tophtucker]

I think SVG is that smart and Plot.text’s fontVariant property could just default to "tabular-nums"! This already works:

Plot.plot({
  marks: [
    Plot.ruleX([0], { stroke: "lightgray" }),
    Plot.text(
      [
        ["a", 3.4],
        ["b", 2.1],
        ["c", 12.8]
      ],
      {
        y: "0",
        text: "1",
        textAnchor: "end",
        dx: 7.5,
        fontVariant: "tabular-nums"
      }
    )
  ],
  width: 100
})

[Fil]

what about aligning:

      [
        ["a", "3.4km"],
        ["b", "2.1"],
        ["c", 12.8],
        ["d", "some"],
        ["e", -15.823]
      ],

thanks

[tophtucker]

oh gotcha gotcha sry yeah, wasn't thinking about that, my bad, i was underappreciating your nb! almost more like tex's \begin{align} or w/e. another case where merely doing font-variant: tabular-nums is not enough is aligning (12.34) with 12.34 for financial applications that use parens for negative values. or the thing where people like to show postfix units in only the first row of a table.

though i feel like the font-variant default would be good enough for now; it'd handle visnu's original case and it's all i'd generally hope for. and then the fancier alignment thing could be an example / plugin?

[Fil]

Ah ha no problem. TBH I don't think my notebook is a good solution! The point is, I don't know how to approach this in a generic manner.