# カレンダーヒートマップ / Calendar Heatmap

- Stable ID: urn:uiux-atlas:pattern:099
- Pattern: 99
- Category: データ表現
- Usage: 日ごとの活動量をカレンダーで見る
- Accessibility: 日付・値・凡例を用意し、週の開始曜日を示す
- Responsive: PCは比較、スマホは要約。数値表と凡例を併記。
- HTML: 099.html
- JSON: 099.json
- Interactive demo: ../index.html#pattern/99

## Implementation specification

「カレンダーヒートマップ / Calendar Heatmap」を実装してください。

目的：日ごとの活動量をカレンダーで見る。
想定場面：カレンダー・日別・活動・ヒートマップを扱う画面。

仕様：
- 日付・値・凡例を用意し、週の開始曜日を示す。
- PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。
- Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。
- 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。
- 余白は8px単位、カード角丸12px、控えめな影に統一する。
- semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。
- キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。
- prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。

受け入れ条件：
- 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。
- 日付・値・凡例を用意し、週の開始曜日を示すことを操作で確認する。
- 読み込み・空・成功・エラーの該当状態を用意する。
- 見た目だけのボタンを残さず、操作を実装する。
- 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。

## Synthetic sample data

```json
{
  "columns": [
    "日",
    "活動（件）"
  ],
  "rows": [
    [
      1,
      0
    ],
    [
      2,
      2
    ],
    [
      3,
      4
    ],
    [
      4,
      1
    ],
    [
      5,
      3
    ],
    [
      6,
      0
    ],
    [
      7,
      2
    ],
    [
      8,
      2
    ],
    [
      9,
      4
    ],
    [
      10,
      1
    ],
    [
      11,
      3
    ],
    [
      12,
      0
    ],
    [
      13,
      2
    ],
    [
      14,
      4
    ],
    [
      15,
      4
    ],
    [
      16,
      1
    ],
    [
      17,
      3
    ],
    [
      18,
      0
    ],
    [
      19,
      2
    ],
    [
      20,
      4
    ],
    [
      21,
      1
    ],
    [
      22,
      1
    ],
    [
      23,
      3
    ],
    [
      24,
      0
    ],
    [
      25,
      2
    ],
    [
      26,
      4
    ],
    [
      27,
      1
    ],
    [
      28,
      3
    ],
    [
      29,
      3
    ],
    [
      30,
      0
    ],
    [
      31,
      2
    ],
    [
      32,
      4
    ],
    [
      33,
      1
    ],
    [
      34,
      3
    ],
    [
      35,
      0
    ],
    [
      36,
      0
    ],
    [
      37,
      2
    ],
    [
      38,
      4
    ],
    [
      39,
      1
    ],
    [
      40,
      3
    ],
    [
      41,
      0
    ],
    [
      42,
      2
    ],
    [
      43,
      2
    ],
    [
      44,
      4
    ],
    [
      45,
      1
    ],
    [
      46,
      3
    ],
    [
      47,
      0
    ],
    [
      48,
      2
    ],
    [
      49,
      4
    ],
    [
      50,
      4
    ],
    [
      51,
      1
    ],
    [
      52,
      3
    ],
    [
      53,
      0
    ],
    [
      54,
      2
    ],
    [
      55,
      4
    ],
    [
      56,
      1
    ],
    [
      57,
      1
    ],
    [
      58,
      3
    ],
    [
      59,
      0
    ],
    [
      60,
      2
    ],
    [
      61,
      4
    ],
    [
      62,
      1
    ],
    [
      63,
      3
    ],
    [
      64,
      3
    ],
    [
      65,
      0
    ],
    [
      66,
      2
    ],
    [
      67,
      4
    ],
    [
      68,
      1
    ],
    [
      69,
      3
    ],
    [
      70,
      0
    ],
    [
      71,
      0
    ],
    [
      72,
      2
    ],
    [
      73,
      4
    ],
    [
      74,
      1
    ],
    [
      75,
      3
    ],
    [
      76,
      0
    ],
    [
      77,
      2
    ],
    [
      78,
      2
    ],
    [
      79,
      4
    ],
    [
      80,
      1
    ],
    [
      81,
      3
    ],
    [
      82,
      0
    ],
    [
      83,
      2
    ],
    [
      84,
      4
    ],
    [
      85,
      4
    ],
    [
      86,
      1
    ],
    [
      87,
      3
    ],
    [
      88,
      0
    ],
    [
      89,
      2
    ],
    [
      90,
      4
    ],
    [
      91,
      1
    ],
    [
      92,
      1
    ],
    [
      93,
      3
    ],
    [
      94,
      0
    ],
    [
      95,
      2
    ],
    [
      96,
      4
    ],
    [
      97,
      1
    ],
    [
      98,
      3
    ],
    [
      99,
      3
    ],
    [
      100,
      0
    ],
    [
      101,
      2
    ],
    [
      102,
      4
    ],
    [
      103,
      1
    ],
    [
      104,
      3
    ],
    [
      105,
      0
    ],
    [
      106,
      0
    ],
    [
      107,
      2
    ],
    [
      108,
      4
    ],
    [
      109,
      1
    ],
    [
      110,
      3
    ],
    [
      111,
      0
    ],
    [
      112,
      2
    ]
  ]
}
```