[Javascript] 日本地図を市町村単位まで色付け（ヒートマップ化）したい人へ

9163 ワード

AmCharts JavaScript 日本地図 JavaScript テキストリンク

はじめに

日本地図をWEBで以下の要件を満たしつつ，ヒートマップ的な色付けをしたいなぁ...と思うことはありませんか？

いい感じのレスポンシブ・モバイル対応
都道府県だけじゃなくて市町村単位まで色づけしたい
ライセンスが緩くて商用利用もしたい

都道府県単位での色付けは比較的多くのライブラリがありますが，市町村単位で扱えるものは見つかりませんでした．

そこで，Amchart4のMap機能を活用して市町村単位まで色付けできる日本地図を作成しました．

デモ

Code

できること

詳細はレポジトリのReadmeを参照してください．

静的なJSONファイルを読み込んでヒートマップ化
任意のエンドポイントから動的にデータを読み込んでヒートマップ化

データ形式

以下の例のように"id"に都道府県もしくは市町村名を，"value"に数値を入力したJSON形式を読み込ませて可視化することができます．

与える"id"の形式一覧はこちらで確認できます．

また，実際に読み込ませるデータ例はこちらから確認できます．

例: 日本全体データの場合

EX:japan_data.json

[
    {
        "id": "北海道",
        "value": 88
    },
        {
        "id": "青森県",
        "value": 12
    },
]

使い方

詳細はレポジトリのReadmeを参照してください．

開発用

git clone https://github.com/older4/ammap-testing.git
npm install
npm run serve

上記で以下のモックアップデータを読み込んだデモページが起動します．

アドレス: http://localhost:8080
対象データ: ./src/assets/mockup_data/
環境変数: .env/dev.js

任意ページへの埋め込み（本番）

はじめに./.env/prd.jsに適切な環境変数を設定します．

EX: .env/prd.js

export default {
    MODE: "dynamic_param",
    API_ENDPOINT: "http://example.com/api/",
    MAP_DATA: "http://example.com/data/mapdata/"
}

次に以下のように任意の対象ページにid="chartdiv"のdiv要素を，またdynamic_paramモードで使うIDを設定します．

EX: target.html

<!DOCTYPE html>
<html>
<body>
    <!-- #################### insert start ################## -->
    <div id="chartdiv" data-paramid="XXXXXXX">
    <script src="http://example.com/heatmap/index.js"></script>
    <!-- #################### insert end ################## -->
</body>
</html>

依存/ライセンス等

地図機能: Amchart4

概要: グラフ全般に関する機能を提供，地図機能に関して今回利用
ライセンス: ロゴが入るが無料でほぼ無制限(商用利用を含む)の利用が可能

ネイティブにレスポンシブやモバイル対応しており，各種便利なメソッド等が用意されておりさまざまな応用が可能です．

地図データ: Geoshapeリポジトリ

概要: 日本各地の地図データをTopoJson形式で提供
ライセンス: CC BY 4.0

本コード: older4/ammap-japan-choropleth

概要: 上記のライブラリ等を活用して日本全国を市町村単位で色付けするJSコード
ライセンス: GPL-3.0

その他

日本地図を可視化するライブラリまとめ

実装にあたって他のライブラリも調査したのでこちらにまとめておきます．

Japan Map ( jQuery plugin )

概要: jQuery pluginで日本地図を扱うことができる．
レスポンシブ: △(ネイティブ対応ではない)
最小単位: 都道府県
ライセンス: MIT

Jmap jQuery plugin

概要: jQuery pluginでシンプルモダンデザインの日本地図を扱うことができる．
レスポンシブ: ○
最小単位: 都道府県
ライセンス: MIT

Google GeoChart

概要: Google Chartsの機能の一つとして提供されている．
レスポンシブ: △(別途対応が必要)
最小単位: 都道府県
ライセンス: FREE

Special Thanks to Anamorphosis Networks Co., Ltd.

Anamorphosis Networks社では，「誰もが使えるAI」をモットーにOpenPoC事業を展開しています。お客様からのヒアリングを元に大学との共同研究等を通じて新技術の開発をおこなう京都発ベンチャーです．

今回のコード作成やライブラリの調査といったことはAnamorphosis Networks社のインターンの中で行いました．そして，これらの公開を許可いただきました！！感謝の極みです！！

Author And Source

この問題について([Javascript] 日本地図を市町村単位まで色付け（ヒートマップ化）したい人へ), 我々は、より多くの情報をここで見つけました https://qiita.com/YasaiDev/items/61836d9fc58c4bba8e71

著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。

Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .

css増加変数