Old school D3 from simpler times

All examples By author By category About

harasaki

Full window Github gist

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

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

<script type="text/javascript">
//var mapfilepath = '/sugi2000/raw/560f664f9b32a17b2c4e/japan.topojson';
var mapfilepath = 'japan.topojson';
var csvpath = 'choka.csv';
var jinkouData;
var years;
var currentYear;
var zoom = d3.behavior.zoom()
    .scaleExtent([1, 8])
    .on("zoom", zoomed);
var w = 960;
var h = 1050;
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(['red', 'orange', 'white', 'cyan', 'blue']);
// 全国の都道府県の色を更新する関数
var updateColor = function() {
  // 年ラベルの色を更新する
  svg.selectAll('text.year')
    .transition()
    .duration(300)
    .style('fill', function() {
      var self = d3.select(this);
      if (currentYear === self.attr('year')) {
        return 'red';
      } else {
        return 'black';
      }
    });
  // 都道府県の色を更新する
  g.selectAll('path')
    .transition()
    .duration(300)
    .style('fill', function() {
      return color(d3.select(this).attr('year-' + currentYear));
    });
};
// 凡例を追加
svg.selectAll('rect.legend')
  .data([80000, 8000, 0, -8000, -80000])
  .enter()
  .append('rect')
  .attr('class', 'legend')
  .attr('x', 40)
  .attr('y', function(d, i) { return 40 + 20 * i; })
  .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', 62)
  .attr('y', function(d, i) { return 40 + 20 * i + 12; })
  .attr('font-size', 9)
  .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', 'darkgray');
	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', 20)
		.attr('text-anchor', 'middle')
		.attr('font-size', 9)
		.attr('font-family', 'Helvetica')
		.attr('font-weight', 'bold')
		.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', 'red');
      })
      .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