title: Animating D3 donut chart on load
body: <p>I have a donut chart with five different arcs inside of it. The data will not be updated but I want to have a transition of the whole graph being drawn as a circle when the page loads, starting at the selected angle (in my case 1.1*PI). Here is the jsfiddle of the graph: <a href="http://jsfiddle.net/Nw62g/">http://jsfiddle.net/Nw62g/</a></p>
  
  <pre><code>var data = [
      {name: "one", value: 10375},
      {name: "two", value:  7615},
      {name: "three", value:  832},
      {name: "four", value:  516},
      {name: "five", value:  491}
  ];
  
  var margin = {top: 20, right: 20, bottom: 20, left: 20};
      width = 400 - margin.left - margin.right;
      height = width - margin.top - margin.bottom;
  
  var chart = d3.select("body")
      .append('svg')
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + ((width/2)+margin.left) + "," +
                                        ((height/2)+margin.top) + ")");
  
  var radius = Math.min(width, height) / 2;
  
  var color = d3.scale.ordinal()
      .range(["#3399FF", "#5DAEF8", "#86C3FA", "#ADD6FB", "#D6EBFD"]);
  
  var arc = d3.svg.arc()
      .outerRadius(radius)
      .innerRadius(radius - 20);
  
  var pie = d3.layout.pie()
      .sort(null)
      .startAngle(1.1*Math.PI)
      .endAngle(3.1*Math.PI)
      .value(function(d) { return d.value; });
  
  var g = chart.selectAll(".arc")
      .data(pie(data))
     .enter().append("g")
      .attr("class", "arc");
  
  g.append("path")
      .style("fill", function(d) { return color(d.data.name); })
      .attr("d", arc);
  </code></pre>
  
  <p>How would I go about achieving this result?</p>