Skip to content

Instantly share code, notes, and snippets.

@cieloazul310

cieloazul310/.block

Last active March 10, 2017 14:38
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/d7f4045a2e0f1696dbb1a0207eb6b0a0 to your computer and use it in GitHub Desktop.
Save cieloazul310/d7f4045a2e0f1696dbb1a0207eb6b0a0 to your computer and use it in GitHub Desktop.
Download ZIP
Sortable Simple Bar Chart
Raw
.block
license: gpl-3.0
Raw
README.md

国勢調査 人口集計2015年

Population Census 2010-2015

2015年の国勢調査の茨城県内の市町村別の人口総数をシンプルな棒グラフで表示。 背景をクリックすることで2010年のデータと2015年のデータを切り替えられます。

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>
.selected {
fill: none;
stroke: orange;
stroke-width: 1px;
}
.chart-title {
font-size: 60px;
font-weight: 100;
}
.legend-title {
font-size: 11px;
}
.block text {
font-size: 11px;
}
#info {
position: absolute;
display: none;
background: #fff;
font-size: 14px;
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/d3-scale-chromatic.v1.min.js"></script>
<svg id="chart"></svg>
<div id="info"></div>
<script>
d3.csv("./ibaraki_population_h27.csv", function(error, csv) {
if (error) throw error;
for (var x of csv) {
x.h27 = parseInt(x.h27, 10);
x.h22 = parseInt(x.h22, 10);
x.inc = parseInt(x.inc, 10);
x.inc_rate = parseFloat(x.inc_rate);
x.area = parseFloat(x.area);
x.density = parseFloat(x.density);
}
var svg = d3.select("#chart");
var size = {
width: window.innerWidth,
height: 500
};
var margin = {
top: 10,
right: 20,
bottom: 60,
left: 60
};
svg.attr("width", size.width)
.attr("height", size.height);
var bg = svg.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", size.width)
.attr("height", size.height)
.attr("fill", "white")
.property("checked", true)
.on("click", change);
var xScale = d3.scaleBand()
.domain(csv.sort(function(a, b) {
return b.h22 - a.h22;
}).map(function(d) {
return d.name;
}))
.range([margin.left, size.width - margin.right])
.padding(0.4);
var yScale = d3.scaleLinear()
.domain([0, d3.max(csv, function(d) {
return Math.max(d.h27, d.h22);
})])
.range([size.height - margin.bottom, margin.top])
.nice();
var xAxis = d3.axisBottom(xScale);
var yAxis = d3.axisLeft(yScale);
var g = svg.append("g");
g.append("g")
.attr("class", "axis axis-x")
.attr("transform", "translate(0," + (size.height - margin.bottom) + ")")
.call(xAxis)
.selectAll("text")
.attr("dy", ".4em")
.attr("transform", "rotate(45)")
.style("text-anchor", "start");
g.append("g")
.attr("class", "axis axis-y")
.attr("transform", "translate(" + margin.left + ",0)")
.call(yAxis);
var color = d3.scaleSequential(d3.interpolateRdBu)
.domain([10, -10]);
var legendWidth = 220;
var baselayer = svg.append("g");
var overlay = svg.append("g");
var legend = svg.append("g")
.attr("transform", "translate(" + (size.width - margin.right - legendWidth) + ",100)");
var info = d3.select("#info");
function createInfo(d) {
var title = d.name;
var value = d3.format("+.2f")(d.inc_rate) + "%";
var smaller = "2010: " + d3.format(",")(d.h22) + "人<br>" +
"2015: " + d3.format(",")(d.h27) + "人";
return "<strong>" + title + " " + value + "</strong><br><small>" + smaller + "</small>";
}
baselayer.selectAll(".bar")
.data(csv)
.enter()
.append("rect")
.attr("class", function(d) {
return "bar " + Math.round(d.inc_rate);
})
.attr("x", function(d) {
return xScale(d.name);
})
.attr("y", function(d) {
return yScale(d.h22);
})
.attr("width", xScale.bandwidth())
.attr("height", function(d) {
return size.height - margin.bottom - yScale(d.h22);
})
.attr("fill", function(d) {
return color(d.inc_rate);
})
.on("mouseover", function(d) {
overlay.append("rect")
.datum(d)
.attr("class", "selected")
.attr("x", function(d) {
return xScale(d.name);
})
.attr("y", function(d) {
return yScale(d.h22);
})
.attr("width", xScale.bandwidth())
.attr("height", function(d) {
return size.height - margin.bottom - yScale(d.h22);
});
info.html(createInfo(d));
})
.on("mousemove", function() {
var mouse = d3.mouse(document.getElementById("chart"));
info.style("display", "inline")
.style("left", Math.min((mouse[0] + 20), (size.width - 150)) + "px")
.style("top", mouse[1] - 65 + "px");
})
.on("mouseout", function() {
overlay.selectAll(".selected")
.remove();
info.style("display", "none")
});
overlay.append("text")
.attr("class", "chart-title")
.attr("x", size.width - margin.right)
.attr("y", margin.top)
.attr("text-anchor", "end")
.attr("dominant-baseline", "text-before-edge")
.text("2010");
legend.append("text")
.attr("class", "legend-title")
.attr("x", legendWidth / 2)
.attr("dy", "-.5em")
.attr("text-anchor", "middle")
.text("5年間の人口増減率(%)");
legend.selectAll(".block")
.data(d3.range(-10, 12, 2))
.enter()
.append("g")
.attr("class", "block")
.attr("transform", function(d, i) {
return "translate(" + (legendWidth / 11) * i + ",0)";
})
.append("rect")
.attr("x", 2)
.attr("y", 2)
.attr("width", (legendWidth / 11) - 4)
.attr("height", (legendWidth / 11) - 4)
.attr("fill", function(d) {
return color(d);
});
legend.selectAll(".block")
.append("text")
.attr("x", (legendWidth / 22))
.attr("y", (legendWidth / 22))
.attr("text-anchor", "middle")
.attr("dominant-baseline", "middle")
.attr("transform", "translate(0," + (legendWidth / 11) + ")")
.text(function(d) {
return d !== 0 ? d3.format("+")(d) : 0;
});
var sortTimeout = setTimeout(function() {
svg.call(change);
}, 2500);
function change() {
clearTimeout(sortTimeout);
xScale.domain(csv.sort(function(a, b) {
return bg.property("checked") ? b.h27 - a.h27 : b.h22 - a.h22;
}).map(function(d) {
return d.name;
}));
baselayer.selectAll(".bar")
.transition()
.delay(500)
.duration(500)
.attr("y", function(d) {
return bg.property("checked") ? yScale(d.h27) : yScale(d.h22);
})
.attr("height", function(d) {
return bg.property("checked") ? size.height - margin.bottom - yScale(d.h27) : size.height - margin.bottom - yScale(d.h22);
})
.transition().duration(500)
.attr("x", function(d) {
return xScale(d.name);
});
overlay.select("text")
.transition().delay(1500)
.text(bg.property("checked") ? "2015" : "2010");
svg.select(".axis-x")
.transition()
.delay(1000)
.duration(500)
.call(xAxis);
bg.property("checked", !bg.property("checked"));
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment