Standard setup, helper objects, and a gray donut

At this point we've loaded the data, and added the HTML select dropdown element. Now we'll set up the chart, some additional helper objects and draw the gray donut you see when the page initially loads. Like we did in the other samples, first set up the chart:

var margin = {top: 20, bottom: 20, right: 20, left: 45}, 
    width = 700 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 
 
var chart = d3.select(".chart") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 
// container, which holds the pie 
var pieContainer = chart.append('g') 
    .attr("transform", "translate(" + width / 2 + " " + height / 2 + ")") 
 
// use some standard colors 
var colors = function(i) { return d3.interpolateReds(i/6); }

Nothing new here, except the last line where we set up the colors we want to assign to the segments of the donut. For this, we use another standard D3 API call: d3.interpolateReds. This function returns a red color based on the provided input. The d3.interpolateReds(0) function returns the value at the left, the d3.interpolateReds(0.5) function the value at the center, and d3.interpolateReds(1) function the value at the right.