Search⌘ K
Home
Courses
Introduction to Visualization Using D3.js

Solution Review: Draw a Donut Chart

Explore how to transform a pie chart into a donut chart in D3.js by modifying the innerRadius property. Learn the difference between pie and donut charts and gain insights into basic chart construction including paths and generators.

We'll cover the following...

Solution

Explanation

The solution is straightforward.

  • We have made the same pie chart as we did in the Draw a Pie Chart lesson.
  • The only difference between the pie chart and the donut chart is innerRadius in line 29. It has a value of zero in the pie chart and a positive value in the donut chart. That’s why we have changed the innerRadius() and set it equal to 50.