forked from n1n9-jp's block: 都道府県別 人口の推移
Last active
March 13, 2017 15:26
-
-
Save beijaflor/818d1c21f241efea5998be02cdaa987c to your computer and use it in GitHub Desktop.
都道府県別 人口の推移
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
id | nam_ja | lat | lon | |
---|---|---|---|---|
1 | 北海道 | 43.064359 | 141.347449 | |
2 | 青森県 | 40.824294 | 140.740054 | |
3 | 岩手県 | 39.70353 | 141.152667 | |
4 | 宮城県 | 38.268737 | 140.872183 | |
5 | 秋田県 | 39.718175 | 140.103356 | |
6 | 山形県 | 38.240127 | 140.362533 | |
7 | 福島県 | 37.750146 | 140.466754 | |
8 | 茨城県 | 36.341817 | 140.446796 | |
9 | 栃木県 | 36.56575 | 139.883526 | |
10 | 群馬県 | 36.391205 | 139.060917 | |
11 | 埼玉県 | 35.857771 | 139.647804 | |
12 | 千葉県 | 35.604563 | 140.123179 | |
13 | 東京都 | 35.689185 | 139.691648 | |
14 | 神奈川県 | 35.447505 | 139.642347 | |
15 | 新潟県 | 37.901699 | 139.022728 | |
16 | 富山県 | 36.695274 | 137.211302 | |
17 | 石川県 | 36.594729 | 136.62555 | |
18 | 福井県 | 36.06522 | 136.221641 | |
19 | 山梨県 | 35.665102 | 138.568985 | |
20 | 長野県 | 36.651282 | 138.180972 | |
21 | 岐阜県 | 35.39116 | 136.722204 | |
22 | 静岡県 | 34.976987 | 138.383057 | |
23 | 愛知県 | 35.180247 | 136.906698 | |
24 | 三重県 | 34.730547 | 136.50861 | |
25 | 滋賀県 | 35.004532 | 135.868588 | |
26 | 京都府 | 35.0209962 | 135.7531135 | |
27 | 大阪府 | 34.686492 | 135.518992 | |
28 | 兵庫県 | 34.69128 | 135.183087 | |
29 | 奈良県 | 34.685296 | 135.832745 | |
30 | 和歌山県 | 34.224806 | 135.16795 | |
31 | 鳥取県 | 35.503463 | 134.238258 | |
32 | 島根県 | 35.472248 | 133.05083 | |
33 | 岡山県 | 34.66132 | 133.934414 | |
34 | 広島県 | 34.396033 | 132.459595 | |
35 | 山口県 | 34.185648 | 131.470755 | |
36 | 徳島県 | 34.065732 | 134.559293 | |
37 | 香川県 | 34.34014 | 134.04297 | |
38 | 愛媛県 | 33.841649 | 132.76585 | |
39 | 高知県 | 33.55969 | 133.530887 | |
40 | 福岡県 | 33.606767 | 130.418228 | |
41 | 佐賀県 | 33.249367 | 130.298822 | |
42 | 長崎県 | 32.744542 | 129.873037 | |
43 | 熊本県 | 32.790385 | 130.742345 | |
44 | 大分県 | 33.2382 | 131.612674 | |
45 | 宮崎県 | 31.91109 | 131.423855 | |
46 | 鹿児島県 | 31.560219 | 130.557906 | |
47 | 沖縄県 | 26.211538 | 127.681115 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>都道府県別 人口の推移</title> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script src="http://d3js.org/queue.v1.min.js"></script> | |
<script src="http://d3js.org/topojson.v1.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.10.0/d3-legend.js"></script> | |
<link rel="stylesheet" type="text/css" href="main.css"> | |
</head> | |
<body> | |
<div id="main"> | |
<div id="logoBlock"> | |
<h1>都道府県別 人口の推移</h1> | |
<p>単位:千人/2014年1月8日現在/地図出典:<a href="http://www.gsi.go.jp/kankyochiri/gm_jpn.html">地球地図日本</a>/データ出典:<a href="http://www.stat.go.jp/index.htm">総務省統計局</a></p> | |
</div> | |
<div id="menuBlock"> | |
<select></select> | |
</div> | |
</div> | |
<script src="main.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
background-color: #DDD; | |
margin: 0; | |
font-size: 100%; | |
} | |
#main { | |
width: 900px; | |
margin: 0 auto; | |
background-color: #FFF; | |
} | |
#logoBlock { | |
float: left; | |
width: 500px; | |
height: 80px; | |
margin: 0 auto; | |
} | |
#logoBlock p { | |
font-size: 9px; | |
color: #999; | |
margin-left: 20px; | |
margin-top: 4px; | |
} | |
#menuBlock { | |
float: right; | |
width: 400px; | |
height: 80px; | |
margin: 0 auto; | |
text-align: right; | |
} | |
#menuBlock select { | |
margin-right: 20px; | |
margin-top: 20px; | |
} | |
#legendBlock { | |
font-size: 0.6rem; | |
} | |
h1 { | |
font-size: 18px; | |
margin-left: 20px; | |
margin-top: 20px; | |
margin-bottom: 0px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* -------------------- | |
初期の設定 | |
-------------------- */ | |
/* 描画エリアのサイズ */ | |
const width = 900 | |
const height = 600 | |
/* 表示領域の用意 */ | |
const svgContainer = d3.select('#main').append('svg') | |
.attr({width, height}) | |
.style({ | |
border: 'solid 1px lightGray', | |
background: 'rgba(255, 0, 0, 0.03)' | |
}) | |
const mapContainer = svgContainer.append('g').attr('class', 'mapBlock') | |
const dataContainer = svgContainer.append('g').attr('class', 'dataBlock') | |
const legendContainer = svgContainer.append('g').attr('id', 'legendBlock') | |
.attr('transform', 'translate(800,60)') | |
.attr('width', 300).attr('height', 60).style('fill', 'red') | |
/* 地図投影法 */ | |
const projection = d3.geo.mercator() | |
.scale(1200) | |
.center([140.467551, 37.750299]) | |
/* 地形データを SVG に変換するときに呼び出す */ | |
const path = d3.geo.path().projection(projection) | |
const rScale = d3.scale.linear().domain([0, 14000]).range(['#fff', '#00f']) | |
const cScale = d3.scale.linear().domain([0, 14000]).range([2, 30]) | |
/* -------------------- | |
外部ファイルの読み込み | |
-------------------- */ | |
queue() | |
.defer(d3.json, "japan.json") | |
.defer(d3.tsv, "population.tsv") | |
.defer(d3.tsv, "capital.tsv") | |
.await(mainFunc); | |
/* -------------------- | |
ファイル読み込み後に実行するメインの処理 | |
-------------------- */ | |
function mainFunc(_error, _topojson, _population, _capital) { | |
if (_error){ console.log(_error); } | |
let menu | |
let indexYear = -1 | |
let yearArray = [] | |
let selectedPopulation | |
let _prev = [] | |
let _cPrev = [] | |
initMenu() | |
// renderMap() | |
changeYear() | |
renderCircle() | |
/* -------------------- | |
関数の定義 | |
-------------------- */ | |
function renderMap() { | |
mapContainer.selectAll('path') | |
.data(topojson.feature(_topojson, _topojson.objects.japan).features) | |
.enter() | |
.append('path') | |
.attr('id', (d) => { | |
return d.nam_ja | |
}) | |
.attr('d', path) | |
.style({ | |
'stroke': '#333', | |
'stroke-width': '0.2px', | |
'fill': '#fff' | |
}) | |
mapContainer.selectAll('path') | |
.style('fill', (d, i) => { | |
return rScale( parseInt(_prev[i])) | |
}) | |
.transition() | |
.duration(2000) | |
.style('fill', (d, i) => { | |
const _value = selectedPopulation[0][d.properties.nam_ja] | |
_prev[i] = _value | |
return rScale(parseInt(_value)) | |
//return '#ccc' | |
}) | |
} | |
function renderCircle() { | |
dataContainer.selectAll('circle') | |
.data(_capital) | |
.enter() | |
.append('circle') | |
.attr('id', (d) => { | |
return d.num_ja | |
}) | |
.attr('class', 'perf') | |
.attr('cx', (d) => { | |
return projection([d.lon, d.lat])[0] | |
}) | |
.attr('cy', (d) => { | |
return projection([d.lon, d.lat])[1] | |
}) | |
.attr('r', 2) | |
.style('fill', (d) => { | |
return'rgba(0,0,250,0.5)' | |
}) | |
dataContainer.selectAll('circle') | |
.transition() | |
.duration(2000) | |
.attr('r', (d, i) => { | |
const _value = selectedPopulation[0][d.nam_ja] | |
_cPrev[i] = _value | |
return cScale(parseFloat(_value)) | |
}) | |
} | |
function initMenu() { | |
for (let i = 0; i < _population.length; i++) { | |
yearArray[i] = _population[i].date | |
} | |
menu = d3.select('#menuBlock select').on('change', changeYear) | |
menu.selectAll('option') | |
.data(yearArray) | |
.enter() | |
.append('option') | |
.attr('value', (d, i) => { | |
return i | |
}) | |
.text((d) => { | |
return d + '年' | |
}) | |
} | |
function changeYear() { | |
if(indexYear != -1) { | |
indexYear = parseInt(menu.property('value')) | |
} else { | |
indexYear = 0 | |
} | |
selectedPopulation = _population.filter((d) => { | |
return d.date == yearArray[indexYear]; | |
}) | |
renderMap() | |
renderCircle() | |
} | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* -------------------- | |
初期の設定 | |
-------------------- */ | |
/* 描画エリアのサイズ */ | |
var width = 900; | |
var height = 600; | |
/* 表示領域 */ | |
var svgContainer = d3.select("#main").append("svg") | |
.attr("width", width).attr("height", height); | |
var mapContainer = svgContainer.append("g").attr("class", "mapBlock"); | |
var dataContainer = svgContainer.append("g").attr("class", "dataBlock"); | |
var legendContainer = svgContainer.append("g").attr("id", "legendBlock") | |
.attr('transform', 'translate(' + 800 + "," + 60 + ')') | |
.attr("width", 300).attr("height", 60); | |
/* 地図投影法 */ | |
var projection = d3.geo.mercator() | |
.scale(1200) | |
.center([140.467551, 37.750299]); //中心の座標。経度緯度の順。 | |
/* 地形データをSVGに変換するときに呼び出す */ | |
var path = d3.geo.path().projection(projection); | |
/* スケール */ | |
var rScale = d3.scale.linear().domain([0, 14000]).range(["#FFF", "#00F"]); | |
/* プルダウン用変数 */ | |
var menu; | |
var indexYear = -1; | |
var yearArray = new Array(); | |
var selectedPopulation; | |
/* -------------------- | |
データファイルの読み込み | |
-------------------- */ | |
queue() | |
.defer(d3.json, "japan.json") | |
.defer(d3.tsv, "population.tsv") | |
.defer(d3.tsv, "capital.tsv") | |
.await(mainFunc); | |
/* -------------------- | |
ファイル読み込み後に実行 | |
-------------------- */ | |
function mainFunc(_error, _topojson, _population, _capital) { | |
if (_error){ console.log(_error); } | |
/* プルダウン初期化 */ | |
function initMenu() { | |
/* データの左端にある年を配列化 */ | |
for ( var i=0; i<_population.length; i++) { | |
yearArray[i] = _population[i].date; | |
} | |
/* プルダウンの中身を生成 */ | |
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+"年"; }); | |
}; | |
/* プルダウン変更時の挙動 */ | |
function changeYear() { | |
if (indexYear != -1) { | |
indexYear = parseInt( menu.property("value") ); | |
} else { | |
indexYear = 0; | |
}; | |
selectedPopulation = _population.filter( function(d) { return d.date == yearArray[indexYear] }); | |
renderMap(); | |
}; | |
/* 地図とデータpopulationの描画の描画 */ | |
function renderMap() { | |
var _prev = new Array(); | |
//初回のみ実行 | |
mapContainer.selectAll("path") | |
.data(topojson.feature(_topojson, _topojson.objects.japan).features) | |
.enter() | |
.append("path") | |
.attr("id", function(d) { | |
return d.properties.nam_ja; | |
}) | |
.attr("d", path) | |
.style("stroke", "#333") | |
.style("stroke-width", "0.2px") | |
.style("fill", "#FFF"); | |
//プルダウンの変更がある度に実行 | |
mapContainer.selectAll("path") | |
.style("fill", function(d, i) { | |
//変化させる前の色 | |
return rScale( parseInt(_prev[i]) ) | |
}) | |
.transition() | |
.duration(2000) | |
.style("fill", function(d, i) { | |
//変化させた後の色 | |
var _value = selectedPopulation[0][ d.properties.nam_ja ]; | |
_prev[i] = _value; | |
return rScale( parseInt(_value) ) | |
//return "#CCC"; | |
}); | |
}; | |
/* データcapitalの描画 */ | |
function renderCircle() { | |
dataContainer.selectAll("circle") | |
.data(_capital) | |
.enter() | |
.append('circle') | |
.attr('class', "pref") | |
.attr('id', function(d){ | |
return d.nam_ja; | |
}) | |
.attr('cx', function(d){ | |
return projection([d.lon, d.lat])[0]; | |
}) | |
.attr('cy', function(d){ | |
return projection([d.lon, d.lat])[1]; | |
}) | |
.attr('r', 2) | |
.style('fill', function(d){ | |
return "#000"; | |
}); | |
}; | |
function drawLegend() { | |
var legendObj = d3.legend.color() | |
.shapeWidth(15).shapeHeight(15) | |
.labelFormat(d3.format(".0f")) | |
.cells([0, 2000, 4000, 6000, 8000, 10000, 12000, 14000]) | |
.orient('vertical') | |
.scale(rScale); | |
legendContainer.call(legendObj); | |
}; | |
initMenu(); | |
changeYear(); | |
renderCircle(); | |
drawLegend(); | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
�PNG | |