D3 Examples - Pie Explode

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
text {
  font: 14px sans-serif;
}
​
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
  var width = 600,
      height = 500,
      radius = Math.min(width, height) / 2;
  
  var duration = 2000,
      delay = 500;
  
  var explodePie = {};
  
  // set color
  var color = d3.scale.category20();
​
  var arc = d3.svg.arc()
                                .outerRadius(radius - 48)
                                .innerRadius(0);
/*
  // location of text labels
  var labelArc = d3.svg.arc()
                                         .outerRadius(radius - -20)
                                         .innerRadius(radius - 10);
 */
  // value of each pie
    var pie = d3.layout.pie()
                                     .sort(null)
                                     .value(function(d) { return d.f_count; });
​
    var svg = d3.select("body").append("svg")
                                                     .attr("width", width)
                                                     .attr("height", height)
                                                     .append("g")
                                                     .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
 
  d3.csv("fruit.csv", function(error, rawData) {
    /*
    rawData.forEach(function(d) {
        d.fruit = d.Fruit;
        d.count = +d.Count;
    });
    */
    var fruit = rawData.map(function(d){
        return {
            f_name : d.Fruit,
            f_count : +d.Count
    }
    });
    var g = svg.selectAll(".arc")
                     .data(pie(fruit))
                         .enter()
                       .append("g")
                     .attr("class", "arc");
​
    g.append("path")
     .attr("d", arc)
     .style("fill", function(d) { return color(d.data.f_name); })
     .transition()
     .duration(duration)
     .delay(500)
     .attr("transform", explode);
​
/*
    g.append("text")
     .attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; })
     .attr("dy", ".35em")
     .text(function(d) { return d.data.fruit; });
   */
​
});
    function explode(x, index) {
​
        var offset = 500;
        var angle = (x.startAngle + x.endAngle) / 2;
        var xOff = Math.sin(angle) * offset;
        var yOff = -Math.cos(angle) * offset;
        return "translate("+xOff+", "+yOff+")";
    }
  
</script>
</body>
    