§01-02Data Visualization
カレンダーヒートマップ
月カレンダーの日付セルを値の強さで色分けする。
日ごとの活動量や売上を一月単位で俯瞰する。曜日や週の偏りを探すときや、継続の記録を見せたいときに向く。
実装のポイント
月初の曜日ぶん空セルを先頭に入れて grid-cols-7 に流し込む。強度の段階は凡例と数値ラベルを併記し、色覚に依存しない表現にする。
- 特徴
- CSS のみ
§01-02Data Visualization
月カレンダーの日付セルを値の強さで色分けする。
日ごとの活動量や売上を一月単位で俯瞰する。曜日や週の偏りを探すときや、継続の記録を見せたいときに向く。
月初の曜日ぶん空セルを先頭に入れて grid-cols-7 に流し込む。強度の段階は凡例と数値ラベルを併記し、色覚に依存しない表現にする。