Challenge: Draw a Donut Chart

Can you draw a donut chart using the concept of the pie chart? A solution is placed in the "solution" section to help you, but we would suggest you try to solve it on your own first.

We'll cover the following

Problem statement

Draw a donut chart of (outerRadius=150) and (innerRadius=50) for given data using the concept of a pie chart. Use the d3.arc() and d3.pie APIs to draw the donut chart.

Given data

var margin = {top: 20, right: 20, bottom: 60, left: 80},
     width = 500 - margin.left - margin.right,
     height = 500 - margin.top - margin.bottom;
var data = [
  {language:  "Python", value: 30},
  {language:  "Java", value: 20},
  {language:  "C/C++", value: 15},
  {language:  "Javascript", value: 35},
  {language:  "PHP", value: 15},
];
colors=["#00A5E3","#FF96C5","#00CDAC","#FFA23A","#74737A"]

Expected output

Expected output

Coding exercise

The problem is designed to check your understanding, so you are encouraged to solve it on your own. If you are completely stuck, then refer to the next lesson which will explain the solution in detail.

Coding exercise