Sheet 02.20 / Components · Data

Heatmap

A year of activity as lattice diamonds, with tabs for GitHub and Claude tokens. Cells are 9px squares turned 45° so the year reads as pineapple skin; the single best day is the one pineapple cell.

CLASSb-heatDRAWNCLAUDECHECKEDBOLUOLICENSEMIT

Fig. 1 — heatmaplive, from bundle.css

home / building

6,918 contributions in the last yearLess More

Anatomy

Parts

Part	Class	Notes
Tabs	`.b-tabs`	Text tabs; the selected one has an ink underline.
Grid	`.b-heat`	Seven rows, one column per week; levels h1 to h4, the best day .peak.
Foot	`.b-heat-foot + .b-heat-legend`	The total on the left, Less to More on the right.

Markup

Code

bundle.css

<div style="max-width:640px">
  <div class="b-tabs" role="tablist"><button role="tab" aria-selected="true">GitHub</button><button role="tab" aria-selected="false">Tokens</button></div>
  <div class="b-heat" style="margin:16px 0 12px">
    <!-- one <i> per day, oldest first, seven per week -->
    <i></i><i class="h1"></i><i class="h2"></i><i class="h3"></i><i class="h4"></i>…
    <i class="peak" title="Best day"></i>
  </div>
  <div class="b-heat-foot"><span>6,918 contributions in the last year</span><span class="b-heat-legend">Less <i style="background:var(--heat-0)"></i><i style="background:var(--heat-1)"></i><i style="background:var(--heat-2)"></i><i style="background:var(--heat-3)"></i><i style="background:var(--heat-4)"></i> More</span></div>
</div>

Start scrolled to the latest week on phones.
Mark exactly one best day.

Don't

Use pineapple for a level.
Turn the diamonds back into squares.