[Solved]-D3 dougnut chart customizing circle color-d3.js

var dataset = {
  hddrives: [90,10],
};

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

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

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 + ")");

//Draw the Circle
 svg.append("circle")
                          .attr("cx", 0)
                          .attr("cy", 0)
                          .attr("r", 65)
                          .attr("fill", "#F1F1F1");

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", "0em")
      .style("text-anchor", "middle")
      .attr("class", "inside")
      .text(function(d) { return '56%'; });
svg.append("text")
       .attr("dy", "1.5em")
      .style("text-anchor", "middle")
      .attr("class", "data")
      .text(function(d) { return '53GB / 123GB'; });

.inside {
    font-family: 'Roboto Condensed', sans-serif;

    font-size:30px;
}

.data {
    font-size:12px;
    color:grey;
}

.arc {
  stroke:  #fff;

}

.

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.7/d3.min.js"></script>