A read-only, CSS-only color-intensity grid — here, “when am I usually free” over the last four weeks (darker = more free). It pairs naturally above the selectable slot grid: same day-column model, but this one is an overview, not a control. No JavaScript.
| Week | Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|---|
| Apr 28 | 60% | 30% | 80% | 40% | 20% | 90% | 100% |
| May 5 | 50% | 70% | 30% | 60% | 10% | 80% | 90% |
| May 12 | 40% | 20% | 50% | 30% | 0% | 70% | 100% |
| May 19 | 70% | 60% | 40% | 80% | 30% | 100% | 90% |
<!-- --casca-heatmap-cols sets the grid width; each cell's --value (0..1)
drives its colour intensity. colheads are optional. -->
<div class="casca-heatmap" aria-hidden="true" style="--casca-heatmap-cols: 7">
<span class="casca-heatmap-colhead">Mon</span> <!-- ...one per column... -->
<div class="casca-heatmap-cell" style="--value: 0.6" title="Mon — 60%"></div>
<div class="casca-heatmap-cell" style="--value: 0.3" title="Tue — 30%"></div>
<!-- ...one .casca-heatmap-cell per data point... -->
</div>
The same primitive as a symmetric variable×variable grid: cell intensity
is the correlation strength (0–1), the diagonal is 1.0. Set
--casca-heatmap-cols to N+1 so the first column holds
the row labels.
| Price | Rating | Reviews | Sales | Returns | |
|---|---|---|---|---|---|
| Price | 1.0 | 0.2 | 0.1 | 0.7 | 0.3 |
| Rating | 0.2 | 1.0 | 0.8 | 0.6 | 0.5 |
| Reviews | 0.1 | 0.8 | 1.0 | 0.5 | 0.2 |
| Sales | 0.7 | 0.6 | 0.5 | 1.0 | 0.4 |
| Returns | 0.3 | 0.5 | 0.2 | 0.4 | 1.0 |