データ可視化・ダッシュボード
カレンダーヒートマップ
GitHub風の週×曜日グリッドを値の濃淡(藍の階調)で塗る。セルにホバー/タップで値ツールチップを表示。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
コード（コピーして使えます）
<div class="ch-wrap">
<div class="ch-header">
<span class="ch-title">アクティビティ</span>
<span class="ch-legend">
<span class="ch-leg-label">少</span>
<span class="ch-leg-cell" style="--lv:0"></span>
<span class="ch-leg-cell" style="--lv:1"></span>
<span class="ch-leg-cell" style="--lv:2"></span>
<span class="ch-leg-cell" style="--lv:3"></span>
<span class="ch-leg-cell" style="--lv:4"></span>
<span class="ch-leg-label">多</span>
</span>
</div>
<div class="ch-body">
<div class="ch-day-labels">
<span>月</span><span></span><span>水</span><span></span><span>金</span><span></span><span>日</span>
</div>
<div class="ch-grid" id="chGrid" role="grid" aria-label="カレンダーヒートマップ"></div>
</div>
<div class="ch-tip" id="chTip" role="tooltip" aria-hidden="true"></div>
</div>