Bubble Chart

<!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 = 1500,
      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.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, data) {
    data.forEach(function(d) {
        d.fruit = d.Fruit;
        d.count = +d.Count;
    });

var g = svg.selectAll(".arc")
      				 .data(pie(data))
    					 .enter()
    				   .append("g")
      				 .attr("class", "arc");

g.append("path")
     .attr("d", arc)
     .style("fill", function(d) { return color(d.data.fruit); })
     .transition()
     .duration(500)
     .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