D3.js donut chart

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>

<div id="piebubbles"></div>

CSS

body {
		  background: #eeeeee;
		}

JavaScript

$(document).ready(function() {

  var $this = $("#piebubbles");

  var w = 350;
  var h = 350;




  var data = [
    20,
    80
  ];

  var r = 50; // outer radius 

  var color = d3.scale.ordinal()
    .range(["red", "orange"]);

  var svg = d3.select("body").append("svg")
    .attr("width", w)
    .attr("height", h);

  var group = svg.append("g")
    .attr("transform", "translate(150, 150)"); // set center of pie to 300,300

  var arc = d3.svg.arc()
    .innerRadius(0)
    .outerRadius(r);

  var pie = d3.layout.pie()
    .value(function(d) {
      return d;
    }); // pie function transform data into specific format

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

  arcs.append("path")
    .attr("d", arc) // here the arc function works on every record d of data 
    .attr("fill", function(d) {
      return color(d.data);
    });

  arcs.append("text")
    .attr("transform", function(d) {
      return "translate(" + arc.centroid(d) + ")";
    }) // put text at the center of every arc
    .attr("text-anchor", "middle")
    .attr("font-size", "1.5em")
    .text(function(d) {
      return d.data;
    });




});