Draw Arc

Introduction

Before moving into the second important chart, the pie chart, let’s discuss arcs which are used to draw pie charts. An arc is an important concept in D3.js and is used to draw pie and donut charts. D3.js has an API d3.arc() to draw different arcs by using the paths.

d3.arc() has the following attributes.

• innerRadius() specifies the inner radius for the arc. If we set the inner radius to zero, then we will get the pie shape arc instead of the donut shape.
• outerRadius() specifies the outer radius of the arc.
• startAngle() specifies the start angle for the radius. It takes input in radians instead of degrees.
• endAngle() specifies the end angle for the arc. It takes input in radians instead of degrees.

Note: $Radian = Degree$ x $pi/180$

Example

Let’s take a look at an example of drawing an arc.

Explanation

As seen in the code above:

• Lines 15-19: We have defined a simple arc generator, arc, using d3.arc().
• Lines 20-24: We defined the donut arc generator, d_arc, using d3.arc().
• Lines 25-32: We have appended the two arcs with the help of two arc generators, namely arc and d_arc.