sugi2000/index.html

## index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="//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 = 'kokusei2015sokuho.csv';
var japan;

var zoom = d3.behavior.zoom()
    .scaleExtent([1, 8])
    .on("zoom", zoomed);

var w = 960;
var h = 960;
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 domainArr = [0, 200000, 400000, 600000, 800000];

// データの数値から色に変換する関数
var color = d3.scale.linear()
    .domain(domainArr)
    .range(['red', 'orange', 'yellow', 'cyan', 'blue']);

var updateMap = function() {
  g.selectAll('path')
    .transition()
    .duration(1000)
    .style('fill', function(d) {
      return color(d.properties['人口']);
    });
}

// 凡例を追加
svg.selectAll('rect.legend')
  .data(domainArr)
  .enter()
  .append('rect')
  .attr('class', 'legend')
  .attr('x', 65)
  .attr('y', function(d, i) { return 100 + 20 * i; })
  .attr('width', 20)
  .attr('height', 20)
  .attr('fill', function(d) { return color(d); });

svg.selectAll('text.legend')
  .data(domainArr)
  .enter()
  .append('text')
  .attr('x', 60)
  .attr('y', function(d, i) { return 100 + 20 * i + 12; })
  .attr('font-size', 9)
  .attr('text-anchor', 'end')
  .text(function(d) { return d + '人'; });

// mapファイルの読み込み
d3.json(mapfilepath, function(error, collection) {
  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;
    })
    .style('fill', function(d, i) {
      return 'white';
    })
    .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(d.properties['人口']);
        });
    })
    ;

    // mapファイルを読み込んだ後にcsvファイルを読み込み
    d3.csv(csvpath, function(error, rows) {

      // 人口データを追加する
      for (var i = 0; i < rows.length; i++) {
        var municipality = japan.filter(function(obj) {
          return (parseInt(obj.properties.JCODE) === parseInt(rows[i]['_市区町村コード']));
        })[0];
        console.log('municipality', i, municipality, rows[i]);

        if (municipality) {
  				municipality.properties['人口'] = rows[i]['人口'];
    		}
      }

      // データを読み込んだので、マップの色を更新
      updateMap();
    });
});


// ズーム用関数
function zoomed() {
  g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

// blocks公開用の高さ調節
d3.select(self.frameElement).style("height", h + "px");

</script>

 </body>
</html>

## japan.topojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              japan.topojson
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## kokusei2015sokuho.csv

      
    Raw
  

              kokusei2015sokuho.csv
            
          
            View raw
              (Sorry about that, but we can’t show files that are this big right now.)
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="//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 = 'kokusei2015sokuho.csv';
	var japan;

	var zoom = d3.behavior.zoom()
	.scaleExtent([1, 8])
	.on("zoom", zoomed);

	var w = 960;
	var h = 960;
	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 domainArr = [0, 200000, 400000, 600000, 800000];

	// データの数値から色に変換する関数
	var color = d3.scale.linear()
	.domain(domainArr)
	.range(['red', 'orange', 'yellow', 'cyan', 'blue']);

	var updateMap = function() {
	g.selectAll('path')
	.transition()
	.duration(1000)
	.style('fill', function(d) {
	return color(d.properties['人口']);
	});
	}

	// 凡例を追加
	svg.selectAll('rect.legend')
	.data(domainArr)
	.enter()
	.append('rect')
	.attr('class', 'legend')
	.attr('x', 65)
	.attr('y', function(d, i) { return 100 + 20 * i; })
	.attr('width', 20)
	.attr('height', 20)
	.attr('fill', function(d) { return color(d); });

	svg.selectAll('text.legend')
	.data(domainArr)
	.enter()
	.append('text')
	.attr('x', 60)
	.attr('y', function(d, i) { return 100 + 20 * i + 12; })
	.attr('font-size', 9)
	.attr('text-anchor', 'end')
	.text(function(d) { return d + '人'; });

	// mapファイルの読み込み
	d3.json(mapfilepath, function(error, collection) {
	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;
	})
	.style('fill', function(d, i) {
	return 'white';
	})
	.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(d.properties['人口']);
	});
	})
	;

	// mapファイルを読み込んだ後にcsvファイルを読み込み
	d3.csv(csvpath, function(error, rows) {

	// 人口データを追加する
	for (var i = 0; i < rows.length; i++) {
	var municipality = japan.filter(function(obj) {
	return (parseInt(obj.properties.JCODE) === parseInt(rows[i]['_市区町村コード']));
	})[0];
	console.log('municipality', i, municipality, rows[i]);

	if (municipality) {
	municipality.properties['人口'] = rows[i]['人口'];
	}
	}

	// データを読み込んだので、マップの色を更新
	updateMap();
	});
	});


	// ズーム用関数
	function zoomed() {
	g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
	}

	// blocks公開用の高さ調節
	d3.select(self.frameElement).style("height", h + "px");

	</script>

	</body>
	</html>