Google Chart ToolsのGeochartで都道府県マップを作る

地図に対して色を付けたり、グラフを作ったりすることができるGoogle Chart Tools。
今回、初めて触り、少し戸惑ったところもあるので、備忘録としてGoogle Chart ToolsのGeochartで都道府県マップを作るやり方を載せます。
f:id:harucharuru:20170418102152p:plain

Geochartの使い方

Geochartの初期プログラム(THML)をコピー

以下のサイトに、Geochartの初期プログラムが載っていますので、コピーします。
Visualization: GeoChart  |  Charts  |  Google Developers


<html>
<head>
<script type="text/javascript" src="">https://www.gstatic.com/charts/loader.js">
<script type="text/javascript">
google.charts.load('current', {'packages':['geochart']});
google.charts.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {

var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);

var options = {};

var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

chart.draw(data, options);
}
</script>
</head>
<body>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

テキストエディタに保存

メモ帳やTeraPadにコピーしたプログラムを貼り、保存します。
この時、文字コードSHIFT-JIS、拡張子は.htmlにしましょう。
私は、Terapadで操作を行っています。

表示

フォルダから、保存した.htmlファイルをダブルクリックし、表示させます。
私は、Googlechromeを使用しています。
すると、以下のようなものが出てくると思います。
f:id:harucharuru:20170418105829p:plain

日本地図を表示させる

f:id:harucharuru:20170418105911p:plain
日本地図を表示させるには、var optionsを赤い枠で囲ったように変更します。
f:id:harucharuru:20170418104227p:plain


var options = {
region: 'JP',
resolution: 'provinces'
};

都道府県に対して値を入れる

f:id:harucharuru:20170418105956p:plain
都道府県に対して値を入れるには、var dataの中身を都道府県名と表示させたい値に変えればOKです。
すべての県名を入れたものを載せておきます。(並びがわかりにくくてすみません。)


<html>
<head>
<script type="text/javascript" src="">https://www.gstatic.com/charts/loader.js">
<script type="text/javascript">
google.charts.load('current', {'packages':['geochart']});
google.charts.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {

var data = google.visualization.arrayToDataTable([
['都道府県', '人口'],
['北海道', 0],
['青森', 0],
['秋田', 0],
['岩手', 0],
['宮城', 0],
['山形', 0],
['福島', 0],
['栃木', 0],
['群馬', 0],
['茨城', 0],
['東京', 0],
['埼玉', 0],
['千葉', 0],
['神奈川', 0],
['静岡', 0],
['愛知', 0],
['岐阜', 0],
['三重', 0],
['滋賀', 0],
['京都', 0],
['大阪', 0],
['奈良', 0],
['和歌山', 0],
['兵庫', 0],
['徳島', 0],
['香川', 0],
['愛媛', 0],
['高知', 0],
['福岡', 0],
['佐賀', 0],
['長崎', 0],
['大分', 0],
['熊本', 0],
['宮崎', 0],
['鹿児島',0],
['沖縄', 0],
['岡山', 0],
['広島', 0],
['山口', 0],
['鳥取', 0],
['島根', 0],
['石川', 0],
['福井', 0],
['富山', 0],
['山梨', 0],
['長野', 0],
['新潟', 0]
]);

var options = {
region: 'JP',
resolution: 'provinces'
};

var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

chart.draw(data, options);
}
</script>
</head>
<body>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
</body>

</html>

値を変えればこのようにもできます。
f:id:harucharuru:20170418110244p:plain