From the course: D3.js Essential Training

Unlock this course with a free trial

Join today to access over 25,500 courses taught by industry experts.

Solution: Create a donut chart

Solution: Create a donut chart - D3.js Tutorial

From the course: D3.js Essential Training

Start my 1-month free trial Buy for my team

Solution: Create a donut chart

“

(upbeat music) - [Instructor] Okay, so I hope that went okay for you. As a reminder, the challenge was to create a donut chart from our leisure data. Now the leisure data is in JSON, so we'll get the URL and pop it in like so. And then with the data to start with, we just check what we've got and we have an array of length five. So we're going to have five segments in our pie chart donut chart rather. And we have an hour's value and the data type, the numbers are preserved so we don't have to transform our numbers as we would with CSV. Our property values were also already in lowercase, so we didn't have to worry about that. Now we're going to need a radius, which I think we said was a minimum of the width or the height over two. And we're going to need a color scheme as well, deal with that a bit later. So let's dive into the pie. That sounds tasty pie.value. And for each object in the data that it will be supplied. We want to return the hours property D.hours like so. So remember…

Contents