06 · Density Heat Grid.

Two categorical axes plus one quantitative measure. Day-of-week × week (appointment density), hour × day (web traffic), agent × week (case volume). The density pattern jumps out faster than any tabular layout.

Each cell scales 0.6 → 1 with opacity 0 → 1. Per-cell delay is (row + col) * 28ms — that produces a diagonal wave from top-left to bottom-right. The wave makes a 7×12 grid (84 cells) read as a coherent reveal rather than a chaotic flicker.

appointmentDensity: {
  dayLabels: ['M','T','W','T','F','S','S'],
  weekLabelStart: 'W01',
  weekLabelEnd:   'W12',
  matrix: [
    [55,60,58, ...], // Mon
    [95,100,92, ...], // Tue
    // 7 rows × 12 cols, raw counts
  ],
}

const max = Math.max(...matrix.flat());
for (let r = 0; r < rows; r++) {
  for (let c = 0; c < cols; c++) {
    const w = matrix[r][c] / max;
    cell.style.setProperty('--cell-bg',
      `color-mix(in srgb, var(--primary) ${w*100}%, #e6f0fa)`);
    cell.style.setProperty('--delay',
      ((r + c) * 0.028) + 's');
  }
}