shimizu · August 29, 2015 14:23
diff --git a/README.md b/README.md
diff --git a/index.html b/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>
diff --git a/thumbnail.png b/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>