#Japan Prefectural Map
forked from sugi2000's block: Japan Prefectural Map
Created
April 11, 2018 21:55
-
-
Save yudataguy/5230e34c542a84bdd76dbbeceff27a53 to your computer and use it in GitHub Desktop.
Japan Prefectural Map
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
| 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="//d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <script src="//d3js.org/topojson.v1.min.js"></script> | |
| <title>都道府県マップ</title> | |
| <style> | |
| .keys.selected { | |
| font-weight: bold; | |
| } | |
| #tooltip { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| background-color: #f0f0f0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"></div> | |
| <script type="text/javascript"> | |
| var mapfilepath = 'japan.topojson'; | |
| var csvpath = 'choka.csv'; | |
| var japan; | |
| var keys; // 項目名の配列 | |
| var currentKey; // 現在選択中の項目名 | |
| var zoom = d3.behavior.zoom() | |
| .scaleExtent([1, 8]) | |
| .on("zoom", zoomed); | |
| var w = 960; | |
| var h = 780; | |
| var container = d3.select('.container'); | |
| var svg = container.append('svg') | |
| .attr('width', w) | |
| .attr('height', h) | |
| .append("g"); | |
| var g = svg.append("g"); | |
| // ツールチップ | |
| var tooltip = d3.select("body") | |
| .append("div") | |
| .attr("id", "tooltip") | |
| .style("opacity", 0); | |
| svg.call(zoom) | |
| .call(zoom.event); | |
| var clickKey = function() { | |
| currentKey = d3.select(this).attr('value'); | |
| d3.selectAll('.keys') | |
| .classed("selected", function(){return (d3.select(this).attr('value') === currentKey)}); | |
| updateMap(); | |
| } | |
| // データの数値から色に変換する関数 | |
| var color = d3.scale.linear() | |
| .domain([-80000, -8000, 0, 8000, 80000]) | |
| .range(['red', 'orange', 'yellow', 'cyan', 'blue']); | |
| // マップの更新 | |
| var updateMap = function() { | |
| g.selectAll('path') | |
| .transition() | |
| .duration(1000) | |
| .style('fill', function(d) { | |
| return color(d.properties[currentKey]); | |
| }); | |
| } | |
| // 凡例を追加 | |
| svg.selectAll('rect.legend') | |
| .data(color.domain()) | |
| .enter() | |
| .append('rect') | |
| .attr('class', 'legend') | |
| .attr('x', 65) | |
| .attr('y', function(d, i) { return 100 + 20 * i; }) | |
| .attr('width', 20) | |
| .attr('height', 20) | |
| .attr('fill', function(d) { return color(d); }); | |
| svg.selectAll('text.legend') | |
| .data(color.domain()) | |
| .enter() | |
| .append('text') | |
| .attr('x', 60) | |
| .attr('y', function(d, i) { return 100 + 20 * i + 12; }) | |
| .attr('font-size', 9) | |
| .attr('text-anchor', 'end') | |
| .text(function(d) { return d + '人'; }); | |
| // mapファイルの読み込み | |
| d3.json(mapfilepath, function(error, collection) { | |
| var japan = topojson.feature(collection, collection.objects.japan).features; | |
| // setup map | |
| var projection = d3.geo.mercator() | |
| .scale(1500) | |
| .center([137, 34.5]) | |
| //.center(d3.geo.centroid(collection)) | |
| .translate([w / 2, h / 2]); | |
| var path = d3.geo.path().projection(projection); | |
| g.selectAll('path') | |
| .data(japan) | |
| .enter() | |
| .append('path') | |
| .attr('d', path) | |
| .attr('ken', function(d) { | |
| return d.properties.name_local; | |
| }) | |
| .style('fill', function(d, i) { | |
| return 'white'; | |
| }) | |
| .style('cursor', 'pointer') | |
| .on('mouseover', function(d){ | |
| tooltip.style("opacity", 1) | |
| .html(d.properties['name_local']+'<br/>'+d.properties[currentKey]+"人") | |
| .style("left", (d3.event.pageX + 10) + "px") | |
| .style("top", (d3.event.pageY - 40) + "px"); | |
| var self = d3.select(this); | |
| self.style('fill', 'red'); | |
| }) | |
| .on('mousemove', function(d){ | |
| tooltip | |
| .style("left", (d3.event.pageX + 10) + "px") | |
| .style("top", (d3.event.pageY - 40) + "px"); | |
| }) | |
| .on('mouseout', function(d, i){ | |
| tooltip.style("opacity", 0); | |
| var self = d3.select(this); | |
| self.transition() | |
| .duration(300) | |
| .style('fill', function(d, i) { | |
| return color(d.properties[currentKey]); | |
| }); | |
| }) | |
| ; | |
| // mapファイルを読み込んだ後にcsvファイルを読み込み | |
| d3.csv(csvpath, function(error, rows) { | |
| // ken以外の項目名を取り出す | |
| keys = Object.keys(rows[0]).filter(function(key){ return key !== 'ken'; }); | |
| svg.selectAll('.keys') | |
| .data(keys) | |
| .enter() | |
| .append('text') | |
| .attr('class', 'keys') | |
| .attr('x', w - 100) | |
| .attr('y', function(d,i){return 10 + i * h / keys.length; }) | |
| .attr('value', function(d){return d;}) | |
| .attr('font-size', 10) | |
| .style('cursor', 'pointer') | |
| .text(function(d){return d + '年';}) | |
| .on('click', clickKey); | |
| // 人口超過データを追加する | |
| for (var i = 0; i < rows.length; i++) { | |
| var municipality = japan.filter(function(obj) { | |
| return (obj.properties['name_local'] === rows[i]['ken']); | |
| })[0]; | |
| console.log('municipality', i, municipality, rows[i]); | |
| if (municipality) { | |
| // 各項目の数値を、pathのpropertiesに代入する | |
| keys.forEach(function(key){ | |
| municipality.properties[key] = rows[i][key]; | |
| }); | |
| } | |
| } | |
| // データを読み込んだので、現在の項目名を最初の項目名にして、マップの色を更新 | |
| currentKey = keys[0]; | |
| updateMap(); | |
| }); | |
| }); | |
| // ズーム用関数 | |
| function zoomed() { | |
| g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); | |
| } | |
| // blocks公開用の高さ調節 | |
| 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