Unlisted
Edited
Apr 25
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
}
)
]
})
xScale = d3.scaleLinear([0, w], [new Date(`January ${1}, 2025`), new Date(`January ${w}, 2025`)])
transform = (d) => new Date(xScale(d))
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 }
})
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 } })
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
