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"]
Get hands-on with 1200+ tech skills courses.