# Cell Mark

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

- Skill: `tools-only/cell-mark` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add tools-only/cell-mark`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tools-only/cell-mark/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tools-only (https://skillmd.com/u/tools-only)
- Updated: 2026-09-29
- Page: https://skillmd.com/skills/tools-only/cell-mark

---

# Cell Mark

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

## Constructor

```javascript
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

| Channel | Description |
|---------|-------------|
| `x` | Horizontal position (band scale) |
| `y` | Vertical position (band scale) |
| `fill` | Fill color |
| `stroke` | Stroke color |

## Examples

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

### With Group Transform
```javascript
Plot.cell(data, Plot.group({fill: "count"}, {
  x: "category1",
  y: "category2"
})).plot()
```

### Calendar Heatmap
```javascript
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
```javascript
Plot.cellX(values, {fill: Plot.identity}).plot({
  color: {scheme: "RdBu"}
})
```

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

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

## Options

| Option | Default | Description |
|--------|---------|-------------|
| `fill` | currentColor | Fill color |
| `stroke` | none | Stroke color |
| `inset` | 0.5 | Spacing between cells |
| `rx`, `ry` | 0 | Corner radius |

## 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