var width = 500,
    height = 500,
    radius = Math.min(width, height) / 2,
    innerRadius = 0;

var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) { return 1/*d.width*/; })
    .padAngle(0.05 * Math.PI)
		.startAngle(0.5 * Math.PI)
    .endAngle(1.5 * Math.PI);

var arc = d3.svg.arc()
  .innerRadius(innerRadius)
  .outerRadius(0.01);

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

d3.csv('aster_data.csv', function(error, data) {

  data.forEach(function(d) {
    d.id     =  d.id;
    d.order  = +d.order;
    d.color  =  d.color;
    d.weight = +d.weight;
    d.score  = +d.score;
    d.width  = +d.weight;
    d.label  =  d.label;
  });
  
  var path = svg.selectAll(".solidArc")
      .data(pie(data))
    .enter().append("path")
      .attr("fill", function(d) { return d.data.color; })
      .attr("class", "solidArc")
      .attr("stroke", "gray")
      .attr("d", arc);
  
//   pie.sort(function (d) { return d.weight; });
  arc.outerRadius(radius);
  
  svg.selectAll('.solidArc')
  	.data(pie(data))
  .transition()
  	.duration(1000)
  	.delay(function (d, i) { return i*100; } )
	  .attr("d", arc);
});