Foreigners by Nationality in Japan

国籍別外国人数

国勢調査による日本に常住している外国人の人口

データ

日本に住んでいる外国人の人口 ( http://www.stat.go.jp/library/faq/faq02/faq02a03.htm )
平成22年国勢調査最終報告書「日本の人口・世帯」統計表 ( http://www.e-stat.go.jp/SG1/estat/GL08020103.do?toGL08020103&tclassID=000001053739&cycleCode=0&requestSender=search )

<!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="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