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

fullscreen

Seiji Okajima

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

Rating

useful

Application

Play
JavaScript
CSS
HTML
ReadMe
Snapshots

/*
$(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 this app as your new one download

Web Search

Contributor Send Message	Seiji Okajima
Forked from (Parent App)	Uditha Punchihewa 's 統計データを地図上に表示するアプリ
Run count	411
Website
License
Fork count	0
Created date	Nov 24, 2013
Last update date	Nov 24, 2013