The avatar for @observablehq
Observable
The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Unlisted
Edited
Apr 23
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Added in base
**Fixed** (Thank you [Mike Bostock](https://github.com/observablehq/plot/discussions/2318)!):
Insert cell
Changed in target
Plot.plot({
  color: { legend: true },

-
  x: { domain: [0, w] },
  y: { domain: [0, h] },

  marks: [
    Plot.raster(

-
      { length: w * h },

+
      data,

      {
        width: w,
        height: h,

-
        x: (_, i) => (i % w) + 0.5,
        y: (_, i) => Math.floor(i / w) + 0.5,
        fill: (_, i) => data[i],

+
        fill: Plot.identity,

        imageRendering: "pixelated",
        interpolate: "none",
        tip: true
      }
    )
  ]
})
Insert cell
Added in base
And here's how to do it with a time axis:
Insert cell
Added in base
xScale = d3.scaleLinear([0, w], [new Date(`January ${1}, 2025`), new Date(`January ${w}, 2025`)])
Insert cell
Added in base
transform = (d) => new Date(xScale(d))
Insert cell
Added in base
Plot.plot({
  color: { legend: true },
  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
      }
    )
  ],
  x: { domain: [0, w].map(transform), transform }
})
Insert cell
Added in base
**Original**:
Insert cell
Added in base
Plot.raster(
  { length: w * h },
  {
    width: w,
    height: h,
    x: (_, i) => i % w,
    y: (_, i) => Math.floor(i / w),
    fill: (_, i) => data[i],
    imageRendering: "pixelated",
    interpolate: "none",
    tip: true
  }
).plot({ color: { legend: true } })
Insert cell