Staff Blog

2017.10.21

Google Charts を利用して日本地図を色塗りしてみる

みなさん、こんにちは。

今回は、Google Charts の GeoChart を利用して、日本地図を都道府県単位で色塗りしてみたいと思います。

Google Charts とは、Google が提供するグラフを描画するツールです。非常にたくさんのグラフを作成できるのですが、その中に地図に関するグラフがあります。

詳細は、下記のページをご覧ください。

https://developers.google.com/chart/

では早速コードを書いていきましょう。

まず、Google Chart の js ファイルをロードします。

<script src="https://www.gstatic.com/charts/loader.js" ></script>

GeoChart を利用できるようパッケージをロードします。

google.charts.load('current', {
	'packages':['geochart']
});
google.charts.setOnLoadCallback(drawMap);

GeoChart を描画する関数です。指定するデータは、都道府県名と数値になりますが、都道府県名に都や県、府が含まれると上手くいきません。。。

function drawMap() {
	//都道府県単位のデータ
	var data = [
	    ["都道府県","回数"],
	    ["北海道", 5],
	    ["青森",   2],
	    ["秋田",   0],
	    ["岩手",   1],
	     :
	];
	var dt = google.visualization.arrayToDataTable(data);
	var options = {
		region: 'JP',  //地域
		displayMode: 'regions', // regions=塗りつぶし, markers=マーカー 
		backgroundColor: '#ebf7fe', //背景色
		resolution: 'provinces',
		colors:['white','green'] //階層の色
	};
	//出力するDivを指定して chart を生成
	var chart = new google.visualization.GeoChart(document.getElementById('region-div'));
	//描画
	chart.draw(dt, options);
}

以下がサンプルです。こちらのデータは、2017年10月20日現在、ブラタモリでタモリさんが訪問した都道府県の回数となっています。色が塗られていないところが、まだ訪問していない都道府県になります。大分少なくなりました。地図上にマウスカーソルを合わせると、都道府県名と回数が表示されます。

displayMode を “markers” に設定すると、塗り潰しではなくマーカでの描画になります。

displayMode: 'markers'

いかがでした？

こんなに簡単に作成できるとは、自分も思っていなかったのでビックリです。

今回作成したグラフは、Google Analytics でも使われており、Google系のサイトではよく見るものですね。また、地図以外にも色々なグラフを簡単に作れると思いますので、みなさんもご利用ください。

余談ですが、弊社では ブラタモリマップ を作成し、Googleマップ上で訪問した場所を参照できるようにしています。ご興味のある方は、是非ご覧ください。