Skip to content

Instantly share code, notes, and snippets.

@nezuQ

nezuQ/data.csv

Last active December 26, 2015 15:59
Show Gist options
  • Save nezuQ/7176279 to your computer and use it in GitHub Desktop.
Save nezuQ/7176279 to your computer and use it in GitHub Desktop.
Download ZIP
「生活保護」保護廃止世帯数（理由、年別） - その他世代
Raw
data.csv
年代 死亡 失そう 世帯主の傷病治癒 世帯員の傷病治癒 働きによる収入の増加・取得 働き手の転入 社会保障給付金の増加 仕送りの増加 親類・縁者等の引取り 施設入所 医療費の他法負担 その他
1986 66 197 1906 87 822 89 137 51 74 16 8 340
1987 39 182 1306 93 820 90 89 42 62 18 10 265
1988 44 210 1410 63 691 69 65 23 51 16 8 275
1989 54 218 1380 54 529 39 44 23 40 13 5 234
1990 49 209 1387 46 490 52 43 27 53 6 5 106
1991 66 228 1077 39 450 43 54 21 43 4 3 101
1992 47 216 1070 34 390 38 40 19 53 12 1 107
1993 48 304 1017 15 323 45 45 11 34 4 2 102
1994 37 338 1086 15 401 36 37 9 35 5 0 105
1995 41 417 1134 24 434 23 52 11 34 8 1 78
1996 37 314 997 15 410 28 43 10 38 5 3 115
1997 36 153 16 8 274 10 52 14 23 2 2 164
1998 40 283 38 7 297 18 54 11 19 6 1 272
1999 37 260 41 9 297 11 39 8 20 7 1 265
2000 45 200 36 9 351 20 63 7 21 5 1 588
2001 51 250 31 5 312 19 63 10 24 10 0 310
2002 57 332 22 5 413 23 74 4 26 7 1 353
2003 85 560 31 3 586 19 81 12 41 11 2 424
2004 75 439 185 4 670 18 86 12 33 10 9 384
2005 84 480 125 6 717 16 98 6 39 6 12 395
2006 85 433 103 5 696 20 88 14 41 11 5 446
2007 97 363 21 2 518 9 67 13 44 8 1 403
2008 95 339 30 2 612 18 75 7 48 10 5 542
2009 151 556 38 3 830 12 167 15 70 31 4 691
2010 229 750 31 0 1335 20 199 19 79 34 10 979
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 12px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
<body>
<div style="text-align:center ;">
<svg></svg>
<br/>
<br/>
<a target="_blank" href="http://www.ipss.go.jp/s-info/j/seiho/seiho.asp" >【データ元】「生活保護」に関する公的統計データ一覧｜国立社会保障・人口問題研究所 - 14.保護廃止世帯数（理由、世帯類型、構造別）</a>
</div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var margin = { top: 20, right: 50, bottom: 40, left: 50 },
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
mainWidth = width * 0.8;
var svg = d3.select("svg");
var g = svg
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("id", "panel")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scale.ordinal()
.rangeRoundBands([0, mainWidth], 0.3,0.5);
var y = d3.scale.linear()
.rangeRound([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var color = d3.scale.category20();
d3.csv("data.csv", function (error, data) {
var columnName = d3.keys(data[0]).filter(function (key) { return key !== "年代"; });
data.forEach(function (d,i) {
d.total = d3.sum(columnName.map(function (name) { return +d[name]; }));
var y0 = d.total;
d.ages = columnName.map(function (name, index) { return {"year":d["年代"], "name": name, "y1": y0, "y0": y0 -= d[name], "total":d.total} });
});
x.domain(data.map(function (d) { return d["年代"]; }));
var maxTotal = d3.max(data, function (d) { return d.total; });
y.domain([0, maxTotal]);
g.append("g")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.attr("class", "x axis")
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", -6)
.attr("dy", -1)
.attr("transform","rotate(-65)");
g.append("g")
.call(yAxis)
.attr("class", "y axis")
.append("text")
.attr("transform", "rotate(-90)")
.attr("x", -5)
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("世帯数")
;
var year = g.selectAll(".year")
.data(data)
.enter().append("g")
.attr("transform", function (d) { return "translate(" + x(d["年代"]) + ",0)"; });
var reason = year.selectAll("g")
.data(function (d) { return d.ages; })
.enter().append("g")
.attr("transform", function (d) { return "translate(0," + y(d.y1) + ")"; })
.attr("class", "reason");
reason.append("rect")
.attr("width", x.rangeBand())
.attr("height", function (d) { return y(d.y0) - y(d.y1); })
.style("fill", function (d, i) { return color(i); })
.attr("class","bar");
var legend = g.selectAll(".legend")
.data(columnName)
.enter().append("g")
.attr("class", "legend")
.attr("transform", function (d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 15)
.attr("width", 15)
.attr("height", 15)
.style("fill", function (d, i) { return color(i); });
legend.append("text")
.attr("x", width - 20)
.attr("y", 7)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function (d) { return d; });
var mouseover = function (d, i) {
var panel = document.getElementById("panel");
var coordinates = d3.mouse(panel);
var infobox = d3.select(panel).append("g")
.datum(d)
.attr("transform", function (d) { return "translate(" + coordinates[0] + "," + coordinates[1] + ")"; })
.attr("class", "infobox");
infobox.append("rect")
.attr("x", 30)
.attr("width", 200)
.attr("height",80)
.style("fill", function (d, i) { return "white"; })
.style("stroke-width", function (d, i) { return "5px"; })
.style("stroke", function (d, i) { return "black"; });
infobox.append("text")
.attr("x", 40)
.attr("y", 20)
.attr("font-weight","bold")
.text(function (d) { return d.name });
var count = d.y1 - d.y0;
var ratio = count / d.total;
infobox.append("text")
.attr("x", 50)
.attr("y", 45)
.text(function (d) { return "世帯数：" + count; });
infobox.append("text")
.attr("x", 50)
.attr("y", 65)
.text(function (d) { return "構成比：" + d3.format("%")(ratio); });
};
var mouseleave = function (d, i) {
svg.selectAll(".infobox")
.remove();
};
d3.selectAll(".reason").on("mouseover", mouseover);
d3.selectAll(".reason").on("mouseleave", mouseleave);
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment