Heatmap

data-heatmap since 0.1.0

An <ol data-heatmap> is a grid of days: seven rows, one column a week, filling column by column. data-level="0..4" sets how dark a day is and data-tip says what it means.

Four weeks

html

<ol data-heatmap aria-label="Commits each day over the last four weeks" style="max-width:7rem">
  <li data-level="0" data-tip="No commits, 7 September"></li><li data-level="2" data-tip="5 commits, 8 September"></li><li data-level="4" data-tip="16 commits, 9 September"></li><li data-level="3" data-tip="11 commits, 10 September"></li><li data-level="1" data-tip="2 commits, 11 September"></li><li data-level="0" data-tip="No commits, 12 September"></li><li data-level="1" data-tip="1 commit, 13 September"></li>
  <li data-level="2" data-tip="4 commits, 14 September"></li><li data-level="3" data-tip="9 commits, 15 September"></li><li data-level="4" data-tip="15 commits, 16 September"></li><li data-level="2" data-tip="6 commits, 17 September"></li><li data-level="1" data-tip="3 commits, 18 September"></li><li data-level="0" data-tip="No commits, 19 September"></li><li data-level="0" data-tip="No commits, 20 September"></li>
  <li data-level="3" data-tip="8 commits, 21 September"></li><li data-level="4" data-tip="13 commits, 22 September"></li><li data-level="2" data-tip="5 commits, 23 September"></li><li data-level="3" data-tip="12 commits, 24 September"></li><li data-level="1" data-tip="2 commits, 25 September"></li><li data-level="0" data-tip="No commits, 26 September"></li><li data-level="1" data-tip="3 commits, 27 September"></li>
  <li data-level="3" data-tip="11 commits, 28 September"></li><li data-level="3" data-tip="11 commits, 29 September"></li><li data-level="2" data-tip="7 commits, 30 September"></li><li data-level="4" data-tip="14 commits, 1 October"></li><li data-level="2" data-tip="4 commits, 2 October"></li><li data-level="0" data-tip="No commits, 3 October"></li><li data-level="0" data-tip="No commits, 4 October"></li>
</ol>

Cells stretch to fill the list, so four weeks need a width; a full year is the same markup with 364 cells and fills its panel on its own.

Notes

The cells are empty, so s72.js copies each data-tip into aria-label where there is none.
Levels 1 to 4 mix the go tone with the page at 25, 50, 75 and 100 per cent; level 0 is --s72-line.
Cells stretch to fill a wide panel and stop shrinking at 10px, so a phone scrolls the list inside itself and the page never moves sideways.
Nothing animates: a year of cells fading in would be decoration.