2017年熱中症発生数（救急搬送） by shimizu

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;
		};
	}
});

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>

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