Preparing data for pie and doughnut charts

Pie charts can't be used with any type of data. They should only be used to display part-whole relationships and contain not much more than half a dozen data values. The following screenshot shows what happens when you create a pie or doughnut chart with too much data. In this example, we loaded a doughnut chart containing the populations of almost 200 countries. It may be art, but not really a useful visualization:

Abusing a pie chart (code: Pie/pie-4-evilpie.html; see also Pie/pie-6-evilpie.html)

Even if you reduce this dataset to less than 20 values, it would still not be efficiently displayed in a pie chart. There aren't enough colors, and it would be difficult to place labels inside or beside so many slices, not considering the fact that angles are much harder to compare. In such cases, you should switch to a bar chart, which can be used to efficiently compare 20 values or even more.

The following screenshot shows a bar chart created with the same data, filtered to show the 35 most populous countries:

A bar chart is a better choice than a pie chart to compare large datasets (code: Pie/pie-5-evilpie-as-bar.html; see also Pie/pie-7-evilpie-as-bar.html)

If you still want to use a pie chart, you need to reduce the data sample, but it's not enough to simply filter out data (for example, by including only the most populous countries). Since a pie chart should display part-whole relationships, but you also need to add the excluded items (for example, add up the populations of the smaller countries, as in the CO2 emissions example).

This is done in the following example: it loads and parses a CSV data file, sorts the data by population, creates an array of objects with the largest countries, and finally, adds up all of the other populations into a new others entry.

To parse the CSV, we are using the popular PapaParse library (github.com/mholt/PapaParse). You can include it in your page using the following code:

<script   
src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.6.0/papaparse.min.js">
</script>

PapaParse reads CSV and transforms the data into a JavaScript array, where each row is an object with the column headers as keys. To obtain the data from any CSV file where the first row contains the headers (which is the most common case), use the following code:

const data = Papa.parse(csv, {header: true}).data;

Now, for each array item, you can access the values using item.header or item['header'].

The following code loads the CSV, parses it, and calls a function to reduce the data. The reduced data is then passed to the drawData() function that will use Chart.js to draw the pie, as follows:

 const numberOfEntries = 6; // change this to include more countries

fetch('../Data/WPP2017_UN.csv')
.then(response => response.text())
.then((csv) => {
const data = Papa.parse(csv, {header: true}).data;
const reduced = reduceData(data);
drawData(reduced);
});

The reduceData() function filters the countries with the largest population (that is, by sorting by population, and then slicing the array), and adds the populations of the remaining countries to create the others entry, as follows:

 function reduceData(array) {
array.sort((a, b) => a["2015"] - b["2015"]);

const topEntries =
array.slice(array.length - numberOfEntries,array.length)
.map(d => ({country: d["Country or region"], data:
+d["2015"]}));

let others = array.slice(0, array.length - numberOfEntries);
const sumOthers = others.map(d => +d["2015"]).reduce((a,b) => a+b, 0);
others = {country: "Others", data: sumOthers};
topEntries.push(others);
return topEntries;
}

The drawData() function prepares the data so that it can be used by Chart.js, and uses the result to populate the chart's labels, datasets[0].data and datasets[0].backgroundColor, as follows:

 function drawData(data) {
const dataset = [], labels = [], colors = [];
let count = 0;
data.forEach(d => {
dataset.push(Math.round(d.data/1000));
labels.push(d.country);
colors.push('hsla('+(count++ *
300/numberOfEntries)+',100%,70%,.9)');
});

const dataObj = {
labels: labels,
datasets: [
{
data: dataset,
backgroundColor: colors,
borderWidth: 5,
hoverBackgroundColor: 'black',
hoverBorderColor: 'white'
}
]
}

const chartObj = {
type: "doughnut",
data: dataObj,
options: {
title: {
display: true,
position: 'left',
fontSize: 24,
text: "World population (millions)"
},
legend: {
position: 'right'
},
pieceLabel: {
fontColor: '#000',
render: 'value',
textShadow: true,
position: 'border'
}
}
};
new Chart("my-pie-chart", chartObj);
}

You can see the full code in Pie/pie-8-filter.html. The final result, showing six countries compared to all of the others, is shown as follows:

A doughnut chart comparing the most populous countries with the rest of the world (code: Pie/pie-8-filter.html)
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset