GoogleChartsの第２弾、今回はGeoChartです！
GeoChart
https://developers.google.com/chart/interactive/docs/gallery/geochart
こちらは地図上にデータを可視化するものです。下図は試しに歴代高校ラグビー優勝回数を都道府県別に表示したものです。（偏ってるな～）
参考：http://www.mbs.jp/rugby_common/history/
GoogleMAPのおかげで既に各国の地図や都市名が組み込まれているため、「JAPAN」や「京都」を指定すればそれだけで地図が表示＆都市の位置にデータがプロットされました。
サンプルはコチラ
さすがに都道府県の境界までは反映されず、優勝回数に応じた色で都道府県を塗りつぶそうとしたら失敗しました。（サンプルページを見る限りでは国境には対応しているみたいですね。）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script> <script type='text/javascript'> google.charts.load('current', {'packages': ['geochart']}); google.charts.setOnLoadCallback(drawMarkersMap); function drawMarkersMap() { var data = google.visualization.arrayToDataTable([ ['City', '優勝回数'], ['大阪', 19 ], ['東京', 16 ], ['秋田', 15 ], ['京都', 15 ], ['福岡', 10 ], ['奈良', 6 ], ['神奈川', 4 ], ['岩手', 2 ], ['北海道', 1 ], ['茨城', 1 ], ['埼玉', 1 ], ['愛知', 1 ], ['大分', 1 ] ]); var options = { region:'JP', displayMode: 'markers', colorAxis: {colors: ['green', 'blue']} }; var chart = new google.visualization.GeoChart(document.getElementById('chart_div')); chart.draw(data, options); }; </script> |
ほんと手軽に動きますね、コレ・・・（驚