How to set numeric tick interval?

[vwkd]

Description

According to the types, tick can be a RangeInterval which can be a number defining the tick interval.

a number (for number intervals), defining intervals at integer multiples of n

However, this conflicts with another type of tick which can be a number defining the tick amount.

From testing, it seems setting tick to a number is always interpreted as tick amount.

How can I set a numeric tick interval?

Steps To Reproduce

const data = [
  {x: 0, y: 0},
  {x: 1, y: 1},
  {x: 2, y: 2},
  {x: 3, y: 3},
  {x: 4, y: 4},
  {x: 5, y: 5},
]

Plot.plot({
  x: {
    ticks: 1
  },
  marks: [
    Plot.line(data, { x: "x", y: "y" })
  ]
})

Expected Result

Tick interval of 1, i.e. tick amount of 5.

Actual Result

Tick amount of 1, i.e. tick interval of 5.

[mbostock]

You’d need a utility like this:

function numberInterval(interval) {
  if (0 < interval && interval < 1 && Number.isInteger(1 / interval)) interval = -1 / interval;
  const n = Math.abs(interval);
  return interval < 0
    ? {
        floor: (d) => Math.floor(d * n) / n,
        offset: (d) => (d * n + 1) / n, // note: no optional step for simplicity
        range: (lo, hi) => d3.range(Math.ceil(lo * n), hi * n).map((x) => x / n)
      }
    : {
        floor: (d) => Math.floor(d / n) * n,
        offset: (d) => d + n, // note: no optional step for simplicity
        range: (lo, hi) => d3.range(Math.ceil(lo / n), hi / n).map((x) => x * n)
      };
}

Then you could say:

Plot.line(data).plot({x: {ticks: numberInterval(1)}})

where data = d3.range(10).map((i) => [i, i ** 2]).

Or, for an interval of 0.5:

Plot.line(data).plot({x: {ticks: numberInterval(-2), tickFormat: String}})

As the last example shows, Plot doesn’t do a good job of specifying a default format if you specify a custom interval, so we’d probably want to fall back to number.toLocaleString.

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