国勢調査による日本に常住している外国人の人口
xxxxxxxxxx
<html>
<head>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
#wrap {
width: 960px;
margin: 0 auto;
}
.bar {
fill: #FFF;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
</style>
<title>Foreigners by Nationality in Japan</title>
</head>
<body>
<div id="wrap">
<form>
<label><input type="radio" name="gender" value="all" checked>すべて</label>
<label><input type="radio" name="gender" value="male">男性のみ</label>
<label><input type="radio" name="gender" value="female">女性のみ</label>
</form>
<div id="main"></div>
</div>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/colorbrewer.v1.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js" charset="utf-8"></script>
<script>
/* --------------------
Variables
-------------------- */
var genderArray = new Array(3);
var genderIndex = 0;
var margin = {top: 40, right: 120, bottom: 60, left: 60},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var xScale = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var yScale = d3.scale.linear()
.rangeRound([height, 0]);
//Brazil,China,Indonesia,Korea,Peru,Philippines,Thailand,U.K.,U.S.A.,Viet Nam,Others
var colorArray = ["#a97b48", "#f0b663", "#f2dd92", "#cfb284", "#89aa80", "#f2e5cf", "#b7d992", "#82adb5", "#8b9c88", "#abb69e", "#DDD"];
var colorScale = d3.scale.ordinal()
.range( colorArray );
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.tickFormat(d3.format(".2s"));
var svg = d3.select("#main").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
/* --------------------
Load external data
-------------------- */
queue()
.defer(d3.tsv, "all.tsv")
.defer(d3.tsv, "male.tsv")
.defer(d3.tsv, "female.tsv")
.await(loadReady);
/* --------------------
Drawing
-------------------- */
function loadReady(_error, _all, _male, _female) {
if (_error){ console.log(_error); }
colorScale.domain( d3.keys(_all[0]).filter(function(key) { return key !== "Year"; }) );
genderArray = [_all, _male, _female];
for (var i=0; i<genderArray.length; i++) {
genderArray[i].forEach(function(d) {
var y0 = 0;
d.barHeight = colorScale.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
d.total = d.barHeight[d.barHeight.length - 1].y1;
});
}
xScale.domain(genderArray[0].map(function(d) { return d.Year; }));
yScale.domain([0, d3.max(genderArray[0], function(d) { return d.total; })]);
/*
Axis
*/
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Population");
/*
Legend
*/
var legend = svg.selectAll(".legend")
.data( colorScale.domain().slice().reverse() )
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width + 10)
.attr("width", 30)
.attr("height", 15)
.style("fill", colorScale);
legend.append("text")
.attr("x", width + 44)
.attr("y", 10)
.attr("dy", "0.1em")
.style("text-anchor", "start")
.text(function(d) { return d; });
drawChart();
};
function drawChart() {
var state = svg.selectAll(".state").data( genderArray[genderIndex] );
state
.enter().append("g")
.attr("class", "state")
.attr("transform", function(d) { return "translate(" + xScale(d.Year) + ",0)"; });
var blocks = state.selectAll("rect").data( function(d) { return d.barHeight; });
blocks.enter()
.append("rect")
.attr("class", "bar");
blocks.transition()
.ease("linear")
.duration(500).delay( function(d,i){return i*50}).ease("linear")
.attr("width", xScale.rangeBand() )
.attr("y", function(d) { return yScale(d.y1); })
.attr("height", function(d) { return yScale(d.y0) - yScale(d.y1); })
.style("fill", function(d) { return colorScale(d.name); });
}
function change() {
if ( this.name=='gender') {
switch (this.value){
case "all":
genderIndex = 0;
drawChart();
break;
case "male":
genderIndex = 1;
drawChart();
break;
case "female":
genderIndex = 2;
drawChart();
break;
}
}
}
d3.selectAll("input").on("change", change);
</script>
</body>
</html>
Modified http://d3js.org/d3.v3.min.js to a secure url
Modified http://d3js.org/colorbrewer.v1.min.js to a secure url
Modified http://d3js.org/queue.v1.min.js to a secure url
https://d3js.org/d3.v3.min.js
https://d3js.org/colorbrewer.v1.min.js
https://d3js.org/queue.v1.min.js