Japan Map

#Japan Map 市区町村境界の日本地図です。

<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.min.js"></script> 
<script src="https://d3js.org/topojson.v1.min.js"></script> 
<body>

// svgをbody内に追加して、その中にg（グループ）を追加＝＞変数svgに代入
var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g");

// さらにgを追加
var g = svg.append("g");

// topojsonファイルのアドレスを指定
var mapfilepath = '/sugi2000/raw/f5cb73861573aab98187/japan0001.json';
//var kencsvpath = '/sugi2000/raw/f5cb73861573aab98187/ken.csv';
//var mapfilepath = 'japan0001.json';

// csvファイルのアドレスを指定
var kencsvpath = 'ken.csv';

// ズームの設定（1〜8倍）
var zoom = d3.behavior.zoom()
    .scaleExtent([1, 8])
    .on("zoom", zoomed);

svg.call(zoom)
    .call(zoom.event);

// 色の変換関数の設定
//var color = d3.scale.linear().range(["#ff4400", "#00cc66"]);
var color = d3.scale.linear().domain([0, 0.25, 0.5, 0.75, 1]).range(["#0000ee", "#00ee00", "#eeeeee", "#eeee00", "#ee0000"]);

// 都道府県カラーの変換設定
var kenColor = function(d) {
	if (d.properties.JCODE) { // データにproperties.JCODEが存在する場合
		return color(+d.properties.JCODE.substr(0, 2) / 47); // JCODEの上位2桁を取り出して47で割った数をもとに色に変換する
      	} else { // 存在しない場合（北方領土）
		return d3.hsl(0, 0, 0); // 黒色
      	}
      };

// マップデータの読み込み
d3.json(mapfilepath, function(error, collection) {
	if (error) {
		return console.warn(error); // エラーの場合、エラー内容をコンソールに警告表示
	}

// マップの設定
    var projection = d3.geo.mercator() // メルカトル図法
                       .scale(1500) // 1500倍拡大
                       .center(d3.geo.centroid(collection)) // マップの中心点をセンターにする
                       .translate([width / 2, height / 2 - 50]); // svgの中央やや下へ座標をずらす

//パスの設定
    var path = d3.geo.path().projection(projection);
    
    // データからpathの作成
    g.selectAll('path')
      .data(collection.features) // マップデータのfeaturesをデータに
      .enter()
      .append('path')
      .attr('d', path) // d属性にpathを設定
      .attr('JCODE', function(d) {return d.properties.JCODE;}) // JCODE属性の設定
      .attr('KENCODE', function(d) { // KENCODE属性の設定
	      if (d.properties.JCODE) {
			      return d.properties.JCODE.substr(0, 2);
		      } else {
			      return 'null';
		      }
		})
	  .attr('shikuchoson', function(d) { // shikuchoson属性の設定
		return d.properties.SIKUCHOSON;
	  })
      .style('fill', kenColor) // fillスタイル（塗りの色）をkenColorに設定
      .style('cursor', 'pointer') // カーソルの種類を指さしカーソルに
      .on('mouseover', function(){ // マウスオーバーイベント
      	var self = d3.select(this);
      	self.style('fill', 'red'); // 塗りの色を赤色に
      })
      .on('mouseout', function(){ // マウスアウトイベント
      	var self = d3.select(this);
      	self.transition() // アニメーション
      	  .duration(300)
      	  .style('fill', kenColor); // 塗りの色を元の色(kenColor)に徐々にもどす
      })
      ;
});

// csvファイルの読み込み
d3.csv(kencsvpath, function(error, dataset) {
	
	// rect の作成
	svg.selectAll('rect.ken')
		.data(dataset)
		.enter()
		.append('rect')
		.attr('class', 'ken')
		.attr('x', 0)
		.attr('y', function(d,i){return height / 47 * i; })
		.attr('width', 120)
		.attr('height', height / 47)
		.attr('id', function(d){return d.id;})
		.attr('fill', function(d){return color(+d.id / 47);});
	
	// text の作成
	svg.selectAll('text.ken')
		.data(dataset)
		.enter()
		.append('text')
		.attr('class', 'ken')
		.attr('x', 0)
		.attr('y', function(d,i){return height / 47 * (i + 1); })
		.attr('font-size', 9)
		.text(function(d){return d.name;});
});

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

// blocksプレビュー画面の高さ設定
d3.select(self.frameElement).style("height", height + "px");

</script>

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