Creating the donut

The complete source file for this sample is a bit long, so we won't show it completely. You can, of course, look at the complete annotated sources here: <DVD3>/src/chapter-02/D02-01.html. In the following sections, we'll explore the steps you need to take to create this visualization:

1. First, we need to load our sanitized data so that we can use it to create the donut.
2. Next, we're going to add the dropdown you can see at the top. With this dropdown, we can select which group we want to show in the donut.
3. Before we look at the D3 code needed to create the donut, we set up some helper objects for handling colors and determining the arc segments dimensions.
4. When you open the page for the first time, we see an empty gray donut. This one we'll add next.
5. Then we add the inpidual donut segments-based on the selected group from the dropdown and make sure that they are animated when a new group is selected.
6. Besides the arc segments, we also have labels that describe what a specific segment means. We add and animate these separately.
7. We also add and animate the lines pointing from the center of a donut segment to the text label.
8. Use mouse events to show a percentage and pop out a donut segment.

Lots of steps to take, but as you'll see, most will follow the same principles we've already learned about in the previous chapter.