kirantemojo/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<title>Dsnap - Charts</title>
</head>
<body>
	<div id="wrapper">

	</div>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script>
		var canvas = d3.select('#wrapper')
						.append('svg')
						.attr({'width':650,'height':500});

		var data = [{"label":"one", "value":40},
            {"label":"two", "value":30},
            {"label":"three", "value":30}];

            var colors = ['red','blue'];

           var colorscale = d3.scale.linear().domain([0,data.length]).range(colors);

		var arc = d3.svg.arc()
						.innerRadius(0)
						.outerRadius(100);

		var arcOver = d3.svg.arc()
						.innerRadius(0)
        				.outerRadius(150 + 10);

		var pie = d3.layout.pie()
						.value(function(d){ return d.value; });


		var renderarcs = canvas.append('g')
						.attr('transform','translate(440,200)')
						.selectAll('.arc')
						.data(pie(data))
						.enter()
						.append('g')
						.attr('class',"arc");

		renderarcs.append('path')
				.attr('d',arc)
				.attr('fill',function(d,i){ return colorscale(i); })
				.on("mouseover", function(d) {
		            	d3.select(this).transition()
			               .duration(1000)
			               .attr("d", arcOver);
		             })
				.on("mouseout", function(d) {
		            	d3.select(this).transition()
			               .duration(1000)
			               .attr("d", arc);
		             });

		renderarcs.append('text')
				.attr('transform',function(d) {
						var c = arc.centroid(d);
						console.log(c);
            			return "translate(" + c[0] +"," + c[1]+ ")";
             		})
				.text(function(d){ return d.value+"%"; });
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Dsnap - Charts</title>
	</head>
	<body>
	<div id="wrapper">

	</div>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script>
	var canvas = d3.select('#wrapper')
	.append('svg')
	.attr({'width':650,'height':500});

	var data = [{"label":"one", "value":40},
	{"label":"two", "value":30},
	{"label":"three", "value":30}];

	var colors = ['red','blue'];

	var colorscale = d3.scale.linear().domain([0,data.length]).range(colors);

	var arc = d3.svg.arc()
	.innerRadius(0)
	.outerRadius(100);

	var arcOver = d3.svg.arc()
	.innerRadius(0)
	.outerRadius(150 + 10);

	var pie = d3.layout.pie()
	.value(function(d){ return d.value; });


	var renderarcs = canvas.append('g')
	.attr('transform','translate(440,200)')
	.selectAll('.arc')
	.data(pie(data))
	.enter()
	.append('g')
	.attr('class',"arc");

	renderarcs.append('path')
	.attr('d',arc)
	.attr('fill',function(d,i){ return colorscale(i); })
	.on("mouseover", function(d) {
	d3.select(this).transition()
	.duration(1000)
	.attr("d", arcOver);
	})
	.on("mouseout", function(d) {
	d3.select(this).transition()
	.duration(1000)
	.attr("d", arc);
	});

	renderarcs.append('text')
	.attr('transform',function(d) {
	var c = arc.centroid(d);
	console.log(c);
	return "translate(" + c[0] +"," + c[1]+ ")";
	})
	.text(function(d){ return d.value+"%"; });
	</script>
	</body>
	</html>