Chapter 5 Chart Your Data

Charts pull readers deeper into your story. Even if your data contains geographical information, sometimes a chart tells your story better than a map. But designing meaningful, interactive charts requires careful thought about how to communicate your data story with your audience.

In this chapter, we will look at main principles of chart design, and learn to identify good charts from bad ones. You will learn important rules that apply to all charts, and also some aesthetic guidelines to follow when customizing your own designs. In addition to static chart images, this book focuses on interactive charts that display more data when you float your cursor over them in your web browser. Later you’ll learn how to embed interactive charts on your website in chapter 7.

To begin, this grid of basic chart types will help you decide which type you wish to create. Your decision will be based on the format of your data, and the story you wish to tell, such as the type of data comparison you wish to draw to your reader’s attention. Once you choose your chart type, follow our tool recommendations to create it. This chapter features easy-to-learn drag-and-drop tools, such as the Google Sheets chart tool, and for more advanced charts, Tableau Public, the free version of the powerful software used by many data analysts and visualization practitioners. The grid also refers to more powerful chart tools, such as Chart.js and Highcharts templates in chapter 9, which give you ever more control over how your design and display your data, but also require learning how to edit and host code templates with GitHub in chapter 8.

Table 5.1: Chart types covered in this book
Basic chart types Best use and tutorial chapters
Grouped column or bar
Best to compare categories side-by-side. Vertical columns, or horizontal bars for long labels.
Easy tool: Google Sheets bar and column tutorial
Power tool: Chart.js and Highcharts templates
Separated column or bar
Best to compare categories in separate clusters. Vertical columns, or horizontal bars for long labels.
Easy tool: Google Sheets bar and column tutorial
Power tool: Chart.js and Highcharts templates
Stacked column or bar
Best to compare sub-categories, or parts of a whole. Vertical columns, or horizontal bars for long labels.
Easy tool: Google Sheets bar and column tutorial
Power tool: Chart.js and Highcharts templates
Histogram
Best to show distribution of raw data, with number of values in each bucket.
Easy tool: Google Sheets bar and column tutorial
Power tool: Chart.js and Highcharts templates
Pie chart
Best to show parts of a whole, but hard to estimate size of slices.
Easy tool: Google Sheets pie chart tutorial
Power tool: Chart.js and Highcharts templates
Line chart
Best to show continuous data, such as change over time.
Easy tool: Google Sheets line chart tutorial
Power tool: Chart.js and Highcharts templates
Filtered line chart
Best to show multiple lines of continuous data, with on-off toggle buttons.
Easy tool: Tableau Public filtered line chart tutorial
Stacked area chart
Best to show parts of a whole, with change over time.
Easy tool: Google Sheets stacked area tutorial
Power tool: Chart.js and Highcharts templates
XY Scatter chart
Best to show the relationship between two sets of data.
Easy tool: Google Sheets scatter chart tutorial or Tableau Public scatter chart tutorial
Power tool: Chart.js and Highcharts templates
Bubble chart
Best to show the relationship between three or four sets of data, using bubble size and color.
Easy tool: Google Sheets bubble chart tutorial
Power tool: Chart.js and Highcharts templates