芸術家の住処：全国比率３

出典] 平成２２年国勢調査　（統計局）http://www.e-stat.go.jp/SG1/estat/List.do?bid=000001050829&cycode=0 日本全国の芸術家の比率から各地域の芸術家の数が平均より多いか表しました。

<!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 = '/idsaga2016/japan.topojson';
var mapfilepath = 'japan.topojson';
var csvpath = 'artist_number.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, 0.5, 0.8, 1, 1.2 , 1.5, 2.0, 3.0,5.0];
// データの数値から色に変換する関数
var color = d3.scale.linear()
    .domain(domainArr)
    .range(['gray', 'lightslategray', 'steelblue', 'blue', 'navy',　'indigo',　'mediumvioletred',　'crimson','red']);
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['全国比率']);
        });
    })
    ;
    // 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>

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

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