D3.js donut chart

by arvillarruel

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>

CSS

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 960px;
}


.units-label {
  text-anchor: middle;
   font-size: 2em;
   font-weight: bold;
   text-transform: uppercase;
   color: pink!important;

}

form {
  position: absolute;
  right: 10px;
  top: 10px;
}

JavaScript

var dataset = [{
  color: "#00ffef",
  value: 30
}, {
  color: "#ff7d63",
  value: 20
}, {
  color: "#999999",
  value: 12
}];

var width = 460,
  height = 300,
  radius = Math.min(width, height) / 2;

var color = d3.scale.category20();

var pie = d3.layout.pie()
  .sort(null).value(function(d) {
  console.log(d,"d")
    return d.value;
  });

var arc1 = d3.svg.arc()
  .innerRadius(radius - 18)
  .outerRadius(radius - 13);

var arc = d3.svg.arc()
  .innerRadius(radius - 20)
  .outerRadius(radius - 10);

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var path = svg.selectAll(".background")
  .data(pie([{
    color: "gray",
    value: 1
  }]))
  .enter().append("path")
  .attr("class", "background")
  .attr("fill", function(d, i) {
    return d.data.color;
  })
  .attr("d", arc1);

var path = svg.selectAll(".foreground")
  .data(pie(dataset))
  .enter().append("path")
  .attr("class", "foreground")
  .attr("fill", function(d, i) {
    console.log(d);
    return d.data.color;
  })
  .attr("d", arc);
  
svg.append("text")
  .text("7899")
  .attr("class", "units-label")
  .attr("x", radius/12 -20)
  .attr("y", radius/12);