# ヘックスマップ / Hexbin Map

- Stable ID: urn:uiux-atlas:pattern:097
- Pattern: 97
- Category: 地図
- Usage: 六角形の区画で密度を比べる
- Accessibility: 集計単位と凡例を明示し、正確な行政境界と区別する
- Responsive: PCは比較、スマホは要約。数値表と凡例を併記。
- HTML: 097.html
- JSON: 097.json
- Interactive demo: ../index.html#pattern/97

## Implementation specification

「ヘックスマップ / Hexbin Map」を実装してください。

目的：六角形の区画で密度を比べる。
想定場面：地図・密度・六角形を扱う画面。

仕様：
- 集計単位と凡例を明示し、正確な行政境界と区別する。
- 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": [
    [
      "2-0",
      14
    ],
    [
      "3-0",
      21
    ],
    [
      "4-0",
      28
    ],
    [
      "5-0",
      35
    ],
    [
      "6-0",
      42
    ],
    [
      "7-0",
      49
    ],
    [
      "8-0",
      56
    ],
    [
      "9-0",
      63
    ],
    [
      "10-0",
      70
    ],
    [
      "2-1",
      27
    ],
    [
      "3-1",
      34
    ],
    [
      "4-1",
      41
    ],
    [
      "5-1",
      48
    ],
    [
      "6-1",
      55
    ],
    [
      "7-1",
      62
    ],
    [
      "8-1",
      69
    ],
    [
      "9-1",
      76
    ],
    [
      "10-1",
      83
    ],
    [
      "2-2",
      40
    ],
    [
      "3-2",
      47
    ],
    [
      "4-2",
      54
    ],
    [
      "5-2",
      61
    ],
    [
      "6-2",
      68
    ],
    [
      "7-2",
      75
    ],
    [
      "8-2",
      82
    ],
    [
      "9-2",
      89
    ],
    [
      "10-2",
      96
    ],
    [
      "0-3",
      39
    ],
    [
      "1-3",
      46
    ],
    [
      "2-3",
      53
    ],
    [
      "3-3",
      60
    ],
    [
      "4-3",
      67
    ],
    [
      "5-3",
      74
    ],
    [
      "6-3",
      81
    ],
    [
      "7-3",
      88
    ],
    [
      "8-3",
      95
    ],
    [
      "9-3",
      2
    ],
    [
      "10-3",
      9
    ],
    [
      "0-4",
      52
    ],
    [
      "1-4",
      59
    ],
    [
      "2-4",
      66
    ],
    [
      "3-4",
      73
    ],
    [
      "4-4",
      80
    ],
    [
      "5-4",
      87
    ],
    [
      "6-4",
      94
    ],
    [
      "7-4",
      1
    ],
    [
      "8-4",
      8
    ],
    [
      "9-4",
      15
    ],
    [
      "10-4",
      22
    ],
    [
      "0-5",
      65
    ],
    [
      "1-5",
      72
    ],
    [
      "2-5",
      79
    ],
    [
      "3-5",
      86
    ],
    [
      "4-5",
      93
    ],
    [
      "5-5",
      0
    ],
    [
      "6-5",
      7
    ],
    [
      "7-5",
      14
    ],
    [
      "8-5",
      21
    ],
    [
      "0-6",
      78
    ],
    [
      "1-6",
      85
    ],
    [
      "2-6",
      92
    ],
    [
      "3-6",
      99
    ],
    [
      "4-6",
      6
    ],
    [
      "5-6",
      13
    ],
    [
      "6-6",
      20
    ],
    [
      "7-6",
      27
    ],
    [
      "8-6",
      34
    ]
  ]
}
```

## Map source

Synthetic values and schematic positions. Japan geometry simplified from Natural Earth; some small islands omitted.
https://www.naturalearthdata.com/about/terms-of-use/
Local geometry: ../assets/japan-map.js