日本都道府県別転入超過数

<!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>
    
    
     <style>
      circle.playing {
        fill: #ffffff;
        opacity:0.2;

};
      
    
    </style>
  </head>
  <body>
    <div class="container"></div>
<canvas id="mycanvas" width="224" height="224"></canvas>

var isPlaying = false; // 再生中かどうかを判定するフラグ

var zoom = d3.behavior.zoom()
    .scaleExtent([1, 8])
    .on("zoom", zoomed);
var w = 1000;
var h = 1000;
var container = d3.select('.container');
var svg = container.append('svg')
    .attr('width', w)
    .attr('height', h)
    .append("g");

var g = svg.append("g");
svg.call(zoom)
    .call(zoom.event);
    
// データの数値から色に変換する関数
var color = d3.scale.linear()
    .domain([-80000, -8000, 0,8000,80000])
    .range(['tomato', 'gold', 'snow',  'yellowgreen','cornflowerblue']);
    
    
    var sizeScale = d3.scale.linear()
    .domain([-80000, 0, 80000])
    .range([0.005, 1.0, 5.0]);

// 再生・停止
var startStop = function() {
  console.log("startStop");

// 再生フラグを反転
  isPlaying = !isPlaying;

// 再生ボタンのクラスのオンオフ
  svg.selectAll('circle.play-button')
    .classed('playing', isPlaying);

// 再生開始
  if (isPlaying) {
    if (years.indexOf(currentYear.toString()) === years.length - 1) { //最終年なら最初年に
      currentYear = years[0];
    } else {
      currentYear++;
    }
    updateYear();
  }
};

// 現在選択の年を変更した時に呼び出される関数（全国の都道府県の色を更新）
var updateYear = function() {
  console.log("updateYear: " + currentYear + ', ' + years.indexOf(currentYear));

//年ラベル背景ボックスを移動する
  svg.selectAll('rect.year-rect')
    .transition()
    .duration(300)
    .attr('x', w / years.length * years.indexOf(currentYear.toString()));  
    
   // 都道府県の色を更新する
  var transitions = 0;
  g.selectAll('path')
    .transition()
    .duration(1000)
    .style('fill', function() {
      return color(d3.select(this).attr('year-' + currentYear));
    })
    .attr('transform', function(d) {
      var self = d3.select(this);
      return 'translate(' + self.attr('center-x') + ', ' + self.attr('center-y') +
      ')scale(' + sizeScale(d3.select(this).attr('year-' + currentYear)) + ')' +
      'translate(-' + self.attr('center-x') + ', -' + self.attr('center-y') + ')';
    })
    .each('start', function() { // トランジションの開始時の設定
      transitions++;  // 要素の数をカウントアップ
    })
    .each('end', function() { // トランジション終了時の関数
      if (--transitions === 0) { // 要素の数をカウントダウン、ゼロなら全ての終了時
        //console.log('done');
        if (isPlaying) { // 再生中なら年を更新
          if (years.indexOf(currentYear.toString()) === years.length - 1) { //最終年なら停止
            startStop();
          } else {
            currentYear++;
            updateYear();
          }
        }
      }
    })
    ;
};

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

rect = svg.append("rect")
            .attr("width",300)
            .attr("height", 50)
            .style("opacity", 0.2)
            .attr("fill","white")
            .attr('x',0)
            .attr('y',0);
            
 svg.append("text")
　          .text("都道府県別転入超過数")
　          .attr('x',10)
            .attr('y',33)
            .attr('fill','white')
            .attr('font-size', 20)
            .attr('font-family','monospace');
            
 svg.append("text")
　          .text("1997-2014")
　          .attr('x',220)
            .attr('y',33)
            .attr('fill','white')
            .attr('font-size', 12)
            .attr('font-family','ＭＳ ゴシック');

svg.append("text")
　          .text("stop")
　          .attr('x',18)
            .attr('y', 117)
            .attr('fill','white')
            .attr('font-size', 10)
            .attr('font-family','monospace');

// 再生ボタンを追加
svg.append('circle')
  .attr('class', 'play-button')
  .attr('cx', 28)
  .attr('cy',116)
  .attr('r', 20)
  .attr('fill', 'white')
  .style('cursor', 'pointer')//;
//d3.selectAll('circle.play-button')
  .on('click', function() {
    startStop(); // 再生または停止
  });

var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");

// 凡例を追加
svg.selectAll('circle.legend')
  .data([80000, 8000, 0, -8000, -80000])
  .enter()
  .append('circle')
  .attr("cy", function(d, i) { return 175 + 25 * i; })
  .attr('cx',28)
  .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', 105)
  .attr('y', function(d, i) { return 175 + 25 * i + 5; })
  .attr('font-size', 9)
  .attr('fill','white')
  .attr('text-anchor', 'end')
  .text(function(d) {
    var str = '';
    var i = parseInt(d);
    if (i > 0) { str = '+'; }
    else if (i === 0) { str = '±'; }
    str = str + i.toLocaleString() + '人';
    return str;
  });
// 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]);
  
   svg.append('rect')
    .attr('class', 'year-rect')
    .attr('x', 0)
    .attr('y', 62)
    .attr('width', w / years.length)
    .attr('height', 20)
    .style("opacity", 0.4)
    .attr('fill', 'white');

// 年ラベルの設定
	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',75)
		.attr('text-anchor', 'middle')
		.attr('font-size', 9)
		.attr('fill','white')
		.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');
		updateYear();
	});
  // 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(1700)
                       .center([138, 36])
                       //.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];
  updateYear();
};
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