Rect Marks

Heatmap of life expectancy by country and year with values inside colored cells
Observed discrete cells with continuous color and centered labels.

Rect marks represent independent two-dimensional cells. They are distinct from bars: rects do not infer aggregation, a zero baseline, stacking, or bar width.

createRectMark({ id?, data?, fill?, opacity?, stroke?, strokeWidth? } = {})

const program = chart()
  .createCanvas({ width: 640, height: 400, margin: 60 })
  .createData({ values: rows })
  .createRectMark()
  .encodeX({ field: "year", fieldType: "ordinal" })
  .encodeY({ field: "country", fieldType: "nominal" })
  .encodeColor({
    field: "life_expect",
    fieldType: "quantitative",
    scale: { type: "sequential", palette: "viridis" }
  });

The first omitted ID is "rect", and data defaults to the current dataset. Two discrete x/y encodings create one full-band cell for each complete observed row. Missing category combinations are not synthesized.

Ranged rects use complete continuous endpoint pairs:

program
  .encodeX({ field: "xStart" })
  .encodeX2({ field: "xEnd", fieldType: "quantitative" })
  .encodeY({ field: "yStart" })
  .encodeY2({ field: "yEnd", fieldType: "quantitative" });

Until one supported topology is complete, semantic intent is retained and the rect collection stays empty. Missing endpoint or color values omit only their row. encodeColor accepts categorical and continuous color scales.

editRectMark({ target?, fill?, opacity?, stroke?, strokeWidth? })

const outlined = program.editRectMark({
  opacity: 0.9,
  stroke: "#f8fafc",
  strokeWidth: 1.5
});

The target is inferred when exactly one rect is eligible. Constant fill cannot be combined with a field-driven color encoding. Use stroke: false to remove the outline; a simultaneous strokeWidth is invalid.

Cell labels and selection

Calling createTextMark() after a complete rect inherits its data and x/y positions. Labels anchor at cell centers, and an omitted text fill resolves to light or dark text for a realized six-digit hex cell color. Other fill syntaxes retain the normal text default, and an explicit text fill always wins. selectMarks, filterMarks, and highlightMarks operate on final observed cells at item grain.

Position encodings · Series and color encodings · Text marks