Angle Generator

Introduction

In order to draw arcs, we need the startAngle() and endAngle() as we have discussed in the previous lesson. In real-life data, we don’t have angle information associated with our data. We need some intermediate API between the data and the arc generator to draw pie or donut charts.

D3.js provides an API d3.pie(), which will add angle information to the data.

Let’s see the following code where d3.pie() is used to add angle information based on the value associated with language.

Explanation

Let’s understand the above code with the help of the following explanation.

• Line 1-7: We have defined random data where we have defined the percentages of different languages used by developers.
• In line 8, we have defined pie using d3.pie(), which will add additional angle info based on value.
• We can see the modified data on the console, such as the startAngle() and the endAngle() with each data element.

The following illustration shows the steps needed to draw a pie chart.