Cell Mark

Cell Mark

The cell mark creates rectangles positioned by two ordinal dimensions, used for heatmaps with categorical axes.

Constructor

Plot.cell(data, options)   // Standard cell
Plot.cellX(data, options)  // 1D, x defaults to index
Plot.cellY(data, options)  // 1D, y defaults to index

Channels

Examples

Basic Heatmap

Plot.cell(data, {
  x: "day",
  y: "hour",
  fill: "value"
}).plot({color: {scheme: "YlGnBu"}})

With Group Transform

Plot.cell(data, Plot.group({fill: "count"}, {
  x: "category1",
  y: "category2"
})).plot()

Calendar Heatmap

Plot.cell(data, {
  x: d => d.date.getUTCDay(),        // Day of week
  y: d => d3.utcWeek.count(d3.utcYear(d.date), d.date),  // Week
  fill: "value"
}).plot({
  color: {scheme: "Greens"}
})

1D "Barcode" Visualization

Plot.cellX(values, {fill: Plot.identity}).plot({
  color: {scheme: "RdBu"}
})

Matrix Visualization

Plot.cell(matrix.flatMap((row, i) =>
  row.map((value, j) => ({i, j, value}))
), {
  x: "j",
  y: "i",
  fill: "value"
}).plot()

With Labels

Plot.plot({
  marks: [
    Plot.cell(data, {x: "x", y: "y", fill: "value"}),
    Plot.text(data, {x: "x", y: "y", text: "value"})
  ]
})

Options

Notes

• Both x and y scales are band scales (ordinal)
• For quantitative dimensions, use rect mark instead
• Commonly paired with the group transform for aggregation
• If x is omitted, cells span the full width
• If y is omitted, cells span the full height