§01-01Data Visualization

草チャート / contribution heatmap

日付ごとの活動量を方眼の色の濃さで示す。

一年分の活動の継続や偏りを一目で見渡せる。学習記録や投稿頻度など、日々の積み重ねを可視化して習慣づけを促したいときに使う。

実装のポイント

grid-flow-col と grid-rows-7 で週を列、曜日を行に並べると配置計算が要らない。色だけに頼らず各セルの title や aria-label に日付と件数を持たせる。