Pie Charts vs. Stacked BarCharts

Pie charts are a common graphic used to show parts-to-whole relationships of data. As the name suggests, the graphic is a circle divided into 'pieces of the pie' based upon the categories of the data. These types of charts are best when visually comparing categories to the whole and between categories.

Learning Objectives:

  1. Students will be able to create and customize pie charts from a dataset.
  2. Students will be able to access the information from the pie charts using assistive technology.
  3. Students will understand the differences between pie charts and stacked bar charts, especially in terms of accessibility.

Creating a Pie Chart using Quorum Studio (10 minutes)

To create a pie chart, we'll be following the Pie Charts tutorial. The creation of pie charts closely resembles other Quorum charts you might have seen in previous sessions.

First, we need to download the data we're going to use for our pie chart. In this lesson, we'll be using the Wine Reviews dataset (as a CSV file). If you are lost on how to download the dataset from GitHub, here is a link to our tutorial, Downloading CSVs for Our Charts.

The Wine Reviews dataset describes the wine itself, as well as its country, province, region, price and variety. It has 9 columns and 60 entries/rows of wines. We will be focusing on the 'Variety' column for this lesson, but in general any columns with recurring phrases or numbers would work. Here's a snippet of the dataset:

Wine Reviews
Province Region 1 Variety
CaliforniaNapa ValleyCabernet Sauvignon
Northern SpainToroTinta de Toro
CaliforniaKnights ValleySauvignon Blanc
OregonWillamette ValleyPinot Noir

To start creating a Pie Chart, we need to import two libraries. DataFrame, which is a frame where our chart will be drawn, and Pie Chart, which allows us to create a pie chart. Next, we will initialize a DataFrame and load a comma separated values file to the frame.

Currently, we have only loaded the comma separated value file into the dataframe, and we are not reading anything from it. The first thing that we need to do is to load the columns and factors to be read by our bar chart. Specifically, we will add the one factor that we will be using in this tutorial: 'Variety.' After we have loaded the factor, we need to create a pie chart object using the frame that we have filled. Finally, we can display the content of that pie chart. Next, we will be labeling and customizing our pie chart.

Labeling the Pie Chart (10 minutes)

The steps that we describe in this task can be followed in the 'Labeling the Pie Chart' section that is available in our Pie Chart tutorial. Labeling pie charts is similar to how you label our other types of graphs. Now we need to add labels to the pie chart. Add in a 'Title', a 'Legend Title', and 'Subtitle' text. We also can set the location of the legend 'bottom, right, left, top'.

First we will add a title and subtitle describing the graph. The title should be a brief summary of what the chart is, with the subtitle allowing you to go into slightly more detail. We can then add a legend title and set its location. The legend allows us to clearly label the information, without adding too much text to the graph itself. We chose the text 'Top Wine Reviews Based on Type' for the title, 'Praised wine categorized by type' for the subtitle and 'Variety' for the legend, but you can choose different text if you feel it describes the chart better. We set the legend location to 'bottom,' but this can be changed based on what you think looks best for your graph.

Customizing the Pie Chart (5 minutes)

The steps that we describe in this task can be followed in the 'Customizing The Data Chart' section that is available in our Pie Chart tutorial. While most of this is similar to other graphs, pie charts have a hole customization that's specific to them. Pie charts have unique aspects that allow for unique customization, such as the 'hole' in the middle of the pie chart, color palette, and font size.

We made a hole that's 10% of the chart, but you can choose a different percentage. Next, we can choose a color palette for the pie chart. Finally, you can set the font size. We chose to set it to 20, although this can be changed if you want. Make sure to set the font large enough, however, or else the text may become difficult to read. Also, note that the font size is based on an integer value but the 'hole' is based on a percentage.

Accessing the Pie Chart (5 minutes)

Now let's explore the graphic using the accessibility tools on your device. When the pie chart has been created, we should see our chart pop up in a separate window. From there, we can reference tutorial on keyboard navigation using the arrow keys for accessibility. One note is that when a pie chart is saved onto our computer devices, they save as an SVG (scalable vector graphic) which maintains not only resizability but accessibility to read these charts using a screen reader.

Pie Charts and Accessibility (10 minutes)

In 'Understanding Data Accessibility for People with Intellectual and Developmental Disabilities,' [1] they researched how accessible different types of graphs are for people with intellectual and developmental disabilities, with a focus on autistic people.

While they didn't exclusively focus on pie charts, half of the paper does look into whether pie charts are the most effective way to communicate data. In this case, 'effective' graphs would be ones that communicated the data quickly and correctly, so a graph that someone could see and be able to judge the rough proportions of each segment with relative ease.

To see which graph styles were most effective, the study looked into 3 areas: chart type (pie chart vs stacked bar chart vs tree map), continuity (whether the pie chart segments were separated or more done in a blended style), and embellishment (how much extra detail was added onto the chart).

The study then showed the charts to both people with IDD, autism, and neither in a random order, and asked them to judge value estimation (roughly what percentage a subset is) and value comparison (whether one subset is bigger or smaller than another).

They found that pie charts caused more inaccuracy in terms of value estimation, and that charts like stacked bar charts (like a bar chart, but with each bar split into parts) or tree maps (more like a pie chart, but using rectangles inside an overall rectangle instead of pie slices) helped people with both IDD and autism understand data more. For this reason, let us now consider a similar chart as a stacked bar chart instead.

This is a small disclaimer that there are minor bug layout issues for pie charts. Some titles and labels may overlap but do not completely hinder the use of the chart!

Converting to Stacked Bar Charts (10 minutes)

To convert to a stacked bar chart, we have to feed in more data to the chart. A stacked bar chart needs 2 category variables (for the different stacks and subsets within the stacks), and then another variable it measures. For this example, we're going to look at the total prices of different wine variants in each country.

First, we need to add the BarChart library, and change the chart initiation to be a bar chart instead of a pie chart. Next, we need to add 'country' as a factor, and 'price' as a column. The first factor is used for the main grouping, and so we want to add country as a factor before the line where we add variety, just to make sure country is our main subgroup.

Finally, you want to add the stack bars declaration before the display call (chart:StackBars(true)). This will turn it into a stacked bar chart instead of a regular bar chart. Stacked bar charts do show slightly different information compared to pie charts. If you did data manipulation beforehand, such as counting the number of each variety in each county, you could then use that data to reflect a more pie chart-like version of the data.

Breakout Rooms (5 minutes)

Breakout Discussion of the differences in the context of people with disabilities.

Question to consider: What are other potential considerations should we keep in mind when trying to make charts more accessible?

Talk through Breakout Rooms (5 minutes)

Just go around the groups and do a quick share out.

Relevant Common Core Standards

We use the following website for common core standards in relation to histograms and measurements of distribution.

CCSS.MATH.CONTENT.HSS.ID.A.1: Represent data with plots on the real number line (dot plots, histograms, and box plots).

CCSS.MATH.CONTENT.HSS.ID.A.1: Use statistics appropriate to the shape of the data distribution to compare center (median, mean) and spread (interquartile range, standard deviation) of two or more different data sets.

CCSS.MATH.CONTENT.HSS.ID.B.5: Summarize categorical data for two categories in two-way frequency tables. Interpret relative frequencies in the context of the data (including joint, marginal, and conditional relative frequencies). Recognize possible associations and trends in the data.


[1] K. Wu, E. Petersen, T. Ahmad, D. Burlinson, E. S. Tanis, & D. Albers Szafir. 2021. Understanding Data Accessibility for People with Intellectual and Developmental Disabilities. In Proceedings of the 2021 Conference on Human Factors in Computing Systems (CHI '21). http://cu-visualab.org/IDD/idd/assets/idd.pdf

Next Tutorial

In the next tutorial, we will discuss Filtering data, which describes Understanding statistics and how to filter data using Quorum..