shimizu/README.md

## README.md

      
    Raw
  

              README.md
            
          
    ボタンをクリックすると円グラフになります。
document

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8" />
<style>
html, body {
	margin: 0px;
	padding: 0px;
}
svg {
	border: 1px solid;
	background-color: #1a2126;
	width:960px;
	height: 500px;
}

.btn:hover {
	fill:#3dcc28;
}
</style>
<body>
<svg>
<defs>
	<filter id = "light">
		<feGaussianBlur  in="SourceAlpha"  stdDeviation="8" result="blur"/>
		<feSpecularLighting  in="blur" result = "specOut" specularConstant = "1.2" specularExponent="12" lighting-color="#bbbbbb">
			<feDistantLight azimuth="45" elevation ="45"/>
		</feSpecularLighting>
		<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" />
	</filter>
</defs>


</svg>


<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
(function(){
	"use strict";

	var  w = 960; //ステージの横幅
	var  pieChartSize = 100;	//チャートのサイズ
	var pieChartWidth = 10;	//チャートの太さ
	var margin = 10	//チャート間のマージン
	var  radius = (pieChartSize-(margin*2))/2;	//チャートの半径
	var  btnSize = radius;	//ボタンのサイズ

	//データセットをランダムに作成
	var data = d3.range(45).map(function() {
		return d3.range(Math.floor(2+Math.random() * 5)).map(function(){
			return Math.floor(1+Math.random() * 10);
		}).sort(d3.descending)
	});

	//pieChartのセルカラー
	var color = ['#28cc57', '#89f093', '#19d02c', '#3d9f47', '#1af430', '#f31b1b', '#8828cc'];

	//アークパスジェネレーター
	var arc = d3.svg.arc()
		.outerRadius(radius)
		.innerRadius(radius - pieChartWidth);

	//pieChartレイアウト
	var pie = d3.layout.pie();

	var svg = d3.select('svg')
		.attr('width', 960)
		.attr('height', 500)
		.append('g')
		.attr('filter',"url(#light)")


	//pieChartを表示するグループ要素
	var pieChart = svg.selectAll('g.pie')
		.data(data)
		.enter()
		.append('g')
		.datum(function(d){  return d })
		.attr('class', function(d, i ){ return 'pie chart'+i})
		.attr('transform', function(d, i){
			//横幅いっぱいまで描画したら次の行へ移動
			var y = (pieChartSize) * Math.floor(i/9) + radius + margin;
			var x = (i%9) * (pieChartSize+margin) + radius;
			return 'translate('+ [x, y] + ')';
		});

	//装飾用のベースcircle
	pieChart.append('circle').attr({
		'r': radius,
		'fill': '#aeb2b4'
	});
	pieChart.append('circle').attr({
		'r': radius - pieChartWidth,
		'fill': '#1a2126'
	});

	//ボタン
	var btn = pieChart.append('circle').attr({
			'class': 'btn',
			'r': btnSize,
			'fill': '#aeb2b4'
		})
		.on('click', drawArcs)


	//ボタンがクリックされたらpiechartを描画する
	function drawArcs(d, i){
		//ボタンアニメーション
		d3.select(this).transition().duration(500).attr({
			'r': btnSize/2,
			'fill': '#3dcc28'
		}).call(endall, function(){
			d3.selectAll('g.arc').remove();
			//pieChartをアニメーションしつつ描く
			d3.select('.chart'+i).selectAll('g.arc')
				.data(function(d){ return pie(d); })
				.enter()
				.append('path')
				.attr('fill', function(d, i) {  return color[i]; })
				.transition()
				.duration(1500)
				.ease('elastic')
				.attrTween('d', tweenPie)
		})
	}

	//pieChart用tween関数
	function tweenPie(b) {
	  b.innerRadius = 0;
	  var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
	  return function(t) { return arc(i(t)); };
	}

	//トランジション終了時にcallbackを呼ぶヘルパー関数
	function endall(transition, callback) {
		var n = 0;
		transition
			.each(function() { ++n; })
			.each('end', function() { if (!--n) callback.apply(this, arguments); });
	};

})();

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8" />
	<style>
	html, body {
	margin: 0px;
	padding: 0px;
	}
	svg {
	border: 1px solid;
	background-color: #1a2126;
	width:960px;
	height: 500px;
	}

	.btn:hover {
	fill:#3dcc28;
	}
	</style>
	<body>
	<svg>
	<defs>
	<filter id = "light">
	<feGaussianBlur in="SourceAlpha" stdDeviation="8" result="blur"/>
	<feSpecularLighting in="blur" result = "specOut" specularConstant = "1.2" specularExponent="12" lighting-color="#bbbbbb">
	<feDistantLight azimuth="45" elevation ="45"/>
	</feSpecularLighting>
	<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" />
	</filter>
	</defs>


	</svg>


	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script>
	(function(){
	"use strict";

	var w = 960; //ステージの横幅
	var pieChartSize = 100; //チャートのサイズ
	var pieChartWidth = 10; //チャートの太さ
	var margin = 10 //チャート間のマージン
	var radius = (pieChartSize-(margin*2))/2; //チャートの半径
	var btnSize = radius; //ボタンのサイズ

	//データセットをランダムに作成
	var data = d3.range(45).map(function() {
	return d3.range(Math.floor(2+Math.random() * 5)).map(function(){
	return Math.floor(1+Math.random() * 10);
	}).sort(d3.descending)
	});

	//pieChartのセルカラー
	var color = ['#28cc57', '#89f093', '#19d02c', '#3d9f47', '#1af430', '#f31b1b', '#8828cc'];

	//アークパスジェネレーター
	var arc = d3.svg.arc()
	.outerRadius(radius)
	.innerRadius(radius - pieChartWidth);

	//pieChartレイアウト
	var pie = d3.layout.pie();

	var svg = d3.select('svg')
	.attr('width', 960)
	.attr('height', 500)
	.append('g')
	.attr('filter',"url(#light)")



	//pieChartを表示するグループ要素
	var pieChart = svg.selectAll('g.pie')
	.data(data)
	.enter()
	.append('g')
	.datum(function(d){ return d })
	.attr('class', function(d, i ){ return 'pie chart'+i})
	.attr('transform', function(d, i){
	//横幅いっぱいまで描画したら次の行へ移動
	var y = (pieChartSize) * Math.floor(i/9) + radius + margin;
	var x = (i%9) * (pieChartSize+margin) + radius;
	return 'translate('+ [x, y] + ')';
	});

	//装飾用のベースcircle
	pieChart.append('circle').attr({
	'r': radius,
	'fill': '#aeb2b4'
	});
	pieChart.append('circle').attr({
	'r': radius - pieChartWidth,
	'fill': '#1a2126'
	});

	//ボタン
	var btn = pieChart.append('circle').attr({
	'class': 'btn',
	'r': btnSize,
	'fill': '#aeb2b4'
	})
	.on('click', drawArcs)


	//ボタンがクリックされたらpiechartを描画する
	function drawArcs(d, i){
	//ボタンアニメーション
	d3.select(this).transition().duration(500).attr({
	'r': btnSize/2,
	'fill': '#3dcc28'
	}).call(endall, function(){
	d3.selectAll('g.arc').remove();
	//pieChartをアニメーションしつつ描く
	d3.select('.chart'+i).selectAll('g.arc')
	.data(function(d){ return pie(d); })
	.enter()
	.append('path')
	.attr('fill', function(d, i) { return color[i]; })
	.transition()
	.duration(1500)
	.ease('elastic')
	.attrTween('d', tweenPie)
	})
	}

	//pieChart用tween関数
	function tweenPie(b) {
	b.innerRadius = 0;
	var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
	return function(t) { return arc(i(t)); };
	}

	//トランジション終了時にcallbackを呼ぶヘルパー関数
	function endall(transition, callback) {
	var n = 0;
	transition
	.each(function() { ++n; })
	.each('end', function() { if (!--n) callback.apply(this, arguments); });
	};

	})();

	</script>