Publish your application｜Mash up the Linked Open Data

JavaScript
CSS
HTML
Images
Input Data
ReadMe
Snapshots

API Reference (1.0)
Properties

forked:World Map Generator For Population Data
jquery-1.7.1.min.js
http://www.google.com/jsapi
http://canvg.googlecode.com/svn/trunk/rgbcolor.js
http://canvg.googlecode.com/svn/trunk/canvg.js

history

forked:World Map Generator For Population Data

history

forked:World Map Generator For Population Data

history

forked:World Map Generator For Population Data

var drawMarkersMap = function(rawData) {
	if(! rawData) {
		rawData =[];
	}
	var data = google.visualization.arrayToDataTable(rawData);

var options = {backgroundColor : '#0B173B', minValue: 0,  colors: ['#F2F5A9', '#DF013A']};
    var chart = new google.visualization.GeoChart(document.getElementById('paintedMap'));
    chart.draw(data, options);
}
	
	google.load('visualization', '1', {packages: ['geochart']});
	google.setOnLoadCallback(drawMarkersMap);

window.onload = function() {
	GenerateHeatmap.initFileList();
};

GenerateHeatmap = {};
GenerateHeatmap.fileName = "";

GenerateHeatmap.initFileList = function(){
	var sb =[];
	$.each(LinkData.getWorks(), function(workKey, workValue) {
		$.each(LinkData.getFiles(workValue), function(fileKey, fileValue) {
			sb[sb.length] = "<option value=\"" + fileValue + "\">"+ fileValue +"</option>";
		});
	});
	
	$("#fileOptions").append(sb.join(""));
	$("#fileOptions").change(GenerateHeatmap.drawMap);	
	$("#generate").click(generatePng);
	$("#generate").click(function(){
		$(".downloadButton").css("display", "");
	});
}
GenerateHeatmap.drawMap = function(event){
	var fileValue = event.currentTarget.value;
	if(fileValue == ""){
		return ;
	}
	GenerateHeatmap.fileName = fileValue;
	var data = [];
	data[data.length] = ["Country", fileValue];
	
	var workId = "rdf1s795i";
	
	$.each(LinkData.getSubjects( workId, fileValue), function(subjKey, subjValue) {
		var countryCode ="";
		var measured =0;
		
		var propAry = LinkData.getProperties(workId, fileValue);
		for(var i = 0 ; i < propAry.length ; i++){
			var propValue = propAry[i]
			if(propValue == "http://www.geonames.org/ontology#countryCode"){
				countryCode = LinkData.getObjects(workId, fileValue, subjValue, propValue)[0];
			}
			if(propValue == "http://linkdata.org/property/"+workId+"#value"){
				measured = LinkData.getObjects(workId, fileValue, subjValue, propValue)[0];
			}
		}
		data[data.length] = [countryCode, parseInt(measured, 10)];
//		$("#debug").append(countryCode + " <-> "+measured + " ");
	});
	drawMarkersMap(data);
}

function generatePng(){
		var svg = $("#paintedMap").children().children();
		canvg('canvas', svg.html(), { ignoreMouse: true, ignoreAnimation: true } );
		var c = document.getElementById('canvas');

var type = 'image/png'; 
		var data = c.toDataURL(type);

$('#png').attr('download', GenerateHeatmap.fileName + ".png");
      	$('#png').attr('href', data);
	}

*{
	background: #FFF;
}

#generate {
	font-size:16px;
	font-family:Arial;
	font-weight:normal;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	border:1px solid #dcdcdc;
	padding:4px 20px;
	text-decoration:none;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ededed), color-stop(100%, #dfdfdf) );
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	background:-ms-linear-gradient( top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background-color:#ededed;
	color:#777777;
	display:inline-block;
	text-shadow:1px 1px 0px #ffffff;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	-moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	box-shadow:inset 1px 1px 0px 0px #ffffff;
	margin-top: 10px;
}

#generate:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #dfdfdf), color-stop(100%, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	background:-ms-linear-gradient( top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background-color:#dfdfdf;
}

#generate:active {
	position:relative;
	top:1px;
}

.downloadButton {
	font-size:16px;
	font-family:Arial;
	font-weight:normal;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	border:1px solid #74b807;
	padding:4px 20px;
	text-decoration:none;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #89c403), color-stop(100%, #77a809) );
	background:-moz-linear-gradient( center top, #89c403 5%, #77a809 100% );
	background:-ms-linear-gradient( top, #89c403 5%, #77a809 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#89c403', endColorstr='#77a809');
	background-color:#89c403;
	color:#ffffff;
	display:inline-block;
	text-shadow:1px 1px 0px #528009;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #a4e271;
 	-moz-box-shadow:inset 1px 1px 0px 0px #a4e271;
 	box-shadow:inset 1px 1px 0px 0px #a4e271;
	margin-top: 10px;
}

.downloadButton:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #77a809), color-stop(100%, #89c403) );
	background:-moz-linear-gradient( center top, #77a809 5%, #89c403 100% );
	background:-ms-linear-gradient( top, #77a809 5%, #89c403 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77a809', endColorstr='#89c403');
	background-color:#77a809;
}

.downloadButton:active {
	position:relative;
	top:1px;
}

Select Input Data

LinkData Work	Table Data
Annual population by country	world_population_1992 world_population_2012

Add LinkData work(LinkData)

Click the Browse button or drag and drop to choose files to upload

The Maximum upload size is 1MB.(bmp,gif,jpeg,jpg,png)

Edit Application

Please enter information for the application to be registered.

*Required field

Account Name

Application Name*: Remove; Remove; Add name for another language

Collaborators

Image: Change image

You can upload jpg, gif, png file formats

Website: x

Add website

Tag

License

API version

Initial Cost: ￥

Annual Cost: ￥

Description: 国別の統計データを世界地図上にマップするアプリです。 表示した画像をPNG形式のファイルでダウンロードすることができます。 画像ダウンロードの手順： 1. "Input Data" のプルダウンメニューから表示したいデータを選択 2. "Generate PNG file" ボタンをクリック 3. "Download" ボタンをクリック Remove; Add description for another language

Security Level: public limited private

: finish Editing

History

Ready!