sugi2000/README.md

## README.md

      
    Raw
  

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

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script> <!-- d3.js ライブラリ -->
<script src="http://d3js.org/topojson.v1.min.js"></script> <!-- topojson ライブラリ -->
<body>

<script>
// svgのサイズ（幅と高さ）
var width = 960,
    height = 960;

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

## ken.csv

          
            id
            name

            
              01
              北海道

            
              02
              青森県

            
              03
              岩手県

            
              04
              宮城県

            
              05
              秋田県

            
              06
              山形県

            
              07
              福島県

            
              08
              茨城県

            
              09
              栃木県

            
              10
              群馬県

            
              11
              埼玉県

            
              12
              千葉県

            
              13
              東京都

            
              14
              神奈川県

            
              15
              新潟県

            
              16
              富山県

            
              17
              石川県

            
              18
              福井県

            
              19
              山梨県

            
              20
              長野県

            
              21
              岐阜県

            
              22
              静岡県

            
              23
              愛知県

            
              24
              三重県

            
              25
              滋賀県

            
              26
              京都府

            
              27
              大阪府

            
              28
              兵庫県

            
              29
              奈良県

            
              30
              和歌山県

            
              31
              鳥取県

            
              32
              島根県

            
              33
              岡山県

            
              34
              広島県

            
              35
              山口県

            
              36
              徳島県

            
              37
              香川県

            
              38
              愛媛県

            
              39
              高知県

            
              40
              福岡県

            
              41
              佐賀県

            
              42
              長崎県

            
              43
              熊本県

            
              44
              大分県

            
              45
              宮崎県

            
              46
              鹿児島県

            
              47
              沖縄県
	<!DOCTYPE html>
	<meta charset="utf-8">
	<script src="http://d3js.org/d3.v3.min.js"></script> <!-- d3.js ライブラリ -->
	<script src="http://d3js.org/topojson.v1.min.js"></script> <!-- topojson ライブラリ -->
	<body>

	<script>
	// svgのサイズ（幅と高さ）
	var width = 960,
	height = 960;

	// 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>
	id	name
	01	北海道
	02	青森県
	03	岩手県
	04	宮城県
	05	秋田県
	06	山形県
	07	福島県
	08	茨城県
	09	栃木県
	10	群馬県
	11	埼玉県
	12	千葉県
	13	東京都
	14	神奈川県
	15	新潟県
	16	富山県
	17	石川県
	18	福井県
	19	山梨県
	20	長野県
	21	岐阜県
	22	静岡県
	23	愛知県
	24	三重県
	25	滋賀県
	26	京都府
	27	大阪府
	28	兵庫県
	29	奈良県
	30	和歌山県
	31	鳥取県
	32	島根県
	33	岡山県
	34	広島県
	35	山口県
	36	徳島県
	37	香川県
	38	愛媛県
	39	高知県
	40	福岡県
	41	佐賀県
	42	長崎県
	43	熊本県
	44	大分県
	45	宮崎県
	46	鹿児島県
	47	沖縄県