title: Fill the inside of a pie donut chart d3
body: <p><img src="https://i.stack.imgur.com/Rm76E.png" alt="Example">
  I am trying to create the image above using d3</p>
  
  <p><a href="http://jsfiddle.net/Spwizard/LBzx7/1/" rel="nofollow noreferrer">http://jsfiddle.net/Spwizard/LBzx7/1/</a></p>
  
  <pre><code>var dataset = {
  hddrives: [20301672, 9408258, 2147483, 21474836, 35622,32210000],
  };
  
  var width = 460,
  height = 300,
  radius = Math.min(width, height) / 2;
  
  var color = d3.scale.ordinal()
  .range(["#2DA7E2"]);
  
  var pie = d3.layout.pie()
  .sort(null);
  
  var arc = d3.svg.arc()
  .innerRadius(radius - 100)
  .outerRadius(radius - 70);
  
  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("path")
  .data(pie(dataset.hddrives))
    .enter().append("path")
   .attr("class", "arc")
  .attr("fill", function(d, i) { return color(i); })
  .attr("d", arc);
  svg.append("text")
    .attr("dy", ".35em")
    .style("text-anchor", "middle")
    .attr("class", "inside")
    .text(function(d) { return '56%'; });
  svg.append("text")
     .attr("dy", "2em")
    .style("text-anchor", "middle")
    .attr("class", "data")
    .text(function(d) { return 'some text'; });
  </code></pre>
  
  <p>Im struggling to see how to deal with the background color of the inner circle and dealing with the space left for storage</p>
  
  <p>Thanks</p>