Raster mark does not show all data?

[yurivish]

Example: https://observablehq.com/d/d59ce435fbaa1439

[mbostock]

You need to do a couple things differently:

• You need to offset the raster sample positions by 0.5 so that they are sampled from the middle of the pixel (grid cell) rather than the corner
• You need to set the domains of the x and y scales (because the domains are otherwise inferred from the sample positions, but you want to expand the domains so that they cover the full pixel)

Here is a fixed version adapted from the documentation:

Plot.plot({
  color: { legend: true },
  x: { domain: [0, w] },
  y: { domain: [0, h] },
  marks: [
    Plot.raster(
      { length: w * h },
      {
        width: w,
        height: h,
        x: (_, i) => (i % w) + 0.5,
        y: (_, i) => Math.floor(i / w) + 0.5,
        fill: (_, i) => data[i],
        imageRendering: "pixelated",
        interpolate: "none",
        tip: true
      }
    )
  ]
})

[mbostock]

And actually, if you simply omit the x and y channels, you can take advantage of the raster mark defaults to get the same behavior. (You can also specify the x1, x2, y1, and y2 options to define the domain of the raster mark without needing to set the scale domains explicitly.)

Plot.plot({
  color: { legend: true },
  marks: [
    Plot.raster(
      { length: w * h },
      {
        width: w,
        height: h,
        fill: data, // fill: (_, i) => data[i] // would also work
        imageRendering: "pixelated",
        interpolate: "none",
        tip: true
      }
    )
  ]
})

This is also the same:

Plot.plot({
  color: { legend: true },
  marks: [
    Plot.raster(
      data,
      {
        width: w,
        height: h,
        imageRendering: "pixelated",
        interpolate: "none",
        tip: true
      }
    )
  ]
})

[yurivish]

Aah – this one was puzzling me for a while. Thank you! I had read the docs but must have not made the right conclusion with respect to offsetting by half a pixel. Thank you very much for the fixed example and explanation.

Our real case has a bit of a twist since the x axis is a time axis (we use the x transform to go from the x value in the mark to the value used by the scale) and I'll post an update here for any future visitors once I figure out the nice way to handle that.

Edit: Just saw your most recent message, will think about how/if that would apply in our more complex case... The data isn't an array in the non-reduced version and the x/y/fill look like this:

            x: (_: unknown, i: number) => i % w,
            y: (_: unknown, i: number) => y(i % w, Math.floor(i / w)),
            fill: (_: unknown, i: number) => fill(i % w, Math.floor(i / w)),

where y and fill are functions that are passed into this component from the outside -- each row in the raster plot comes from a separate column in a data frame.

Edit 2: I updated the notebook with an example of how I adapted this approach to a time axis.