Skip to content

Instantly share code, notes, and snippets.

@ayaeide

ayaeide/.block

Last active April 12, 2017 10:10
Show Gist options
  • Save ayaeide/92734fc9b891b5c40797f6e3a00b7714 to your computer and use it in GitHub Desktop.
Save ayaeide/92734fc9b891b5c40797f6e3a00b7714 to your computer and use it in GitHub Desktop.
Download ZIP
都道府県別 人口の推移
Raw
.block
license: mit
Raw
capital.tsv
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
Raw
index.html
<!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="mainAll.js"></script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
japan.json
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
main.css
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;
}
Raw
main.js
/* --------------------
初期の設定
-------------------- */
/* 描画エリアのサイズ */
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"]);
/* --------------------
データファイルの読み込み
-------------------- */
queue()
.defer(d3.json, "japan.json")
.defer(d3.tsv, "population.tsv")
.defer(d3.tsv, "capital.tsv")
.await(mainFunc);
/* --------------------
ファイル読み込み後に実行
-------------------- */
function mainFunc(_error, _topojson, _population, _capital) {
/* 地図とデータ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";
});
};
renderMap(); //一時的に記述しておく
renderCircle();
};
Raw
mainAll.js
/* --------------------
初期の設定
-------------------- */
/* 描画エリアのサイズ */
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();
};
Raw
population.tsv
date 北海道 青森県 岩手県 宮城県 秋田県 山形県 福島県 茨城県 栃木県 群馬県 埼玉県 千葉県 東京都 神奈川県 新潟県 富山県 石川県 福井県 山梨県 長野県 岐阜県 静岡県 愛知県 三重県 滋賀県 京都府 大阪府 兵庫県 奈良県 和歌山県 鳥取県 島根県 岡山県 広島県 山口県 徳島県 香川県 愛媛県 高知県 福岡県 佐賀県 長崎県 熊本県 大分県 宮崎県 鹿児島県 沖縄県
1920 2359 756 846 962 899 969 1363 1350 1046 1053 1320 1336 3699 1323 1776 724 747 599 583 1563 1070 1550 2090 1069 651 1287 2588 2302 565 750 455 715 1218 1542 1041 670 678 1047 671 2188 674 1136 1233 860 651 1416 572
1925 2499 813 901 1044 936 1027 1438 1409 1090 1119 1394 1399 4485 1417 1850 749 751 598 601 1629 1133 1671 2319 1108 662 1406 3060 2455 584 788 472 722 1238 1618 1095 690 700 1096 687 2302 685 1164 1296 915 691 1472 558
1930 2812 880 976 1143 988 1080 1508 1487 1142 1186 1459 1470 5409 1620 1933 779 757 618 631 1717 1178 1798 2567 1157 692 1553 3540 2646 596 831 489 740 1284 1692 1136 717 733 1142 718 2527 692 1233 1354 946 760 1557 578
1935 3068 967 1046 1235 1038 1117 1582 1549 1195 1242 1529 1546 6370 1840 1996 799 768 647 647 1714 1226 1940 2863 1175 711 1703 4297 2923 620 864 490 747 1333 1805 1191 729 749 1165 715 2756 686 1297 1387 980 824 1591 592
1940 3273 1001 1096 1271 1052 1119 1626 1620 1207 1299 1608 1588 7355 2189 2064 823 758 644 663 1711 1265 2018 3167 1199 704 1730 4793 3221 621 865 484 741 1329 1870 1294 719 730 1179 709 3094 702 1370 1368 973 840 1589 575
1945 3518 1083 1228 1462 1212 1326 1957 1944 1546 1546 2047 1967 3488 1866 2390 954 888 725 839 2121 1519 2220 2858 1394 861 1604 2801 2822 780 936 563 860 1565 1885 1356 836 864 1361 776 2747 830 1319 1556 1125 914 1538 0
1950 4296 1283 1347 1663 1309 1357 2062 2039 1550 1601 2146 2139 6278 2488 2461 1009 957 752 811 2061 1545 2471 3391 1461 861 1833 3857 3310 764 982 600 913 1661 2082 1541 879 946 1522 874 3530 945 1645 1828 1253 1091 1804 915
1955 4773 1383 1427 1727 1349 1354 2095 2064 1548 1614 2263 2205 8037 2919 2473 1021 966 754 807 2021 1584 2650 3769 1486 854 1935 4618 3621 777 1007 614 929 1690 2149 1610 878 944 1541 883 3860 974 1748 1896 1277 1139 2044 801
1960 5039 1427 1449 1743 1336 1321 2051 2047 1514 1578 2431 2306 9684 3443 2442 1033 973 753 782 1982 1638 2756 4206 1485 843 1993 5505 3906 781 1002 599 889 1670 2184 1602 847 919 1501 855 4007 943 1760 1856 1240 1135 1963 883
1965 5172 1417 1411 1753 1280 1263 1984 2056 1522 1606 3015 2702 10869 4431 2399 1025 980 751 763 1958 1700 2913 4799 1514 853 2103 6657 4310 826 1027 580 822 1645 2281 1544 815 901 1446 813 3965 872 1641 1771 1187 1081 1854 934
1970 5184 1428 1371 1819 1241 1226 1946 2144 1580 1659 3866 3367 11408 5472 2361 1030 1002 744 762 1957 1759 3090 5386 1543 890 2250 7620 4668 930 1043 569 774 1707 2436 1511 791 908 1418 787 4027 838 1570 1700 1156 1051 1729 945
1975 5338 1469 1386 1955 1232 1220 1971 2342 1698 1756 4821 4149 11674 6398 2392 1071 1070 774 783 2018 1868 3309 5924 1626 986 2425 8279 4992 1077 1072 581 769 1814 2646 1555 805 961 1465 808 4293 838 1572 1715 1190 1085 1724 1043
1980 5576 1524 1422 2082 1257 1252 2035 2558 1792 1849 5420 4735 11618 6924 2451 1103 1119 794 804 2084 1960 3447 6222 1687 1080 2527 8473 5145 1209 1087 604 785 1871 2739 1587 825 1000 1507 831 4553 866 1591 1790 1229 1152 1785 1107
1985 5679 1524 1434 2176 1254 1262 2080 2725 1866 1921 5864 5148 11829 7432 2478 1118 1152 818 833 2137 2029 3575 6455 1747 1156 2587 8668 5278 1305 1087 616 795 1917 2819 1602 835 1023 1530 840 4719 880 1594 1838 1250 1176 1819 1179
1990 5644 1483 1417 2249 1227 1258 2104 2845 1935 1966 6405 5555 11856 7980 2475 1120 1165 824 853 2157 2067 3671 6691 1793 1222 2602 8735 5405 1375 1074 616 781 1926 2850 1573 832 1023 1515 825 4811 878 1563 1840 1237 1169 1798 1222
1995 5692 1482 1420 2329 1214 1257 2134 2956 1984 2004 6759 5798 11774 8246 2488 1123 1180 827 882 2194 2100 3738 6868 1841 1287 2630 8797 5402 1431 1080 615 771 1951 2882 1556 832 1027 1507 817 4933 884 1545 1860 1231 1176 1794 1273
2000 5683 1476 1416 2365 1189 1244 2127 2986 2005 2025 6938 5926 12064 8490 2476 1121 1181 829 888 2215 2108 3767 7043 1857 1343 2644 8805 5551 1443 1070 613 762 1951 2879 1528 824 1023 1493 814 5016 877 1517 1859 1221 1170 1786 1318
2005 5628 1437 1385 2360 1146 1216 2091 2975 2017 2024 7054 6056 12577 8792 2431 1112 1174 822 885 2196 2107 3792 7255 1867 1380 2648 8817 5591 1421 1036 607 742 1957 2877 1493 810 1012 1468 796 5050 866 1479 1842 1210 1153 1753 1362
2010 5506 1373 1330 2348 1086 1169 2029 2970 2008 2008 7195 6216 13159 9048 2374 1093 1170 806 863 2152 2081 3765 7411 1855 1411 2636 8865 5588 1401 1002 589 717 1945 2861 1451 785 996 1431 764 5072 850 1427 1817 1197 1135 1706 1393
2012 5460 1350 1303 2325 1063 1152 1962 2943 1992 1992 7212 6195 13230 9067 2347 1082 1163 799 852 2132 2061 3735 7427 1840 1415 2625 8856 5571 1390 988 582 707 1936 2848 1431 776 989 1415 752 5085 843 1408 1807 1185 1126 1690 1409
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment