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.