Getting Started with Pie Charts

For this next project, we are going to draw a pie chart. Pie charts are another common type of chart to draw. They can show categories of data and how they are proportional to one another. The pie chart we will draw will show the estimated population by age as of 2015. The data was from the US census bureau for this example.

Currently, over 300 million people are living in the US. We can use a pie chart to display the total population. Each slice in a pie chart can display an age group to give the reader an idea of how many people are in each age group. Pie charts are great at showing demographics.

Reviewing starter project

Let’s get started. Here is the starter project we will be working on.

Let’s review the files together. Firstly, we have a standard HTML document. Nothing special is happening inside this file. We have the same setup we have been working with since the beginning. Up next, we have the CSS section. The CSS section contains a few styles but nothing new.

Let’s move onto the script section. A lot of it contains the same code we have been writing thus far. We are retrieving the files, setting the dimensions, and drawing the image. There is one thing to note about this code. We do not have accessor functions because we will not need them. Drawing pie charts takes a slightly different approach than most charts. We will go over the steps as we get to them.

Let’s take a peek inside the data file.

We will be ...