#都道府県別人口超過のグラフ
Created
October 30, 2015 07:04
-
-
Save sugi2000/dc18c00b90487f21d0b9 to your computer and use it in GitHub Desktop.
jinkou
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
| ken | 1997 | 1998 | 1999 | 2000 | 2001 | 2002 | 2003 | 2004 | 2005 | 2006 | 2007 | 2008 | 2009 | 2010 | 2011 | 2012 | 2013 | 2014 | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 北海道 | -3638 | -9632 | -7668 | -8918 | -10624 | -8772 | -9809 | -11705 | -14211 | -18386 | -20267 | -21129 | -12178 | -8637 | -2482 | -6745 | -8154 | -8942 | |
| 青森県 | -2503 | -2920 | -2533 | -2329 | -2974 | -4417 | -5185 | -6644 | -7182 | -9465 | -10274 | -9266 | -6599 | -5032 | -3256 | -5343 | -6056 | -6460 | |
| 岩手県 | -1082 | -2107 | -1774 | -2222 | -3568 | -4684 | -4078 | -4490 | -5868 | -5873 | -7010 | -6911 | -5543 | -4238 | -3443 | -2385 | -2431 | -3200 | |
| 宮城県 | 3887 | 1302 | 39 | -731 | -2308 | -3550 | -1557 | -3283 | -3750 | -4961 | -5394 | -5026 | -1927 | -556 | -6402 | 6069 | 4656 | 2437 | |
| 秋田県 | -2575 | -2454 | -2574 | -3068 | -3137 | -4034 | -4382 | -3654 | -4767 | -5814 | -6806 | -6187 | -4549 | -3728 | -2690 | -3574 | -4595 | -4423 | |
| 山形県 | -1717 | -1767 | -2265 | -1734 | -3456 | -3612 | -4011 | -3618 | -4215 | -4674 | -5195 | -5207 | -4000 | -3607 | -913 | -2700 | -4081 | -3573 | |
| 福島県 | -2747 | -3553 | -3106 | -3412 | -5782 | -6063 | -6389 | -6157 | -6302 | -7785 | -8949 | -8284 | -7909 | -5752 | -31381 | -13843 | -5200 | -2211 | |
| 茨城県 | 2594 | 723 | -564 | -3699 | -4672 | -4459 | -4093 | -3454 | -3439 | -2157 | -2446 | -2456 | 1722 | 944 | -4751 | -4066 | -5138 | -4849 | |
| 栃木県 | 1724 | 818 | 270 | 135 | -1885 | -2156 | -392 | 1465 | -319 | -1185 | -118 | -1503 | -2573 | -1525 | -1414 | -1286 | -1463 | -1795 | |
| 群馬県 | 441 | -40 | 825 | 50 | -1002 | -1399 | -818 | -2022 | -1607 | -2456 | -2866 | -2370 | -1882 | -1298 | -1250 | -1298 | -2434 | -2250 | |
| 埼玉県 | 8243 | 6077 | 4042 | 4222 | 6867 | 3439 | 6294 | 3272 | -240 | 7708 | 8544 | 14872 | 18083 | 15424 | 12143 | 10298 | 11554 | 14909 | |
| 千葉県 | 5764 | 7017 | 11797 | 9616 | 13429 | 13585 | 10954 | 1960 | 6117 | 12398 | 19632 | 24178 | 21692 | 14187 | -3935 | -8188 | 2442 | 8364 | |
| 東京都 | 17291 | 31319 | 37156 | 54920 | 68118 | 73275 | 66400 | 72881 | 86562 | 90079 | 94500 | 83000 | 56220 | 48331 | 44482 | 56497 | 70172 | 73280 | |
| 神奈川県 | 8367 | 18000 | 12688 | 19237 | 28419 | 29076 | 24293 | 22749 | 22249 | 21848 | 32474 | 29646 | 21466 | 14887 | 10119 | 8602 | 12356 | 12855 | |
| 新潟県 | -734 | -3112 | -4366 | -4594 | -5117 | -5377 | -4573 | -4918 | -5499 | -6923 | -6783 | -6316 | -4461 | -4104 | -2170 | -4845 | -5132 | -5518 | |
| 富山県 | -514 | -1152 | -1059 | -1168 | -2329 | -1790 | -1361 | -1117 | -1157 | -1309 | -1820 | -2152 | -1932 | -646 | -340 | -673 | -1354 | -1091 | |
| 石川県 | -1633 | -1378 | -1163 | -1154 | -2172 | -1288 | -2153 | -2316 | -2783 | -2215 | -2153 | -1701 | -870 | -523 | -754 | -421 | -782 | -586 | |
| 福井県 | -1074 | -641 | -965 | -1200 | -1778 | -1581 | -1806 | -2089 | -2072 | -2004 | -2552 | -2364 | -2290 | -1410 | -1031 | -1641 | -2055 | -2246 | |
| 山梨県 | 297 | 312 | 330 | 204 | -1373 | -1343 | -2144 | -1084 | -1589 | -2428 | -2507 | -3517 | -1182 | -1368 | -1846 | -1278 | -2321 | -2564 | |
| 長野県 | 1000 | -757 | 708 | 198 | -1037 | -2114 | -2558 | -2466 | -4375 | -3963 | -4752 | -4434 | -4528 | -2103 | -76 | -2056 | -2690 | -3279 | |
| 岐阜県 | -1601 | -2785 | -2210 | -3223 | -3940 | -3546 | -3149 | -3564 | -3660 | -3735 | -3728 | -4663 | -5188 | -3388 | -2351 | -3916 | -4812 | -4154 | |
| 静岡県 | -3327 | -3039 | -2033 | -1642 | -2299 | -2850 | -2238 | -2493 | -1595 | -2064 | -1779 | -943 | -3138 | -3894 | -2074 | -3952 | -6892 | -7240 | |
| 愛知県 | 1951 | 5601 | 4051 | 1660 | 3358 | 5748 | 7243 | 11324 | 19258 | 20999 | 20520 | 18391 | 4075 | -1262 | 6379 | 7592 | 7891 | 6190 | |
| 三重県 | 419 | 631 | -824 | -578 | -2014 | -2849 | -1564 | 434 | -586 | 610 | 762 | -203 | -3424 | -1592 | -968 | -2109 | -3226 | -2839 | |
| 滋賀県 | 5789 | 5891 | 4723 | 4840 | 2412 | 2204 | 1768 | 1803 | 1593 | 2891 | 3030 | 2875 | 1084 | 2316 | 3114 | 1283 | -143 | -889 | |
| 京都府 | -2482 | -1994 | -3435 | -5003 | -3831 | -4240 | -3040 | -1826 | -2221 | -2790 | -4337 | -3269 | -3601 | -1940 | 37 | -418 | -1973 | -1174 | |
| 大阪府 | -27849 | -28464 | -28953 | -26654 | -20568 | -20433 | -13892 | -12943 | -8756 | -6353 | -4952 | -3568 | -2273 | -3570 | 4903 | 5381 | 3377 | -391 | |
| 兵庫県 | 9907 | 11658 | 10860 | 2310 | 3923 | 568 | -1179 | -1138 | 847 | 98 | -1437 | -114 | 203 | -2643 | 1234 | -1295 | -5214 | -7092 | |
| 奈良県 | 1636 | -1114 | -29 | -2305 | -5145 | -4376 | -4631 | -4870 | -4892 | -4682 | -4920 | -4192 | -2884 | -2297 | -1965 | -2691 | -2781 | -3065 | |
| 和歌山県 | -1861 | -1827 | -1979 | -2615 | -2923 | -3248 | -3891 | -3307 | -3646 | -4005 | -4731 | -3784 | -2504 | -2225 | -1975 | -2382 | -2505 | -2957 | |
| 鳥取県 | -287 | -370 | -19 | -220 | -520 | -367 | -790 | -909 | -1767 | -1891 | -2465 | -2885 | -1853 | -1132 | -1059 | -1453 | -1683 | -1131 | |
| 島根県 | -1013 | -1514 | -626 | -241 | -1240 | -1730 | -1875 | -2304 | -2479 | -2978 | -2934 | -2650 | -1899 | -1570 | -993 | -1199 | -1347 | -1601 | |
| 岡山県 | 25 | -797 | -1414 | -1328 | -1787 | -1846 | -833 | -1023 | -1590 | -2743 | -1740 | -2691 | -2634 | -2084 | 605 | 404 | -723 | -382 | |
| 広島県 | -4313 | -4282 | -5468 | -5640 | -7001 | -4824 | -3716 | -1831 | -1969 | -2625 | -3671 | -4448 | -3207 | -1902 | -957 | -2786 | -2953 | -2639 | |
| 山口県 | -2127 | -2344 | -3041 | -3628 | -3510 | -3332 | -3270 | -3213 | -3725 | -4508 | -4229 | -3853 | -2721 | -2886 | -1992 | -3635 | -3187 | -3647 | |
| 徳島県 | -541 | -6 | -1133 | -1319 | -1192 | -1127 | -1739 | -1749 | -2258 | -2132 | -2920 | -2862 | -2038 | -1585 | -1132 | -831 | -1694 | -1495 | |
| 香川県 | -49 | -66 | -202 | -1483 | -1841 | -1423 | -1072 | -806 | -1640 | -1343 | -1808 | -1395 | -834 | -1405 | -41 | 188 | -998 | -1149 | |
| 愛媛県 | -1787 | -2973 | -3457 | -2758 | -2652 | -2781 | -2145 | -2845 | -3206 | -4272 | -4459 | -3545 | -2637 | -2596 | -1926 | -2506 | -3148 | -3512 | |
| 高知県 | -265 | -248 | 285 | 68 | -649 | -586 | -1109 | -1460 | -2463 | -3491 | -4542 | -4321 | -2178 | -782 | -1439 | -1939 | -1780 | -2179 | |
| 福岡県 | 9829 | 7278 | 4300 | 4270 | 3638 | 4001 | 2532 | 2413 | 1584 | 3122 | -2125 | -3286 | 469 | 2673 | 9719 | 8667 | 5825 | 3900 | |
| 佐賀県 | -1436 | -1576 | -1665 | -1434 | -2378 | -2249 | -1423 | -2311 | -2103 | -2596 | -2734 | -2061 | -1909 | -1588 | -768 | -1370 | -1743 | -2269 | |
| 長崎県 | -6240 | -6817 | -5230 | -4610 | -4845 | -4929 | -5207 | -5833 | -8221 | -9600 | -10064 | -8799 | -5886 | -4863 | -4333 | -4906 | -5892 | -5853 | |
| 熊本県 | -361 | -834 | -1384 | -465 | -1417 | -2633 | -3081 | -2169 | -3901 | -4194 | -5135 | -3967 | -4261 | -2272 | -396 | -942 | -2683 | -2861 | |
| 大分県 | -1458 | -2117 | -1293 | -1812 | -2245 | -1727 | -1590 | -328 | -2016 | -1457 | -845 | -1780 | -2280 | -2043 | -807 | -1660 | -2562 | -2648 | |
| 宮崎県 | -2453 | -2614 | -1133 | -2302 | -2980 | -2956 | -2048 | -2611 | -3665 | -3678 | -4744 | -4274 | -2286 | -2147 | -1195 | -2165 | -2740 | -3185 | |
| 鹿児島県 | -1120 | -2170 | -920 | -345 | -2590 | -2662 | -2780 | -2628 | -4478 | -6427 | -7075 | -7366 | -3757 | -2985 | -1377 | -3599 | -3739 | -4559 | |
| 沖縄県 | -377 | 837 | 2411 | 2104 | 617 | 1457 | 2087 | 2877 | 2002 | -591 | -2196 | -3220 | 801 | 416 | 3147 | 1115 | 31 | -37 |
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 lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <title>人口</title> | |
| <div class="container"></div> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| //var gDataset; | |
| d3.csv("choka.csv", function(error, dataset) { | |
| var w = 1200; | |
| var h = 600; | |
| var container = d3.select('.container'); | |
| var svg = container.append('svg') | |
| .attr('width', w) | |
| .attr('height', h); | |
| // background fill | |
| svg.append('rect') | |
| .attr('class', 'background') | |
| .attr('width', '100%') | |
| .attr('height', '100%') | |
| .attr('fill', 'ivory'); | |
| console.log(dataset); | |
| //gDataset = dataset; | |
| // set category label | |
| //var categoryLabels = ['biscuit', 'chocolate']; | |
| var categoryLabels = Object.keys(dataset[0]); | |
| categoryLabels.some(function(v, i){ | |
| if (v === 'ken') { categoryLabels.splice(i, 1);} | |
| }); | |
| //nendailavel-console.log(categoryLabels); | |
| svg.selectAll('text.categoryLabel') | |
| .data(categoryLabels) | |
| .enter() | |
| .append('text') | |
| .attr('class', 'categoryLabel') | |
| .attr('x', function(d, i){return (i + 0.5) * w / categoryLabels.length;}) | |
| .attr('y', 20) | |
| .attr('text-anchor', 'middle') | |
| .attr('font-size', 9) | |
| .attr('font-family', 'Helvetica') | |
| .attr('font-weight', 'bold') | |
| .attr('value', function(d){return d;}) | |
| .style('cursor', 'pointer') | |
| //.attr('onclick', function(d){return "updateBar('" + d + "')";}) | |
| .text(function(d){return d + '年';}); | |
| d3.selectAll('text.categoryLabel').on('click', function(){ | |
| updateBar(this.getAttribute('value')); | |
| }); | |
| // set ken text | |
| svg.selectAll('text.ken') | |
| .data(dataset) | |
| .enter() | |
| .append('text') | |
| .attr('class', 'ken') | |
| .attr('x', function(d, i){return (i + 0.5) * w / dataset.length;}) | |
| .attr('y', h * 0.8 - 2) | |
| .attr('text-anchor', 'middle') | |
| .attr("font-family","sans-serif") | |
| .attr("font-size","6px") | |
| .text(function(d){return d.ken;}); | |
| //updateBar('chocolate'); | |
| var updateBar = function(category) { | |
| var svg = d3.select('svg'); // svg要素 | |
| //var dataset = gDataset; //svg.selectAll('rect.bar').data; | |
| var chartHeight = h - 430; // グラフの高さ：svgの高さマイナス20(430に変更）ピクセル | |
| var maxvalue = d3.max(dataset, function(d){return +d[category];}); // カテゴリの値の最大値 | |
| console.log(maxvalue); | |
| // 高さをスケールする関数 (0~2500 を 0~chartHeight-20 に収める) | |
| var scaleheight = d3.scale.linear() | |
| .domain([-80000, 0, 80000]) | |
| .range([h * 0.8 - 20, 0, h * 0.8 - 20]); | |
| // 色の彩度をスケールする関数 (0~2500 を 20~80 に収める) | |
| var scaleSaturation = d3.scale.linear() | |
| .domain([-2500, 0, 2500]) | |
| .range([80, 20, 80]); | |
| // barクラスのrectを全選択し、データをセットする | |
| var bar = svg.selectAll('rect.bar') | |
| .data(dataset); | |
| // 作成 | |
| bar.enter() | |
| .append('rect') | |
| .attr('class', 'bar') | |
| .attr('fill', function(d) { return 'none'; }) // 色の初期値はなし | |
| .attr("x", function(d,i){ | |
| return i*(w/dataset.length) | |
| }) | |
| .attr("y", function(d){ | |
| if(d>0){ | |
| return h * 0.8 - 12; // h * 0.8 を基準の高さにする | |
| } else { | |
| return h * 0.8 + 2; // h * 0.8 を基準の高さにする | |
| } | |
| }) | |
| .attr('width', Math.floor(w / dataset.length)) | |
| .attr("height", 0) // 高さの初期値はなし | |
| .on('mouseover', function(){ // マウスオーバーイベント | |
| d3.select(this) | |
| .attr("fill",function(d){ | |
| if (d[category] > 0){ //プラスの場合 | |
| return "orange"; | |
| } else { //マイナスの場合 | |
| return "cyan"; | |
| }}); | |
| }) | |
| .on('mouseout', function(){ // マウスアウトイベント | |
| d3.select(this) | |
| .transition() // アニメーション | |
| .duration(200) // 200ミリセカンド | |
| .attr('fill', function(d) { | |
| if (d[category] > 0) { | |
| // プラスの場合、赤色（彩度変化） | |
| return 'hsl(0, '+ scaleSaturation(d[category]) +'%, 50%)'; | |
| } else { | |
| // マイナスの場合、青色（彩度変化） | |
| return 'hsl(240, '+ scaleSaturation(d[category]) +'%, 50%)'; | |
| } | |
| }); | |
| }) | |
| // 削除 | |
| bar.exit().remove(); | |
| // 更新 | |
| bar.transition() | |
| .delay(function(d,i){return i*50;}) | |
| .duration(300) | |
| .attr('fill', function(d) { | |
| if (d[category] > 0) { | |
| // プラスの場合、赤色（彩度変化） | |
| return 'hsl(0, '+ scaleSaturation(d[category]) +'%, 50%)'; | |
| } else { | |
| // マイナスの場合、青色（彩度変化） | |
| return 'hsl(240, '+ scaleSaturation(d[category]) +'%, 50%)'; | |
| } | |
| }) | |
| // 高さはscaleheigtで計算 | |
| .attr('height', function(d){return scaleheight(d[category]);}) | |
| .attr('y', function(d) { | |
| if (d[category] > 0) { | |
| // プラスの場合のｙ座標 | |
| return h * 0.8 - 12 - scaleheight(d[category]); | |
| } else { | |
| // マイナスの場合のy座標 | |
| return h * 0.8 + 2; | |
| } | |
| }) | |
| }; | |
| d3.select(self.frameElement).style("height", h + "px"); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment