Publish your application｜Mash up the Linked Open Data

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

Save a snapshot
reload

Import an externally hosted application: URL
Check style

save
finish Editing
Cancel

JavaScript
CSS
HTML
Images
Input Data
ReadMe
Snapshots

API Reference (1.0)
Properties

forked:都道府県人口推移の可視化
jquery-1.7.1.min.js
https://www.google.com/jsapi
jquery-ui-1.8.18.min.js

history

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

history

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

history

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

/*
$(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);