What's the best way to use Plot.rectY with pre-binned data?

[skybrian]

I'm doing binning outside Observable Plot, resulting in an array of values, one for each bin. If I plot it using Plot.barY, it looks right except that the X-axis ticks are wrong.

If I switch to Plot.rectY (which seems more correct), then the plot disappears. I can set x1 and x2 manually to the start and end of each bin, but when rendered, the gaps between rects don't look as nice as when using Plot.binX, and the X-axis ticks still aren't right.

Is there an easy way to get Plot.rectY to render rects as nicely as it does when using Plot.binX?

[mbostock]

Can you share a notebook demonstrating the problem?

As far as the gaps between rects, you can achieve that by setting insetLeft and insetRight to 0.5.

[skybrian]

Here's the notebook: https://observablehq.com/@skybrian/plot-with-external-binning

Setting the x label, domain, ticks, and insets (thanks) works for me. I was just wondering if there's a shortcut?

[Fil]

you can use {x: "theta", interval: 15, …}

[mbostock]

D3 doesn’t consider 15 a “nice” interval, so the simplest variation will give you ticks at 20:

Plot.plot({
  marks: [
    Plot.rectY(bins, {x: "theta", interval: 15, y: "count"})
  ]
})

If you want ticks every 15, like you were already doing, you could render a tick for each bin threshold, including the upper bound of the highest bin. If you want to avoid hard-coding the 180, you could assume the bins are in ascending order and say:

Plot.plot({
  x: {
    ticks: bins.map(d => d.theta).concat(bins[bins.length - 1].theta + 15),
  },
  marks: [
    Plot.rectY(bins, {x: "theta", interval: 15, y: "count"})
  ]
})

Or you could use d3.range combined with the extent, again increasing the upper bound since it’s exclusive:

Plot.plot({
  x: {
    ticks: d3.range(d3.min(bins, d => d.theta), d3.max(bins, d => d.theta) + 30, 15),
  },
  marks: [
    Plot.rectY(bins, {x: "theta", interval: 15, y: "count"})
  ]
})

The “natural” representation for a bin in Plot specifies both the lower (inclusive) and upper (exclusive) bound so that bins (rects) can have varying width. So another way to write this would be to change the data to represent that more explicitly:

bins = [
  { theta1: 0, theta2: 15, count: 10 },
  { theta1: 15, theta2: 30, count: 7 },
  { theta1: 30, theta2: 45, count: 6 },
  { theta1: 45, theta2: 60, count: 4 },
  { theta1: 60, theta2: 75, count: 6 },
  { theta1: 75, theta2: 90, count: 5 },
  { theta1: 90, theta2: 105, count: 10 },
  { theta1: 105, theta2: 120, count: 7 },
  { theta1: 120, theta2: 135, count: 6 },
  { theta1: 135, theta2: 150, count: 4 },
  { theta1: 150, theta2: 165, count: 6 },
  { theta1: 165, theta2: 180, count: 5 }
]

Then you could render the plot like so:

Plot.plot({
  marks: [
    Plot.rectY(bins, {x1: "theta1", x2: "theta2", y: "count", insetLeft: 0.5, insetRight: 0.5})
  ]
})

Of course, probably simpler to use interval: 15 since then you get the insets set automatically.