Built with blockbuilder.org
forked from n1n9-jp's block: 都道府県別 人口の推移
forked from n1n9-jp's block: 都道府県別 人口の推移
Created
November 9, 2016 10:26
-
-
Save lionhu/31119dc96c8075bd1be49828291d8941 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: 60px; | |
| margin: 0 auto; | |
| } | |
| #logoBlock p { | |
| font-size: 9px; | |
| color: #999; | |
| margin-left: 20px; | |
| margin-top: 4px; | |
| } | |
| #menuBlock { | |
| float: right; | |
| width: 400px; | |
| height: 60px; | |
| 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
| /* -------------------- | |
| 変数を準備 | |
| -------------------- */ | |
| /* 描画エリアのサイズ */ | |
| var width = 900; | |
| var height = 600; | |
| /* プルダウン用 */ | |
| var menu; | |
| var indexYear = -1; | |
| var yearArray = new Array(); | |
| var selectedPopulation; | |
| /* -------------------- | |
| 描画のための準備 | |
| -------------------- */ | |
| /* 地図投影の指定 */ | |
| var projection = d3.geo.mercator() | |
| .scale(1200) | |
| .center([140.467551, 37.750299]); //中心の座標。経度緯度の順。 | |
| /* 地形データをSVGに変換するときに呼び出す */ | |
| var path = d3.geo.path().projection(projection); | |
| /* 表示領域の用意 */ | |
| var svgContainer = d3.select("#main").append("svg") | |
| .attr("width", width).attr("height", height); | |
| var mapContainer = svgContainer.append("g").attr("class", "japan"); | |
| var dataContainer = svgContainer.append("g").attr("class", "japan"); | |
| var legendContainer = svgContainer.append("g").attr("id", "legendBlock") | |
| .attr('transform', 'translate(' + 800 + "," + 60 + ')') | |
| .attr("width", 300).attr("height", 60); | |
| /* スケール */ | |
| var rScale = d3.scale.linear().domain([0, 14000]).range(["#FFF", "#00F"]); | |
| /* -------------------- | |
| データファイルの読み込み | |
| -------------------- */ | |
| 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); } | |
| /* データの左端にある年を配列化 */ | |
| for ( var i=0; i<_population.length; i++) { | |
| yearArray[i] = _population[i].date; | |
| } | |
| /* プルダウン変更時の挙動 */ | |
| function changeYear() { | |
| if (indexYear != -1) { | |
| indexYear = parseInt( menu.property("value") ); | |
| } else { | |
| indexYear = 0; | |
| }; | |
| selectedPopulation = _population.filter( function(d) { return d.date == yearArray[indexYear] }); | |
| renderMap(); | |
| } | |
| /* プルダウン初期化 */ | |
| function initMenu() { | |
| 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+"年"; }); | |
| } | |
| /* 地図とデータ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) ) | |
| }); | |
| }; | |
| /* データcapitalの描画 */ | |
| function renderCircle() { | |
| dataContainer.selectAll(".chara") | |
| .data(_capital) | |
| .enter() | |
| .append('image') | |
| .attr('class', "chara") | |
| .attr('id', function(d){ | |
| return d.nam_ja; | |
| }) | |
| .attr("xlink:href", "http://yuskesuzki.github.io/luppymap/img/aprilfool_piert_face.png") | |
| .attr('x', function(d){ | |
| console.log(d); | |
| return projection([d.lon, d.lat])[0]; | |
| }) | |
| .attr('y', function(d){ | |
| return projection([d.lon, d.lat])[1]; | |
| }) | |
| .attr("width", 20) | |
| .attr("height", 16); | |
| } | |
| /* 凡例 */ | |
| 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(); | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment