ダッシュボード利用を想定した都道府県別の指標値の可視化（「カラム地図」）のプロトタイプ

都道府県を 8 x 6 のタイルで表現して、そこに統計値などの指標を可視化していくアイディアをプロトタイプ実装してみました。
<img width="593" alt="デフォルト表示" src="https://qiita-image-store.s3.amazonaws.com/0/102082/ac92e9f8-ba58-1fae-b93d-994c6c355717.png">

# デモ
## 1. デフォルト
https://hfu.github.io/dash-prototype/
この記事の冒頭にある表示がされます。与えられた表示範囲に合わせてフィットする用に作ったつもりなので、iframe に入れて埋め込んでもらう用途を想定したいと思っています。

## 2. カスタマイズ例
JavaScript プログラム上でオプションを与えると、統計値や配色を変更できるように作ってあります。次の内容の HTML で、[九州沖縄地方を色ぬり](https://hfu.github.io/dash-prototype/kyushu.html)することができます。

```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css"/>
<style>
body { margin: 0; top: 0; bottom: 0; width: 100%; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js"></script>
<script src="https://hfu.github.io/dash-prototype/bundle.js"></script>
</head>
<body>
<div id="map"></div>
<script>
map = dash.createMap({
  title: '九州・沖縄地方',
  table: [[40, 41, 42, 43, 44, 45, 46, 47], 1],
  color: function(v) {
    if (v == 1) {
      return ['rgb', 254, 194, 64]
    } else {
      return ['rgb', 207, 207, 207]
    }
  }
})
</script>
</body>
</html>
```
`title` で題名が、`table`で統計情報が設定できます。

`table: [[40, 41, 42, 43, 44, 45, 46, 47], 1]`は、都道府県コード 40, 41, 42, 43, 44, 45, 46, 47 には値 1 を割り当てる、という意味です。

その値それぞれに色を割り当てる関数を `color` でセットします。引数に値をとって、Mapbox GL JS 方式の色表現、つまり `['rgb', r, g, b]`や`['rgba', r, g, b, a]`を返却するようにしてください。

これで、次の可視化ができます。

<img width="593" alt="九州・沖縄地方" src="https://qiita-image-store.s3.amazonaws.com/0/102082/b9530876-d82f-88bd-dcd1-dbf843acfb3d.png">


### タイル配置のカスタマイズ
なお、タイル配置の変更もオプションで渡せば変えられるように作ったつもりです。たぶん、7 x 7 とか 10 x 5 で入れても、適当に調整すると思います。現在のタイル配置の設定は、次のように書きます。

```javascript
  board: [
    [35, 32, 31, 17, 16, 6, 2, 1],
    [34, 33, 28, 18, 21, 15, 5, 3],
    [41, 40, null, 26, 25, 20, 7, 4],
    [42, 43, 44, 27, 29, 10, 9, 8],
    [46, 45, 37, 36, 23, 19, 11, 12],
    [47, 38, 39, 30, 24, 22, 14, 13]
  ],
```

# レポジトリ
レポジトリを次の場所に置いています。
https://github.com/hfu/dash-prototype

# ライセンス
私の仕事分については、パブリックドメイン扱いを目指した Unlicense でお願いします。

# 技術的な背景
- 技術的には、ベクトル系のウェブ地図技術である Mapbox GL JS で実現しています。なので、タイル配列と地理空間情報の間を統計値が自在に流れ込む、といった展開に向かうことも可能です。
- 都道府県を正方形に抽象化して 8 x 6 や 7 x 7、10 x 5 の配列に並べてみよう、というアイディアは、SNS での楽しい議論で鍛えられました。改めて、ありがとうございます。

# 今後の改善について
[Issues で整理](https://github.com/hfu/dash-prototype/issues)できればと思います。ここ Qiita でのコメントとしてご助言いただいてもありがたいです。

# 追記 2019-03-21
URL で発行できるようにしてみました。

例： https://hfu.github.io/dash-prototype/q.html?title=京都・大阪・奈良の3府県の総称としての京阪奈&prefs=26,27,29&color=green

# See also
- [カラム地図](https://hackmd.io/7m2A33zJSWq6DA9lYbvtpQ)
- [このおもちゃは売れる](https://bl.ocks.org/shibamon/raw/e2dee3ac6edcddf1bd0756d64f273e9b)
- [首都圏整備法にいう首都圏（CSS Grid を用いた実装）](https://bl.ocks.org/frogcat/raw/d5c3d2fc7c1174a6fbe2adcfc78645b3/)
- [ジオ展ブース](https://smellman.github.io/geoten-dash/#1.2/0/0)
- [カラム地図6x8で表現するオープンデータ都市率（旧版）](https://fukuno.jig.jp/2432)
- [日本のオープンデータ都市率ダッシュボード - 7x7カラム地図(TabularMaps) x 政府CIOポータル](https://fukuno.jig.jp/2433)
- [77（7x7 カラム地図の Mapbox GL JS 実装）](https://github.com/tabularmaps/77)
- [日本の都道府県を7x7カラム地図として表現！ 測量部担当地域と八地方区分](https://fukuno.jig.jp/2434)