Skip to content

Instantly share code, notes, and snippets.

@n1n9-jp
Last active August 29, 2015 14:04
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 n1n9-jp/3470f6bf0980cf098024 to your computer and use it in GitHub Desktop.
Save n1n9-jp/3470f6bf0980cf098024 to your computer and use it in GitHub Desktop.
Foreigners by Nationality in Japan
Year Brazil China Indonesia N&S Korea Peru Philippines Thailand U.K. U.S.A. Viet Nam Others
1920 16 24130 0 40755 12 0 24 4188 3966 0 4970
1930 25 44051 0 419009 19 0 25 3144 3640 0 8067
1940 56 45825 0 1241315 34 75 169 1693 4755 0 10364
1950 0 39965 0 464306 0 0 0 910 4995 0 18747
1955 0 40500 0 539635 0 0 0 1329 7858 0 8114
1960 0 40505 0 516211 0 0 0 1491 10688 0 9624
1965 0 43945 0 520465 0 0 0 1940 13550 0 13130
1970 0 44765 0 519997 0 0 0 0 17548 0 21943
1975 0 39521 0 558833 0 0 0 0 18755 0 24822
1980 0 43748 0 557672 0 0 0 0 18590 0 29521
1985 0 60549 0 571234 0 0 0 0 25170 0 49084
1990 42273 109229 3076 567598 6181 36079 7389 6464 33317 5097 69694
1995 133609 175640 6322 560414 27112 68496 20628 8789 38954 7942 92420
2000 188355 253096 14610 529408 33608 93662 23967 10411 38804 12965 111659
2005 215487 353437 18379 472711 40444 126486 27129 10183 38581 20901 231767
2010 153166 460459 18539 423273 36776 145950 29716 9872 38327 29843 302116
Year Brazil China Indonesia N&S Korea Peru Philippines Thailand U.K. U.S.A. Viet Nam Others
1920 6 5090 0 4712 6 0 7 1418 1669 0 1957
1930 10 9821 0 121508 7 0 12 1173 1688 0 2671
1940 22 12136 0 497019 14 21 38 787 2214 0 4008
1950 0 17732 0 199876 0 0 0 466 2544 0 9705
1955 0 18272 0 243251 0 0 0 658 3686 0 3712
1960 0 18441 0 237544 0 0 0 773 5079 0 4281
1965 0 19690 0 244305 0 0 0 1105 6370 0 5530
1970 0 20452 0 246822 0 0 0 0 8188 0 9373
1975 0 18529 0 269025 0 0 0 0 8397 0 10842
1980 0 20771 0 272129 0 0 0 0 8353 0 13758
1985 0 30245 0 282984 0 0 0 0 11312 0 25204
1990 15731 54439 1179 287268 1888 29695 4159 2530 13974 2050 28067
1995 57851 91600 2061 288885 11451 54447 13007 3332 15438 3594 31921
2000 85109 142555 3869 280363 15313 77107 17463 3725 14708 6594 42693
2005 97148 212521 6037 257113 19037 102711 20555 2944 13887 10316 86592
2010 70751 279207 6361 233542 17693 115358 22882 2488 13386 14274 129795
<!DOCTYPE html>
<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="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/colorbrewer.v1.min.js"></script>
<script src="http://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>
Year Brazil China Indonesia N&S Korea Peru Philippines Thailand U.K. U.S.A. Viet Nam Others
1920 10 19040 0 36043 6 0 17 2770 2297 0 3013
1930 15 34230 0 297501 12 0 13 1971 1952 0 5396
1940 34 33689 0 744296 20 54 131 906 2541 0 6356
1950 0 22233 0 264430 0 0 0 444 2451 0 9042
1955 0 22228 0 296384 0 0 0 671 4172 0 4402
1960 0 22064 0 278667 0 0 0 718 5609 0 5343
1965 0 24255 0 276160 0 0 0 835 7180 0 7600
1970 0 24313 0 273175 0 0 0 0 9360 0 12570
1975 0 20992 0 289808 0 0 0 0 10358 0 13980
1980 0 22977 0 285543 0 0 0 0 10237 0 15763
1985 0 30304 0 288250 0 0 0 0 13858 0 23880
1990 26542 54790 1897 280330 4293 6384 3230 3934 19343 3047 41627
1995 75758 84040 4261 271529 15661 14049 7621 5457 23516 4348 60499
2000 103246 110541 10741 249045 18295 16555 6504 6686 24096 6371 68966
2005 118339 140916 12342 215598 21407 23775 6574 7239 24694 10585 145175
2010 82415 181252 12178 189731 19083 30592 6834 7384 24941 15569 172321
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment