Skip to content

Instantly share code, notes, and snippets.

@cieloazul310

cieloazul310/.block

Last active March 8, 2017 15:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cieloazul310/37221284bbb66fe07f563b80d0ce040d to your computer and use it in GitHub Desktop.
Save cieloazul310/37221284bbb66fe07f563b80d0ce040d to your computer and use it in GitHub Desktop.
Download ZIP
TopoJSON + Population Census
Raw
.block
license: gpl-3.0
Raw
README.md

国土数値情報行政区域 + 国勢調査

National Land Numerical Information & Population Census

国土数値情報の行政区域データからTopoJSONファイルを作成し、国勢調査の市区町村別の人口総数を表示。

Display the source blob
Display the rendered blob
Raw
ibaraki_h28.topojson
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
ibaraki_population_h27.csv
id class name h27 h22 inc inc_rate area density family_h27 family_h22 family_inc family_rate
08201 2 水戸市 270783 268750 2033 0.7564651163 217.32 1246 117590 112099 5491 4.898348781
08202 2 日立市 185054 193129 -8075 -4.1811431737 225.74 819.8 78625 77965 660 0.846533701
08203 2 土浦市 140804 143839 -3035 -2.1099979839 122.89 1145.8 57257 56663 594 1.0483031255
08204 2 古河市 140946 142995 -2049 -1.4329172349 123.58 1140.5 52571 50465 2106 4.1731893391
08205 2 石岡市 76020 79687 -3667 -4.6017543639 215.53 352.7 27288 27094 194 0.7160256883
08207 2 結城市 51594 52494 -900 -1.714481655 65.76 784.6 18267 17466 801 4.5860529028
08208 2 龍ケ崎市 78342 80334 -1992 -2.4796474718 78.55 997.4 30472 30092 380 1.2627940981
08210 2 下妻市 43293 44987 -1694 -3.7655322649 80.88 535.3 15036 14890 146 0.9805238415
08211 2 常総市 61483 65320 -3837 -5.8741579914 123.64 497.3 20600 20685 -85 -0.4109257916
08212 2 常陸太田市 52294 56250 -3956 -7.0328888889 371.99 140.6 19436 19801 -365 -1.8433412454
08214 2 高萩市 29638 31017 -1379 -4.4459489957 193.58 153.1 11751 11661 90 0.7718034474
08215 2 北茨城市 44412 47026 -2614 -5.5586271424 186.8 237.8 16871 16966 -95 -0.5599434162
08216 2 笠間市 76739 79409 -2670 -3.3623392814 240.4 319.2 28202 27946 256 0.9160523867
08217 2 取手市 106570 109651 -3081 -2.8098238958 69.94 1523.7 43477 42614 863 2.025156052
08219 2 牛久市 84317 81684 2633 3.223397483 58.92 1431 33223 31569 1654 5.2393170515
08220 2 つくば市 226963 214590 12373 5.7658791183 283.72 800 98190 87477 10713 12.2466476903
08221 2 ひたちなか市 155689 157060 -1371 -0.8729148096 99.93 1558 61104 60268 836 1.3871374527
08222 2 鹿嶋市 67879 66093 1786 2.7022528861 106.02 640.2 27450 25199 2251 8.9328941625
08223 2 潮来市 29111 30534 -1423 -4.6603785944 71.4 407.7 10547 10384 163 1.5697226502
08224 2 守谷市 64753 62482 2271 3.6346467783 35.71 1813.3 24867 22854 2013 8.8080861118
08225 2 常陸大宮市 42587 45178 -2591 -5.7350923016 348.45 122.2 16005 16087 -82 -0.5097283521
08226 2 那珂市 54276 54240 36 0.0663716814 97.82 554.9 20025 18889 1136 6.0140822701
08227 2 筑西市 104573 108527 -3954 -3.6433329955 205.3 509.4 35683 35188 495 1.4067295669
08228 2 坂東市 54087 56114 -2027 -3.6122892683 123.03 439.6 17327 16763 564 3.3645528843
08229 2 稲敷市 42810 46895 -4085 -8.7109499947 205.81 208 14453 14809 -356 -2.4039435478
08230 2 かすみがうら市 42147 43553 -1406 -3.2282506372 156.6 269.1 15142 14730 412 2.7970128988
08231 2 桜川市 42632 45673 -3041 -6.6582006875 180.06 236.8 13585 13632 -47 -0.3447769953
08232 2 神栖市 94522 94795 -273 -0.2879898729 146.94 643.3 37221 35901 1320 3.6767778056
08233 2 行方市 34909 37611 -2702 -7.1840684906 222.48 156.9 11115 11346 -231 -2.0359598096
08234 2 鉾田市 48147 50156 -2009 -4.0055028312 207.61 231.9 17430 16810 620 3.6882807852
08235 2 つくばみらい市 49136 44461 4675 10.5148332246 79.16 620.7 18137 15273 2864 18.7520460944
08236 2 小美玉市 50911 52279 -1368 -2.6167294707 144.74 351.7 17491 17207 284 1.6504910792
08302 3 茨城町 32921 34513 -1592 -4.6127546142 121.58 270.8 11356 11187 169 1.5106820417
08309 3 大洗町 16886 18328 -1442 -7.8677433435 23.74 711.3 6661 7021 -360 -5.1274747187
08310 3 城里町 19800 21491 -1691 -7.8684100321 161.8 122.4 7066 7142 -76 -1.0641276953
08341 3 東海村 37713 37438 275 0.7345477857 37.98 993 14494 14113 381 2.699638631
08364 3 大子町 18053 20073 -2020 -10.0632690679 325.76 55.4 6733 7140 -407 -5.700280112
08442 3 美浦村 15842 17299 -1457 -8.4224521649 66.61 237.8 5958 6305 -347 -5.5035685964
08443 3 阿見町 47535 47940 -405 -0.8448060075 71.4 665.8 18801 17969 832 4.6301964494
08447 3 河内町 9168 10172 -1004 -9.8702320094 44.3 207 2950 3004 -54 -1.7976031957
08521 3 八千代町 22021 23106 -1085 -4.6957500216 58.99 373.3 6799 6756 43 0.6364712848
08542 3 五霞町 8786 9410 -624 -6.6312433581 23.11 380.2 2894 2927 -33 -1.127434233
08546 3 境町 24517 25714 -1197 -4.6550517228 46.59 526.2 8061 7923 138 1.7417644832
08564 3 利根町 16313 17473 -1160 -6.6388141704 24.9 655.1 6138 6131 7 0.1141738705
Raw
index.html
<!DOCTYPE html>
<style>
.boundary {
fill: none;
stroke: white;
stroke-width: 1px;
stroke-dasharray: 2,2;
}
.selected {
fill: none;
stroke: #ffed00;
stroke-width: 2px;
}
#info {
position: absolute;
background: #fff;
font-size: 12px;
padding: 3px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border: thin solid #aaa;
border-radius: 6px;
-webkit-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
}
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<svg id="chart"></svg>
<div id="info"></div>
<script>
var q = d3.queue()
.defer(d3.json, "./ibaraki_h28.topojson")
.defer(d3.csv, "./ibaraki_population_h27.csv");
q.await(function(error, json, csv){
if (error) throw error;
for (var x of json.objects.cities.geometries){
var idx = csv.map(function(d){return d.id;}).indexOf(x.properties.N03_007);
x.properties = Object.assign(x.properties, csv[idx]);
}
var svg = d3.select("#chart");
var size = {width: window.innerWidth, height: 500};
svg.attr("width", size.width)
.attr("height", size.height);
var view = {original: 5, center: d3.geoCentroid(topojson.feature(json, json.objects.ibaraki).features[0])};
var projection = d3.geoOrthographic()
.rotate(view.center.map(function(d){return -d;}))
.precision(0.1)
.fitSize([size.width, size.height], topojson.feature(json, json.objects.ibaraki).features[0]);
var path = d3.geoPath()
.projection(projection);
var color = d3.scaleSequential(d3.interpolateRdBu)
.domain([10,-10]);
var baselayer = svg.append("g");
var overlay = svg.append("g");
var info = d3.select("#info");
var createInfo = function(prop){
var title = prop.N03_003 === null ? prop.N03_004 :
prop.N03_004 === null ? prop.N03_003 : prop.N03_003 + prop.N03_004;
var value = d3.format("+.4")(+prop.inc_rate) + "%";
var smaller = d3.format(",")(prop.h27) + "人(" + d3.format("+,")(prop.inc) + "人)";
return "<small>" + prop.N03_001 + "</small><br><strong>" + title + "</strong><br>" + value + "<br><small>" + smaller + "</small>";
}
baselayer.selectAll(".cities")
.data(topojson.feature(json, json.objects.cities).features)
.enter()
.append("path")
.attr("class", "cities")
.attr("d", path)
.attr("fill", function(d){return color(+d.properties.inc_rate);})
.on("mouseover", function(d){
overlay.append("path")
.datum(d)
.attr("class", "selected")
.attr("d", path);
info.html(createInfo(d.properties));
})
.on("mousemove", function(){
var mouse = d3.mouse(document.getElementById("chart"));
info.style("display", "inline")
.style("left", mouse[0] + 45 + "px")
.style("top", mouse[1] + 5 + "px");
})
.on("mouseout", function(){
overlay.selectAll(".selected")
.remove();
info.style("display", "none")
});
baselayer.append("path")
.datum(topojson.mesh(json, json.objects.cities, function(a, b){
return a !== b;
}))
.attr("class", "boundary")
.attr("d", path);
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment