Pie Explode

<!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; });

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>

https://d3js.org/d3.v3.min.js