Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Learn data visualization with d3js 400x277
  • Overview
  • Transcript

3.5 Pie and Donut Charts

Pie charts are the second most-used chart type, after line charts. Pie charts are great for showing the distribution of data.

3.5 Pie and Donut Charts

Hi, and welcome back to Learn Data Visualization with D3.js. In this lesson, we are going to have a look at pie and donut charts. A pie chart, or circle chart, is used to illustrate proportional relationships between data. A full circle represents 100%. And each slice, measured by the length of its arc, is a proportion of it. Usually you want to show the distribution of a data point. For instance, the size of each groups of participants in a sports tournament. Or how long you spend on different tasks during a day. The donut chart is exactly the same, but the created space in the middle is often used to present additional data. In our examples, above that could be the average age or the total hours spent on a day. It's gonna be very useful to visualize data and what's even better. It's that simple in D3. I've added out typical code including some H distribution data of the US tool file. There won't be any access on module this time. What we need instead is a radius. And to make it even more dynamic, I'm going to get the minimum value of width and height and divide it by 2 so that it fills the smallest size completely. Then we need a d3.pi function. It's responsible for transforming the data how we need it. In our case, there shall be no sorting, the data is already sorted and the value will be read from the value property. Then we are going to need an arc object. It's the path that gets drawn. The path has an outer and inner radius. If you set the inner radius to zero, it becomes a pie chart instead of a donut. I've determined that reducing the radius by 1.5 makes for a good looking chart. The next thing we need is a color scale to distinguish between the different groups. I'm going to use a pre-created color scheme that D3 provides. You can access it with the array accessory directly from the D3 object. It's called schemeCategory10 because it has ten different colors, more than we need. Finally, it's time for drawing. I'm going to use the pie data to create a group element of the class, arc. These data will have a start and an end angle that the arc function can use later. Then I'm going to append the path and pass in the path variable to create a data point. As well as the fill attribute that reads from the color scale. As with stacks, the raw data is stored in a data key. Let's have a look. It looks great, but I have no idea what data is what color. It would be nice to have a label for each group. When we're edit, I'm also going to add some padding between them which I can do by using pat angle with a value of 0.02 radians. Now onto the label. I'm going to add a text element like I did with the path. And give it a class of label to use the styles I already added before. The transform attribute is where the magic happens. We are going to return a translate directive that uses the path's centroid function to determine the coordinates. The centroids function calculates the point that is in the center of the area, radius wise and also arc wise. I'm also going to add a delta y attribute of 0.5em to center the text properly. Finally, the text value is taken from the age data attribute. Now the chart is useful. Of course, you don't have to have the values inside the chart, you can also position them differently. To do that, I'm going to duplicate the path arc, and rename it to label. I'm going to change the outer radius to what was the inner radius, before make the inner radius even smaller. Instead of the path centroid, we're going to use the label centroid function. After changing the color to black, you can see that the labels are now inside the ring. Let's recap. Pie charts are used to compare data distribution against each other. They're very easy to implement with B3 GS with the pie and arc functions. When using pie or donut charts, it's very important to add labels. In the next lesson, I will give you an overview of other advanced chart types that you can use in d3 gifs. See you there.

Back to the top