都道府県別転入超過数

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="https://d3js.org/topojson.v1.min.js"></script>
    <title>人口マップ</title>
  </head>
  <body>
    <div class="container"></div>

//半透明rect
  rect = svg.append("rect")
            .attr("width",124)
            .attr("height", 160)
            .style("opacity", 0.2)
            .attr("fill","white")
            .attr('x',13)
            .attr('y',130);

// 凡例を追加
svg.selectAll('circle.legend')
  .data([80000, 8000, 0, -8000, -80000])
  .enter()
  .append('circle')
  .attr("cy", function(d, i) { return 158+ 25 * i; })
  .attr('cx',45)
  .attr("r", 8)
  .attr('class', 'legend')
  .attr('width', 20)
  .attr('height', 20)
  .attr('fill', function(d) { return color(d); });
svg.selectAll('text.legend')
  .data([80000, 8000, 0, -8000, -80000])
  .enter()
  .append('text')
  .attr('x', 70)
  .attr('y', function(d, i) { return 158 + 25 * i + 5; })
  .attr('font-size', 9)
  .attr('fill','white')
  .text(function(d) { return d + '人'; });
// csvファイルの読み込み
d3.csv(csvpath, function(error, dataset) {
	// 背景色
  g.append('rect')
	    .attr('class', 'background')
      .attr('x', - w * 2)
      .attr('y', - h * 2)
	    .attr('width', w * 4)
	    .attr('height', h * 4)
	    .attr('fill', 'darkslategray');
	console.log(dataset);
	jinkouData = dataset;
	
	
	
	
	// 年ラベルの設定
	years = Object.keys(dataset[0]);
	years.some(function(v, i){
		if (v === 'ken') { years.splice(i, 1); }
	});
	svg.selectAll('text.year')
		.data(years)
		.enter()
		.append('text')
		.attr('class', 'year')
		.attr('x',  function(d, i){return (i + 0.5) * w / years.length;})
		.attr('y',25)
		.attr('text-anchor', 'middle')
		.attr('font-size', 9)
		.attr('font-family', 'Helvetica')
		.attr('year', function(d){return d;})
		.style('cursor', 'pointer')
		.text(function(d){return d + '年';});
  // クリックイベントの設定
	d3.selectAll('text.year').on('click', function(){
    currentYear = this.getAttribute('year');
		updateColor();
	});
  // csvファイルを読み込んだ後にmapファイルを読み込み
  d3.json(mapfilepath, loadmapCallback);
});
// mapファイル読み込みのコールバック関数（読み込み終了後に呼び出される）
var loadmapCallback = function(error, collection) {
		if (error) {
			return console.warn(error);
		}
    var japan = topojson.feature(collection, collection.objects.japan).features;
    // setup map
    var projection = d3.geo.mercator()
                       .scale(1500)
                       .center([137, 34])
                       //.center(d3.geo.centroid(collection))
                       .translate([w / 2, h / 2 - 50]);
    var path = d3.geo.path().projection(projection);
    g.selectAll('path')
      .data(japan)
      .enter()
      .append('path')
      .attr('d', path)
      .attr('ken', function(d) {
        return d.properties.name_local;
      })
      //.attr('KENCODE', function(d, i) {
      //  return i;
		  //})
      .style('fill', function(d, i) {
        return 'lightgray';
      })
      .style('cursor', 'pointer')
      .on('mouseover', function(){
      	var self = d3.select(this);
      	self.style('fill', 'lightcoral');
      })
      .on('mouseout', function(d, i){
      	var self = d3.select(this);
      	self.transition()
      	  .duration(300)
          .style('fill', function(d, i) {
            return color(self.attr('year-' + currentYear));
          });
      })
      ;
      // jinkouDataの各年のデータをpathの属性に追加する
      svg.selectAll('path')
        .each(function() {
          var p = d3.select(this);
          var ds = jinkouData.filter(function(d){
            //console.log('ken', d['ken']);
            return (d['ken'] === p.attr('ken'));
          });
          if (ds.length > 0) {
            var d = ds[0];
            for (var year of years) {
              p.attr('year-' + year, d[year]);
            }
          }
        })
      // 最初の年で色を更新する
      currentYear = years[0];
      updateColor();
};
function zoomed() {
  g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
d3.select(self.frameElement).style("height", h + "px");
</script>

</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v1.min.js