//熱中症データの読み込み
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;
		};
	}
});