mbroadst/index.html

## index.html
<!doctype html>
<html>
  <head>
    <title>test</title>

  </head>
  <body>

    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>
      'use strict';
      var data = [
        { value: 1, label: 'test' },
        { value: 1, label: 'test' },
        { value: 1, label: 'test' }
      ];

      function angle(d) {
        var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
        return a > 90 ? a - 180 : a;
      }

      var width = 960,
          height = 500,
          radius = height / 2 - 10;

      var arc = d3.svg.arc()
          .innerRadius(radius - 40)
          .outerRadius(radius);

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

      var color = d3.scale.category10();

      var svg = d3.select("body").append("svg")
          .attr("width", width)
          .attr("height", height)
        .append("g")
          .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

      svg.selectAll("path")
          .data(pie(data))
        .enter().append("path")
          .style("fill", function(d, i) { console.log(i); return color(i); })
          .attr("d", arc)
          .attr("class", function(d, i) { return "path" + i; });

      svg.selectAll("text")
          .data(pie(data))
        .enter().append("svg:text")
          .style("font-size", "20px")
          .style("fill", "white")
        .append("textPath")
          .attr("xlink:href", function(d, i) { return "path" + i; })
          .text("some label");

      svg.append("text")
        .attr("dy", ".35em")
        .style("text-anchor", "middle")
        .text(function(d) { return "SOME NAME"; });

    </script>

  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>test</title>

	</head>
	<body>

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>
	'use strict';
	var data = [
	{ value: 1, label: 'test' },
	{ value: 1, label: 'test' },
	{ value: 1, label: 'test' }
	];

	function angle(d) {
	var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
	return a > 90 ? a - 180 : a;
	}

	var width = 960,
	height = 500,
	radius = height / 2 - 10;

	var arc = d3.svg.arc()
	.innerRadius(radius - 40)
	.outerRadius(radius);

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

	var color = d3.scale.category10();

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

	svg.selectAll("path")
	.data(pie(data))
	.enter().append("path")
	.style("fill", function(d, i) { console.log(i); return color(i); })
	.attr("d", arc)
	.attr("class", function(d, i) { return "path" + i; });

	svg.selectAll("text")
	.data(pie(data))
	.enter().append("svg:text")
	.style("font-size", "20px")
	.style("fill", "white")
	.append("textPath")
	.attr("xlink:href", function(d, i) { return "path" + i; })
	.text("some label");

	svg.append("text")
	.attr("dy", ".35em")
	.style("text-anchor", "middle")
	.text(function(d) { return "SOME NAME"; });

	</script>

	</body>
	</html>