e-StatのshapefileからSVG画像を作成しDomoのカスタムチャート作成

会員数であったり、売上であったり、何かしらの指標を地図上に濃淡で表現したい事があります。地図で見る統計（統計GIS）からは境界データ（shapefile）が無料で入手できるのですが、その境界データをもとに、Kartograph.pyを使ってSVG画像に変換し、なにかしらの指標をDomoを使って地図上に可視化するということをやってみたのでまとめました。

# 今回の流れ
1.e-Statからshapefileを入手
2.Kartograph.pyを使ってshapefileからSVG画像を生成
3.Domoのカスタムチャートとして登録
という流れです。

# 今回の動作環境
CentOS7
Python 2.7.5

# 元となるe-Statのshapefileをダウンロード
地図で見る統計(統計GIS)
https://www.e-stat.go.jp/gis

境界データダウンロード＞小地域＞国勢調査＞2015年＞小地域＞世界測地系平面直角座標系・Shape形式 ＞岡山県＞岡山県全域と進んでいき、今回は岡山県全域のshapefileをダウンロードしました。

A002005212015XYSWC33.zipというファイル名でダウンロードされます。
適当な場所にzipを解凍します。

# shpファイルをQGISでKartograph.pyが処理しやすい形に変更
文字コードの変更と、CRSの形式を変更します。
・Shift_JIS形式からUTF-8に変更
・CRSの形式をWGS84に変更

## QGISで今回扱うshpファイルを開きます。
QGISは今回、Ver.3.0.3 Gironaを利用しました。

データソースエンコーディング:Shift_JISで設定
![image.png](https://qiita-image-store.s3.amazonaws.com/0/99611/8085ea6e-3a68-b248-f001-b6d0bc35c11e.png)
※Shift_JISを指定しなければ、属性データが文字化けします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/99611/05773cf4-57ae-70c1-4f4f-997694fe1395.png)

次に、shapefileをWGS形式で保存し直します。

下記の設定で保存。
形式：ESRI Shapefile
**CRS：EPSG:4326 - WGS 84**

e-StatのshapefileはJGD2000形式のため、Kartograpy.pyで扱えません。
WGS 84形式にする必要があります。これが結構大事です。

**エンコーディング:UTF-8**
後でKartograph.pyを使うときにShift_JISだと文字化けします。

エクスポート項目:
**KEY_CODE**
※領域一つ一つに対応する項目。今後MAPで可視化したいデータを紐づけるKEYになります。必須です。
その他、世帯数とか、地名など必要な項目にチェックを入れて保存します。

今回はzipファイルを展開したA002005212015XYSWC33フォルダに保存しています。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/99611/23c15bd8-a3fc-1db3-b6a0-2b22fcdb429e.png)


保存した後のフォルダの内容は下の通りです。
A002005212015XYSWC33
┗h27ka33.dbf
┗h27ka33.prj
┗h27ka33.shp
┗h27ka33.shx
┗h27ka33_WGS.cpg
┗h27ka33_WGS.dbf
┗h27ka33_WGS.prj
┗h27ka33_WGS.qpj
┗h27ka33_WGS.shp
┗h27ka33_WGS.shx
┗h27ka33_WGS.svg

# SVG画像の作成
## kartograpy.pyのインストール
インストール方法は[こちら](https://kartograph.org/docs/kartograph.py/)を参考に。

kartograpy.pyは、SVGに変換する際のパラメータ等をconfig.jsonに指定して動作します。
元となるshapefileのファイル指定もこのjsonの中で行います。

config.jsonの作成は[こちら](https://www.smashingmagazine.com/2015/09/making-svg-maps-from-natural-earth-data/)を参考に行ってください。本家の解説も[こちら](https://kartograph.org/docs/kartograph.py/)に載せておきます。

最終的に作成したconfig.jsonは下記の通りです。

```json:config.json
{
  "layers": {
    "h27ka33_WGS": {
      "src": "h27ka33_WGS.shp",
      "attributes": {
        "id": "MOJI",
        "name": "KEY_CODE"
      },
      "simplify": "1"
    }
  },
  "proj": {
    "id": "mercator"
  }
}
```

レイヤプロパティで設定したレイヤ（今回h27ka33_WGS）を"layers"の一つの要素として指定しています。
srcはSVG画像の元となるshapefileを指定。
attributesでXMLファイルのid属性、name属性にあたるshapefileの項目を指定します。
shapefileをQGISで開いたときに属性データの項目から確認できます。
レイヤ名のh27ka33_WGSはQGISからレイヤプロパティで修正できます。
（追記：2018/10/15　Domo上ではnameをDataSetと紐づけるため、nameにKEY_CODEを指定するように修正。）


## いよいよkartograph.pyにてSVGを出力！
最終的なディレクトリ構成は下の通りです。CentOSの適当なディレクトリにフォルダごと配置してください。
A002005212015XYSWC33
┗config.json
┗h27ka33.dbf
┗h27ka33.prj
┗h27ka33.shp
┗h27ka33.shx
┗h27ka33_WGS.cpg
┗h27ka33_WGS.dbf
┗h27ka33_WGS.prj
┗h27ka33_WGS.qpj
┗h27ka33_WGS.shp
┗h27ka33_WGS.shx
┗h27ka33_WGS.svg

CentOSで対象のshapefileがあるフォルダに移動し、フォルダ内で下記のコマンドを実行。

kartograph config.json -o h27ka33_WGS.svg

しばらくすると、変換が終わります。
岡山県全域だと36秒ほどかかりました。

```
>kartograph config.json -o h27ka33_WGS.svg
warning: could not encode to unicode
execution time: 36.291 secs
```
※文字コードの変換でエラーになりますが、今回SVG画像は正常に出力されました。

# 出来上がったSVG画像をDomoのカスタムチャートとして登録
管理者メニュー＞カンパニー設定＞カスタムチャート
"カスタムSVGファイルをアップロードして独自のチャートを作成"
より、"チャートを追加"のボタンからアップロード
![OkayamaPref.jpg](https://qiita-image-store.s3.amazonaws.com/0/99611/d054a975-ff97-0618-9f44-9c77edcaaab1.jpeg)

今回作成したSVG画像はe-Statの境界データの領域に1対1に紐づくKEY_CODEをキーに、何かある値を結び付けて、その値を可視化することが出来ます。

例えば・・・
下のようにKEY_CODEと会員数というCSVデータを用意すれば、地域別の会員数を出したりすることが出来るようになります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/99611/4e8f2f2b-53c1-3bc4-f7bd-5af9f4728b10.png)


以上！