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="holder"></div>

CSS

body {
		  background: #eeeeee;
		}
		
		#holder {
		  overflow: hidden;
		}
		
		.node {
		  cursor: pointer;
		  stroke: #3182bd;
		  stroke-width: 1.5px;
		}
		
		.link {
		  fill: none;
		  stroke: #9ecae1;
		  stroke-width: 1.5px;
		}

JavaScript

$(document).ready(function() {
  function pieChart(placeholder, data) {
    var r = 50; // outer radius 

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

    var group = d3.select(placeholder)

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

  }
  var init = function(selector, root) {

    var width = 960,
      height = 500,
      root;

    var tick = function() {
      link.attr("x1", function(d) {
          return d.source.x;
        })
        .attr("y1", function(d) {
          return d.source.y;
        })
        .attr("x2", function(d) {
          return d.target.x;
        })
        .attr("y2", function(d) {
          return d.target.y;
        });

      node.attr('transform', d => ("translate(" + d.x + "," + d.y + ")"));

      labels.attr("x", function(d) {
          return d.x;
        })
        .attr("y", function(d) {
          return d.y;
        });
    }

    var force = d3.layout.force()
      .size([width, height])
      .linkDistance(30)
      .charge(-520)
      .on("tick", tick);

    var svg = d3.select(selector).append("svg")
      .attr("width", width)
      .attr("height", height);

    var link = svg.selectAll(".link"),
      node = svg.selectAll(".node"),
     ...