shimizu/.block

## .block
license: mit

## 2017_3_6_16_38.tsv

          
            都道府県名
            地方自治体コード
            指標値(単位:人/10万人)
            信頼性有無

            
              北海道
               01000
              21.99
              0

            
              青森県
               02000
              26.74
              0

            
              岩手県
               03000
              36.25
              0

            
              宮城県
               04000
              26.64
              0

            
              秋田県
               05000
              36.34
              0

            
              山形県
               06000
              36.21
              0

            
              福島県
               07000
              44.57
              0

            
              茨城県
               08000
              36.21
              0

            
              栃木県
               09000
              31.33
              0

            
              群馬県
               10000
              44.14
              0

            
              埼玉県
               11000
              38.13
              0

            
              千葉県
               12000
              32.26
              0

            
              東京都
               13000
              24.72
              0

            
              神奈川県
               14000
              23.56
              0

            
              新潟県
               15000
              42.33
              0

            
              富山県
               16000
              33.13
              0

            
              石川県
               17000
              41.69
              0

            
              福井県
               18000
              39.78
              0

            
              山梨県
               19000
              41.08
              0

            
              長野県
               20000
              33.35
              0

            
              岐阜県
               21000
              43.51
              0

            
              静岡県
               22000
              33.11
              0

            
              愛知県
               23000
              40.65
              0

            
              三重県
               24000
              47.02
              0

            
              滋賀県
               25000
              42.46
              0

            
              京都府
               26000
              55.07
              0

            
              大阪府
               27000
              40.51
              0

            
              兵庫県
               28000
              48.35
              0

            
              奈良県
               29000
              61.66
              0

            
              和歌山県
               30000
              66.01
              0

            
              鳥取県
               31000
              68.66
              0

            
              島根県
               32000
              56.43
              0

            
              岡山県
               33000
              66.82
              0

            
              広島県
               34000
              54.14
              0

            
              山口県
               35000
              48.35
              0

            
              徳島県
               36000
              60.85
              0

            
              香川県
               37000
              57.73
              0

            
              愛媛県
               38000
              61.77
              0

            
              高知県
               39000
              73.58
              0

            
              福岡県
               40000
              52.92
              0

            
              佐賀県
               41000
              74.82
              0

            
              長崎県
               42000
              56.71
              0

            
              熊本県
               43000
              77.69
              0

            
              大分県
               44000
              70.35
              0

            
              宮崎県
               45000
              77.26
              0

            
              鹿児島県
               46000
              88.61
              0

            
              沖縄県
               47000
              88.2
              0

## README.md

      
    Raw
  

              README.md
            
          
    ワークショップ用サンプル
クリックすることでサークルを並べ変えることができます。
データ元
環境GIS｜環境展望台：国立環境研究所 環境情報メディア

  
## index.html
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8" />
<title>2017年熱中症発生数</title>
<style>
html, body, svg {
	width: 100%;
	height: 99.9%;
}

text {
	text-anchor: middle;
	dominant-baseline: hanging;
}
#sortBtn {
	position: absolute;
	top:1em;
	left:1em;
	z-index: 9;
}

</style>


</head>
<body>
<button id="sortBtn">sort</button>
<svg></svg>

<script src="//unpkg.com/d3@4.12.2/build/d3.min.js"></script>
<script src="index.js"></script>
</body>
</html>

## index.js
//熱中症データの読み込み
d3.tsv('2017_3_6_16_38.tsv', function(data) {
	//文字データを数値に変換
	data.forEach(function(d) {
		d['指標値(単位:人/10万人)'] = +d['指標値(単位:人/10万人)'] * 100000;
	});

	var svg = d3.select('svg');
	var w = svg.node().clientWidth;
	var h = svg.node().clientHeight;

	var radius = w / 11; //サークルの半径
	var margin = radius / 4; //サークル間のマージン

	//ステージを設置
	var stage = svg.append('g').attr('transform', 'translate(' + [ radius / 2, radius / 2 ] + ')'); //topとleftを半径分ずらす

	//ソートを切り替える関数
	var sort = SortToggle();

	//データの最大値を取得
	var dmax = d3.max(
		data.map(function(d) {
			return d['指標値(単位:人/10万人)'];
		})
	);

	//0〜データの最大値までを、0〜半径の大きさに正規化
	var rScale = d3.scaleSqrt().domain([ 0, dmax ]).range([ 0, radius - margin ]);

	render(data);

	d3.select('#sortBtn').on('click', function() {
		//bodyにクリックイベントを設置
		render(sort(data));
	});

	//エレメントをレンダリングする
	function render(data) {
		//サークル、県名ラベル、発生数ラベルをまとめる親要素としてgroup要素をセレクトする
		var updateGroup = stage.selectAll('.group').data(data, function(d) {
			return d['都道府県名'];
		});

		var enterGroup = updateGroup
			.enter()
			.append('g')
			.attr('class', 'group')
			.attr('transform', 'translate(' + [ w / 2 - radius / 2, radius * 5 / 2 ] + ')'); //新規追加時の初期位置をステージの中心にする

		//サークルをグループの直下に追加
		enterGroup.append('circle').attr('opacity', 0.6).attr('fill', 'red').attr('r', function(d) {
			return rScale(d['指標値(単位:人/10万人)']);
		});

		//県名ラベルをグループ直下に追加
		enterGroup.append('text').attr('fill', 'black').attr('y', '-0.5em').text(function(d) {
			return d['都道府県名'];
		});

		//発生数ラベルをグループ直下に追加
		enterGroup.append('text').attr('fill', 'black').attr('y', '0.5em').text(function(d) {
			return ~~(d['指標値(単位:人/10万人)'] / 10000) + '万人';
		});

		//既存エレメントと追加エレメントの位置をアップデート
		updateGroup
			.merge(enterGroup)
			.attr('fill', 'red')
			.transition() //トランジション開始
			.duration(700) //1000msかけて移動する
			.delay(function(d, i) {
				return i * 100;
			})
			.attr('transform', function(d, i) {
				var x = (i % 10) * radius + margin;
				var y = ~~(i / 10) * radius + margin;

				return 'translate(' + [ x, y ] + ')';
			});
	}

	//ソートを切り替える
	function SortToggle() {
		var sortNext = 1;
		return function(data) {
			switch (sortNext) {
				case 0:
					data.sort(function(a, b) {
						return a['地方自治体コード'] - b['地方自治体コード'];
					});
					break;
				case 1:
					data.sort(function(a, b) {
						return a['指標値(単位:人/10万人)'] - b['指標値(単位:人/10万人)'];
					});
					break;
				case 2:
					data.sort(function(a, b) {
						return b['指標値(単位:人/10万人)'] - a['指標値(単位:人/10万人)'];
					});
					break;
			}
			sortNext++;
			if (sortNext > 2) sortNext = 0;
			return data;
		};
	}
});

## thumbnail.png

      
    Raw
  

              thumbnail.png
都道府県名	地方自治体コード	指標値(単位:人/10万人)	信頼性有無
北海道	01000	21.99	0
青森県	02000	26.74	0
岩手県	03000	36.25	0
宮城県	04000	26.64	0
秋田県	05000	36.34	0
山形県	06000	36.21	0
福島県	07000	44.57	0
茨城県	08000	36.21	0
栃木県	09000	31.33	0
群馬県	10000	44.14	0
埼玉県	11000	38.13	0
千葉県	12000	32.26	0
東京都	13000	24.72	0
神奈川県	14000	23.56	0
新潟県	15000	42.33	0
富山県	16000	33.13	0
石川県	17000	41.69	0
福井県	18000	39.78	0
山梨県	19000	41.08	0
長野県	20000	33.35	0
岐阜県	21000	43.51	0
静岡県	22000	33.11	0
愛知県	23000	40.65	0
三重県	24000	47.02	0
滋賀県	25000	42.46	0
京都府	26000	55.07	0
大阪府	27000	40.51	0
兵庫県	28000	48.35	0
奈良県	29000	61.66	0
和歌山県	30000	66.01	0
鳥取県	31000	68.66	0
島根県	32000	56.43	0
岡山県	33000	66.82	0
広島県	34000	54.14	0
山口県	35000	48.35	0
徳島県	36000	60.85	0
香川県	37000	57.73	0
愛媛県	38000	61.77	0
高知県	39000	73.58	0
福岡県	40000	52.92	0
佐賀県	41000	74.82	0
長崎県	42000	56.71	0
熊本県	43000	77.69	0
大分県	44000	70.35	0
宮崎県	45000	77.26	0
鹿児島県	46000	88.61	0
沖縄県	47000	88.2	0
	<!DOCTYPE html>
	<html lang="jp">
	<head>
	<meta charset="utf-8" />
	<title>2017年熱中症発生数</title>
	<style>
	html, body, svg {
	width: 100%;
	height: 99.9%;
	}

	text {
	text-anchor: middle;
	dominant-baseline: hanging;
	}
	#sortBtn {
	position: absolute;
	top:1em;
	left:1em;
	z-index: 9;
	}

	</style>



	</head>
	<body>
	<button id="sortBtn">sort</button>
	<svg></svg>

	<script src="//unpkg.com/d3@4.12.2/build/d3.min.js"></script>
	<script src="index.js"></script>
	</body>
	</html>
	//熱中症データの読み込み
	d3.tsv('2017_3_6_16_38.tsv', function(data) {
	//文字データを数値に変換
	data.forEach(function(d) {
	d['指標値(単位:人/10万人)'] = +d['指標値(単位:人/10万人)'] * 100000;
	});

	var svg = d3.select('svg');
	var w = svg.node().clientWidth;
	var h = svg.node().clientHeight;

	var radius = w / 11; //サークルの半径
	var margin = radius / 4; //サークル間のマージン

	//ステージを設置
	var stage = svg.append('g').attr('transform', 'translate(' + [ radius / 2, radius / 2 ] + ')'); //topとleftを半径分ずらす

	//ソートを切り替える関数
	var sort = SortToggle();

	//データの最大値を取得
	var dmax = d3.max(
	data.map(function(d) {
	return d['指標値(単位:人/10万人)'];
	})
	);

	//0〜データの最大値までを、0〜半径の大きさに正規化
	var rScale = d3.scaleSqrt().domain([ 0, dmax ]).range([ 0, radius - margin ]);

	render(data);

	d3.select('#sortBtn').on('click', function() {
	//bodyにクリックイベントを設置
	render(sort(data));
	});

	//エレメントをレンダリングする
	function render(data) {
	//サークル、県名ラベル、発生数ラベルをまとめる親要素としてgroup要素をセレクトする
	var updateGroup = stage.selectAll('.group').data(data, function(d) {
	return d['都道府県名'];
	});

	var enterGroup = updateGroup
	.enter()
	.append('g')
	.attr('class', 'group')
	.attr('transform', 'translate(' + [ w / 2 - radius / 2, radius * 5 / 2 ] + ')'); //新規追加時の初期位置をステージの中心にする

	//サークルをグループの直下に追加
	enterGroup.append('circle').attr('opacity', 0.6).attr('fill', 'red').attr('r', function(d) {
	return rScale(d['指標値(単位:人/10万人)']);
	});

	//県名ラベルをグループ直下に追加
	enterGroup.append('text').attr('fill', 'black').attr('y', '-0.5em').text(function(d) {
	return d['都道府県名'];
	});

	//発生数ラベルをグループ直下に追加
	enterGroup.append('text').attr('fill', 'black').attr('y', '0.5em').text(function(d) {
	return ~~(d['指標値(単位:人/10万人)'] / 10000) + '万人';
	});

	//既存エレメントと追加エレメントの位置をアップデート
	updateGroup
	.merge(enterGroup)
	.attr('fill', 'red')
	.transition() //トランジション開始
	.duration(700) //1000msかけて移動する
	.delay(function(d, i) {
	return i * 100;
	})
	.attr('transform', function(d, i) {
	var x = (i % 10) * radius + margin;
	var y = ~~(i / 10) * radius + margin;

	return 'translate(' + [ x, y ] + ')';
	});
	}

	//ソートを切り替える
	function SortToggle() {
	var sortNext = 1;
	return function(data) {
	switch (sortNext) {
	case 0:
	data.sort(function(a, b) {
	return a['地方自治体コード'] - b['地方自治体コード'];
	});
	break;
	case 1:
	data.sort(function(a, b) {
	return a['指標値(単位:人/10万人)'] - b['指標値(単位:人/10万人)'];
	});
	break;
	case 2:
	data.sort(function(a, b) {
	return b['指標値(単位:人/10万人)'] - a['指標値(単位:人/10万人)'];
	});
	break;
	}
	sortNext++;
	if (sortNext > 2) sortNext = 0;
	return data;
	};
	}
	});