An arc is a circular path with an inner and outer radius, starting from one angle to another. They are often used for pie and donut charts.

Everything works as before; we just tell the base generator how to use our data. The only difference is that this time the default accessors expect named attributes instead of the 2-value arrays we've gotten used to:

const arc = d3.arc(); 
const g3 = chart.container.append('g') 
    .attr('transform',
       `translate(${chart.margin.left + chart.margin.right},
      ${(chart.height / 2) + 
         (chart.margin.top + chart.margin.bottom)})`); 

g3.append('path') 
    .attr('d', 
      arc({ 
        outerRadius: 100, 
        innerRadius: 50, 
        startAngle: -Math.PI * 0.25, 
        endAngle: Math.PI * 0.25 
      })) 
    .attr('transform', 'translate(150, 150)') 
    .attr('fill', 'lightslategrey');

This time we could get away with using the default d3.arc() generator. Instead of using data, we calculated the angles by hand and also nudged the arc toward the center:

How fascinating!

Even though SVG normally uses degrees, the start and end angles use radians. The zero angle points upward toward the 12 o'clock position, with negative values going anticlockwise and positive values going the other way. At every 2Pi, we come back to zero.