<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<script src="sample.js"></script>
<script src="jquery.js"></script>
<script src="map.js"></script>
<title>社会人口統計体系</title>
</head>
<body onload="sample()">
<p id="memo" style="width: 900px; height: 500px;">準備中</p>
</body>
</html>
var point=new Array();
var city=new Array();
var number;
function sample() {
var query = "SELECT * FROM " +'15CnMforM_WLZnwORXSpuxVtoKPPqsMkLpHX48Mm_';
var encodedQuery = encodeURIComponent(query);
var url = ['https://www.googleapis.com/fusiontables/v1/query'];
url.push('?sql=' + encodedQuery);
url.push('&key=AIzaSyAH0WCAXRIdHdbI-6bnMSN4kVDDZZmGyqY');
url.push('&callback=?');
$.ajax({
url: url.join(''),
dataType: 'jsonp',
success: function (data) {
var rows = data['rows'];
sx = 0;
for (var i in rows) {
var x1 = rows[i][0];
var x2 = rows[i][2];
sx = sx + 1;
city[sx] = x1;
point[sx] = x2;
}
number = sx;
for(s=1;s<number+1;s++){
if(city[s].length<5)city[s]="0"+city[s];
}
$("#memo").html("準備完了");
map();
}
});
}
var lon = new Array();
var lat = new Array();
var code = new Array();
var col = new Array();
var delta = new Array();
var datanumber;
function map() {
var query = "SELECT * FROM " +
'1DS2H6iPeWFL77foJCLonLlxWo5gkU0WuMT-KpG6X';
var encodedQuery = encodeURIComponent(query);
var url = ['https://www.googleapis.com/fusiontables/v1/query'];
url.push('?sql=' + encodedQuery);
url.push('&key=AIzaSyAH0WCAXRIdHdbI-6bnMSN4kVDDZZmGyqY');
url.push('&callback=?');
for(s=1;s<5000;s++){
lon[s]=new Array();
lat[s]=new Array();
}
$.ajax({
url: url.join(''),
dataType: 'jsonp',
success: function (data) {
var rows = data['rows'];
sx = 0;
for (var i in rows) {
s=rows[i][0];
code[s]=rows[i][1];
sx=rows[i][2];
lon[s][sx]=rows[i][3];
lat[s][sx]=rows[i][4];
}
datanumber = s;
maxy=0;
maxx=0;
for(s=1;s<datanumber;s++){
if(lon[s][1]>maxy)maxy=lon[s][1];
}
for(s=1;s<datanumber;s++){
if(lat[s][1]>maxx)maxx=lat[s][1];
}
minx=maxx;
miny=maxy;
for(s=1;s<datanumber;s++){
if(lon[s][1]<miny)miny=lon[s][1];
}
for(s=1;s<datanumber;s++){
if(lat[s][1]<minx)minx=lat[s][1];
}
for(s=1;s<datanumber;s++){
sxs=0;
col[s]="blue";
for(sx=1;sx<number+1;sx++){
if(code[s]==city[sx])sxs=sx;
}
if(point[sxs]>5000)col[s]="yellow";
if(point[sxs]>10000)col[s]="orange";
if(point[sxs]>50000)col[s]="pink";
if(point[sxs]>100000)col[s]="red";
}
paint();
}
});
}
function paint(){
str="<svg width=\"500\" height=\"500\">";
for(s=1;s<datanumber;s++){
str=str+poly(s,col[s]);
}
str=str+"</svg>";
$("#memo").html(str);
}
function poly(s,col){
var strx="<polygon points=\"";
for(sx=1;sx<11;sx++){
y1=500*(lon[s][sx]-miny)/(maxy-miny);
x1=500*(lat[s][sx]-minx)/(maxx-minx);
strx=strx+x1+","+(500-y1)+" ";
}
strx=strx+"\"";
strx=strx+"style=\"fill:"+col+"\"/>";
return strx;
}
最終更新：2015年12月04日 04:45
