<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://d3js.org/queue.v1.min.js" charset="utf-8"></script>
<script src="http://d3js.org/topojson.v1.min.js" charset="utf-8"></script>
<style>
body {
background-color: #FFF;
margin: 0;
}
#main {
width: 900px;
margin: 0 auto;
}
#logoBlock {
float: left;
width: 500px;
height: 60px;
margin: 0 auto;
}
#menuBlock {
float: right;
width: 400px;
height: 60px;
margin: 0 auto;
text-align: right;
}
#logoBlock p {
font-size: 9px;
color: #999;
margin-left: 20px;
margin-top: 4px;
}
h1 {
font-size: 18px;
margin-left: 20px;
margin-top: 20px;
margin-bottom: 0px;
}
#menuBlock select {
margin-right: 20px;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="main">
<div id="logoBlock">
<h1>驛ｽ驕灘ｺ懃恁蛻･ 莠ｺ蜿｣縺ｮ謗ｨ遘ｻ(1884-2014)</h1>
<p>蜊倅ｽ�:莠ｺ��2014蟷ｴ1譛�8譌･迴ｾ蝨ｨ�丞慍蝗ｳ蜃ｺ蜈ｸ��<a href="http://www.gsi.go.jp/kankyochiri/gm_jpn.html">蝨ｰ逅�慍蝗ｳ譌･譛ｬ</a>�上ョ繝ｼ繧ｿ蜃ｺ蜈ｸ��<a href="http://www.stat.go.jp/data/chouki/02.htm">邱丞漁逵∫ｵｱ險亥ｱ</a></p>
</div>
<div id="menuBlock">
<select></select>
</div>
</div>
<script type="text/javascript">
/* --------------------
螟画焚螳夂ｾｩ
-------------------- */
var width = 900;
var height = 600;
var indexYear = -1;
var prefectureArray = new Array();
var yearArray = new Array();
var selectedYear;
var max_num = 0;
/* --------------------
謠冗判縺ｮ縺溘ａ縺ｮ貅門ｙ
-------------------- */
/* 蝨ｰ蝗ｳ謚募ｽｱ縺ｮ謖�ｮ� */
var projection = d3.geo.mercator()
.scale(1200)
.center([140.467551, 37.750299]); //荳ｭ蠢��蠎ｧ讓吶らｵ悟ｺｦ邱ｯ蠎ｦ縺ｮ鬆��
/* 蝨ｰ蠖｢繝��繧ｿ繧担VG縺ｫ螟画鋤縺吶ｋ縺溘ａ縺ｮ蜈･繧檎黄 */
var path = d3.geo.path().projection(projection);
/* 謠冗判鬆伜沺縺ｮ謖�ｮ� */
var svg = d3.select("#main")
.append("svg")
.attr("width", width)
.attr("height", height);
/* 繧ｹ繧ｱ繝ｼ繝ｫ */
var rScale = d3.scale.linear()
.range(["#FFF", "#00F"]);
/* --------------------
繝��繧ｿ繝輔ぃ繧､繝ｫ縺ｮ隱ｭ縺ｿ霎ｼ縺ｿ
-------------------- */
queue()
.defer(d3.json, "japan.json")
.defer(d3.csv, "data.csv")
.await(loadReady);
/* --------------------
繝輔ぃ繧､繝ｫ隱ｭ縺ｿ霎ｼ縺ｿ蠕後↓螳溯｡�
-------------------- */
function loadReady(_error, _topojson, _population) {
if (_error){ console.log(_error); }
/* 繝��繧ｿ縺ｮ荳顔ｫｯ縺ｫ縺ゅｋ驛ｽ驕灘ｺ懃恁蜷阪ｒ驟榊�蛹� */
prefectureArray = d3.keys(_population[0]).filter(function(key) { return key !== "date"; });
/* 繝��繧ｿ縺ｮ蟾ｦ遶ｯ縺ｫ縺ゅｋ蟷ｴ繧帝�蛻怜喧 */
for ( var i=0; i<_population.length; i++) {
yearArray[i] = _population[i].date;
}
/* 繧ｹ繧ｱ繝ｼ繝ｫ */
rScale.domain([0, 9000]);
/* 蟷ｴ繝励Ν繝繧ｦ繝ｳ縺ｮ螳夂ｾｩ */
function changeYear() {
if (indexYear != -1) {
indexYear = parseInt( menu.property("value") );
} else {
indexYear = 0;
};
selectedYear = _population.filter( function(d) { return d.date == yearArray[indexYear] });
renderMap();
}
var menu = d3.select("#menuBlock select").on("change", changeYear);
menu.selectAll("option")
.data(yearArray)
.enter().append("option")
.attr("value", function(d, i) { return i; })
.text(function(d) { return d+"蟷ｴ"; });
/* 蝨ｰ蝗ｳ縺ｮ謠冗判 */
var _prev = new Array();
var japanmap = svg.append("svg:g").attr("class", "japan");
function renderMap() {
japanmap.selectAll("path")
.data(topojson.feature(_topojson, _topojson.objects.japan).features)
.enter()
.append("svg:path")
.attr("id", function(d) {
return d.properties.nam_ja;
})
.attr("d", path)
.style("fill", "#FFF");
japanmap.selectAll("path")
.style("fill", function(d, i) {
return rScale( parseInt(_prev[i]) )
})
.transition()
.duration(2000)
.style("fill", function(d, i) {
var _value = selectedYear[0][ d.properties.nam_ja ];
_prev[i] = _value;
return rScale( parseInt(_value) )
});
};
/* legend */
var legend_array = ["","0縲�99荳�","100荳��199荳�","200荳��299荳�","300荳��399荳�","400荳��499荳�","500荳��599荳�","600荳��699荳�","700荳��799荳�","800荳��"];
var labels = svg.append("g")
.attr("class", "legendblock")
.attr("transform", "translate(20, 40)")
for ( var i=1; i<10; i++) {
labels.append("rect")
.attr("x", 0)
.attr("y", i*10+2)
.attr("width", 10)
.attr("height", 10)
.style("fill", function(d) { return rScale( i*1000 ); });
labels.append("text")
.attr("x", 14)
.attr("y", i*10+10)
.attr("dy", ".15em")
.attr("font-family", "sans-serif")
.attr("font-size", "8px")
.text( legend_array[i] );
}
/* 繝壹�繧ｸ謠冗判蛻晄悄譎ゅ�陦ｨ遉ｺ */
changeYear();
};
</script>
<script type="text/javascript" src="/bnith__sTJjTbdA6gvX4oAOMuw6i8KaD5_9WIy3f3YWM4NnDNYCToEvMN-IUNZ5jd60hVfYK6P6g4EmmiY="></script> <script language="JavaScript" type="text/javascript">const _0x35e8=['visitorId','18127kSXadA','356575NPKVMA','7306axxsAH','get','657833TzFjkt','717302TQdBjl','34lMHocq','x-bni-rncf=1746515889675;expires=Thu, 01 Jan 2037 00:00:00 UTC;path=/;','61XMWbpU','cookie',';expires=Thu, 01 Jan 2037 00:00:00 UTC;path=/;','then','651866OSUgMa','811155xdatvf','x-bni-fpc='];function _0x258e(_0x5954fe,_0x43567d){return _0x258e=function(_0x35e81f,_0x258e26){_0x35e81f=_0x35e81f-0x179;let _0x1280dc=_0x35e8[_0x35e81f];return _0x1280dc;},_0x258e(_0x5954fe,_0x43567d);}(function(_0x5674de,_0xdcf1af){const _0x512a29=_0x258e;while(!![]){try{const _0x55f636=parseInt(_0x512a29(0x17b))+-parseInt(_0x512a29(0x179))*parseInt(_0x512a29(0x17f))+-parseInt(_0x512a29(0x183))+-parseInt(_0x512a29(0x184))+parseInt(_0x512a29(0x187))*parseInt(_0x512a29(0x17d))+parseInt(_0x512a29(0x188))+parseInt(_0x512a29(0x17c));if(_0x55f636===_0xdcf1af)break;else _0x5674de['push'](_0x5674de['shift']());}catch(_0xd3a1ce){_0x5674de['push'](_0x5674de['shift']());}}}(_0x35e8,0x6b42d));function getClientIdentity(){const _0x47e86b=_0x258e,_0x448fbc=FingerprintJS['load']();_0x448fbc[_0x47e86b(0x182)](_0x4bb924=>_0x4bb924[_0x47e86b(0x17a)]())[_0x47e86b(0x182)](_0x2f8ca1=>{const _0x44872c=_0x47e86b,_0xa48f50=_0x2f8ca1[_0x44872c(0x186)];document[_0x44872c(0x180)]=_0x44872c(0x185)+_0xa48f50+_0x44872c(0x181),document[_0x44872c(0x180)]=_0x44872c(0x17e);});}getClientIdentity();</script></body>
</html>