Create the background donut

The final setup we need to do before connecting the loaded data to arc segments is setting up the gray donut you see when the first data is loaded. For this, we use the d3.arc() function:

var arc = d3.arc() 
    .outerRadius(height/2 * 0.6) 
    .innerRadius(height/2 * 0.3); 
 
// add a grey background arc 
pieContainer.append('path') 
    .attr("class", 'backgroundArc') 
    .attr("d", arc({startAngle: 0, endAngle: 2 * Math.PI}));

The d3.arc() function isn't an SVG element we can add to the page, but it is a generator. A generator is a function that, when called, returns a path string that we can then add to a path element. Besides a generator for arc segments, D3 also provides generators for lots of other structures, as we'll see throughout this book. In this case, the generator allows us to create donut or pie segments as SVG paths that we can add. In the previous code, we used this to create a full donut: arc({startAngle: 0, endAngle: 2 * Math.PI}). Note that we've also could have specified these two properties when we called d3.arc() to create the generator. The following properties and functions are available on the d3.arc() function:

Finally, let's add some CSS for this arc, and a nice border around the main container:

.backgroundArc { 
    fill: #ddd; 
} 
 
.chart { 
    margin: 10px; 
    border-radius: 5px; 
    border: solid #555555 thin; 
    background-color: #eee; 
}

We have our basic setup, which at this point looks like this:

Not very exciting yet, so let's add the colored segments that make up the donut.