本文へ移動

§01-02Data Visualization

カレンダーヒートマップ

月カレンダーの日付セルを値の強さで色分けする。

日ごとの活動量や売上を一月単位で俯瞰する。曜日や週の偏りを探すときや、継続の記録を見せたいときに向く。

実装のポイント

月初の曜日ぶん空セルを先頭に入れて grid-cols-7 に流し込む。強度の段階は凡例と数値ラベルを併記し、色覚に依存しない表現にする。

特徴
  • CSS のみ