都道府県人口推移の可視化

fullscreen

Seiji Okajima

都道府県の人口推移を年ごとに可視化したページを試しに作ってみました。「統計データを地図上に表示するアプリ」をforkして作成しました。

評価指数

アプリケーション

Play
JavaScript
CSS
HTML
概要
保存した実行結果

/*
$(function() {
	var spinner = $( "#spinner" ).spinner();
});
*/
if(typeof Application==="undefined"||!Application){var Application= {};}
	Application.gc = function() {
	this._init.apply(this, arguments);
}

var data_array = new Array();

Application.gc.prototype = {
	
	_data : null,
	_options : null,
	
	_init : function() {
		this._data = this._getGoogleDataTable();
		this._options = this._getGoogleOption();
	},
	
	_configArray : function() {
		var array = [			
			{
				"caption" : "Latitude",
				"property" : "lat"
			},
			{
				"caption" : "Longitude",
				"property" : "long"
			},
			{
				"caption" : "Location",
				"property" : "label"
			},
			{
				"caption" : "人口",
				"property" : "population"
			}
		];
		return array;
	},
	
	_getGoogleOption : function() {
		var options = {
			region: 'JP',
		   	displayMode: 'markers',
			colorAxis: {colors: ['yellow', 'red']}
      	};
		return options;
	},
	
	_getGoogleDataTable : function() {
		var configArray = this._configArray();
		var main = [];
		var array = [];
		$.each(configArray, function(index, obj) {
			array.push(obj.caption);
		});
		main.push(array);

function sliceYear(data, year) {
	var start = year - 1920 + 1;
	var end = start + 48;
	var y_data = data.slice(0,1).concat(data.slice(start, end));
	//console.log(y_data);
	return y_data;
}

var drawMarkersMap = function() {
	var gc = new Application.gc();
	gc.getData();
	var data = google.visualization.arrayToDataTable(data_array[0]);
	var options = gc.getOptions();
	var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
	chart.draw(data, options);
}

function switchYear(year) {
	var gc = new Application.gc();
	var data = google.visualization.arrayToDataTable(data_array[year-1920]);
	var options = gc.getOptions();
	var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
	chart.draw(data, options);
}

google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawMarkersMap);

Initial content

このアプリをForkして新しいアプリを作るダウンロード

このアプリ作品をwebから探す

作者メッセージ送信	Seiji Okajima
Fork元のアプリ	ウディタプンチへワ 's 統計データを地図上に表示するアプリ
実行回数	411
ウェブサイト
ライセンス
Fork count	0
作成日	2013年11月24日
最終更新日	2013年11月24日