Strange bucket borders when binning interval conflicts with axis interval

[mwaibel-go]

This post is intended to be purely informational feedback on how I recently stubbed my toe.

When specifying an interval for the y axis, “the default scale.transform [is set] to the given interval’s interval.floor function.” ¹ This produces strange results when also binning, and using a binning interval that’s not evenly divisible by the axis’ interval.

See this example:

Plot.plot({
  y: { interval: '6 hours'},
  color: { legend: true,},
  marks: [
    Plot.barY(
      Array.from({length: 48}, (_, i) => (new Date(2026, 7, 1 + Math.floor(i / 24), i%24))),
      Plot.binY({fill: 'count'}, {y: { interval: '8 hours'}})
    )
  ]
})

In order to have each band the same width (as was intended), we have to explicitly disable the transform on the axis:

Plot.plot({
  y: { interval: '6 hours', transform: null},
  color: { legend: true,},
  marks: [
    Plot.barY(
      Array.from({length: 48}, (_, i) => (new Date(2026, 7, 1 + Math.floor(i / 24), i%24))),
      Plot.binY({fill: 'count'}, {y: { interval: '8 hours'}})
    )
  ]
})

Footnotes

1. https://observablehq.com/plot/features/scales#scale-options ↩