How to Visualize Data Composition

One of the most common uses of charts is illustrating part-to-whole relationships, aka. “data composition.” Pie charts may be the most popular chart type for this purpose, but other chart types may be just as good (or much better). In this article, we will look at ways to effectively communicate parts-to-whole relationships effectively using pie, donut, sunburst, stacked bar/column, stacked area, and treemap charts.

Which chart to use is primarily driven by the nature of the data. As a rule of thumb, for simple datasets (six or fewer elements), a pie or donut chart works well. For more dense datasets, other charts are better to illustrate composition, such as stacked bar, column, or area charts. For nested (hierarchical) data sets, a sunburst and treemap might be right for the job.

Let's explore these chart types and see where we might want to pick chart type over another.

Simple Data Set

Pie Chart

The pie chart is the most popular way to visualize composition, thanks to its simple design. The ingredients or elements are presented as fractional parts of a whole. The chart below shows the composition of gasses in the air we breathe.

Nitrogen, in blue, is the most dominant component of the air with 78%, where Oxygen, in green, represents 20.9% of the air composition.

A pie chart, like all the composition charts, can be easily designed to meet the needs of people with disabilities (check demo below):

Remark
A pie chart with more than six elements makes it hard to differentiate similar “slices.” But, even with a low number of slices, you can increase readability by how you order the slices.

Donut Chart

Speaking of donuts, the Donut chart is the same as a pie chart, but only displays an area along the outer edge of the pie. It becomes easier to compare the elements to each other.

The demo below shows the air composition using a donut chart:

Nested Data Set

Sunburst

The sunburst chart looks like a pie chart nested by one or more Donut charts. It is a comprehensive, yet, compact way to show the composition of a data set that contains a parent-child relationship.

The chart below represents the protein content in 100 grams of different kinds of food:

The chart above is structured along with four primary categories (the inner pie chart) with distinct colors: Meat, Fish, Grains & Seeds, and others. The outer “donut chart” breaks down each primary category into smaller elements, ordered from the highest to the lowest protein content.

This chart can get really busy, and should, therefore, be used with care. The primary reason for choosing this chart over similar charts, like the treemap, would be that you want all the child-elements to be immediately visible.

One thing to note, however, is that the Sunburst chart does allow for drill-down, as well. If your audience is able to interact with the chart, it is possible to unveil the child-level data by clicking on a parent item (see demo below):

Treemap

The Treemap, like Sunburst, visualizes the composition of a nested dataset. For some datasets, either chart type could be used, as long as the number of child-level slices isn't too densely laid out to be readable. For data-dense charts, the Treemap is an ideal choice.

The treemap demo below shows the same data as the previous sunburst chart; it also has the drill-down option to allow the reader to explore the data further.

Remark

Both the Sunburst and Treemap charts display nested data sets. Nevertheless, each chart type has its own advantages and limits.

The Sunburst chart allows the readers to see all the details quickly, and it is an ideal static chart type, but this comes at the expense of the space, since the sunburst requires a large area to display a large amount of data.

The Treemap, on the other hand, is perfect for a compact and limited space, where readers have the option to explore the data to get more insight thanks to its drill-down feature. While the Treemap is easy to read, even in its initial "static" state, its power is really unparalleled as a compact, interactive chart.

Time Series

Stacked Column Chart

A Stacked Column chart is great for displaying the composition of time series data that is also broken down into categories. The temporal aspect is something that pie and sunburst charts can not show.

The chart below displays the percentage composition of the foreign-born population in the US from 1960 to 2016. A stacked column is the perfect chart to visualize such data, since data composition and progress over time are shown on the same chart.

According to the chart, European and Canadians were the major immigrant groups in the US, from the 60s to the 90s. From the 2000s, 75% of the immigrants are from Asia, Latin America, and Mexico, where the European and Canadian groups are around 14%.

Stacked Bar Chart

Stacked bar charts are similar to the stacked column chart, except that the data is displayed horizontally instead of vertically.

The bar stacked chart below displays the same data as the column stacked chart used above:

Remark

If you have data with a long list on the X-axis, then the stacked bar chart is the right choice, as the stacked bar chart progresses vertically. This can be favorable for mobile devices, as you can scroll up and down to see the full timeline.

Stacked Area

Stacked area charts are like column and bar stacked charts; they are all used to display the progress of data composition over time. Stacked area charts offer an attractive trend display thanks to the smooth flow representation using area instead of columns or bars (check the demo below):

Due to the area structure, a stacked area chart is a very effective accessible chart (see demo below):

Hopefully, this made you think about how to best visualizations for your data. Feel free to share in the comment section below your favorite tricks and tips to visualize data composition most effectively.

Further Reading

• 10 Best JavaScript Charting Libraries for Any Data Visualization Need.