Data visualization: basic charts

Author: 阮一峰 “Data visualization” helps users understand data, and has always been a hot direction. Charts are a common means of “data visualization”, among which the basic charts——bar chart, line chart, pie chart and so on——are the most commonly used. Users are very familiar with these charts, but if asked what their characteristics are and which occasions (data sets) they suit best, probably not many people could answer. This article is a note on the first chapter of the e-book 《Data Visualization with JavaScript》, summarizing the characteristics and applicable occasions of six basic charts, and answering the above question very well.

Zero. Preface

Before getting to the point, let me first correct a misconception. Some people feel that basic charts are too simple, too primitive, not high-end or impressive, and therefore pursue more complex charts. But the simpler the chart, the easier it is to understand, and quickly and easily understanding data is precisely the most important purpose and highest pursuit of “data visualization”, isn’t it? So please don’t look down on these basic charts. Because users are most familiar with them, wherever they are applicable you should consider using them first.

One. Bar Chart

The bar chart is the most common chart and also the easiest to interpret. It applies to two-dimensional data sets (each data point includes two values x and y), but only one dimension needs to be compared. Annual sales is two-dimensional data; “year” and “sales” are its two dimensions, but only the single dimension “sales” needs to be compared. The bar chart uses the height of the bars to reflect differences in the data. The naked eye is very sensitive to height differences, so the recognition effect is very good. The limitation of the bar chart is that it only applies to small and medium-sized data sets. Generally speaking, the X axis of a bar chart is the time dimension, and users habitually assume a time trend exists. If you run into a case where the X axis is not the time dimension, it is recommended to use color to distinguish each bar, to change the user’s focus on a time trend. The image above shows the number of wins of each team in a certain year of the English football league; the X axis represents the different teams, and the Y axis represents the number of wins.

Two. Line Chart data

The line chart suits large two-dimensional data sets, especially those occasions where the trend is more important than individual data points. It is also suitable for comparing multiple two-dimensional data sets. The image above is a line chart of two two-dimensional data sets (atmospheric carbon dioxide concentration, average surface temperature).

Three. Pie Chart

The pie chart is a chart that should be avoided, because the naked eye is not sensitive to area size. In the image above, the area ordering of the five colored segments in the left pie chart is not easy to see. Switched to a bar chart, it becomes much easier. In general, you should always use a bar chart instead of a pie chart. But there is one exception, which is reflecting the proportion of a certain part to the whole, such as the percentage of the poor population in the total population.

Four. Scatter Chart

The scatter chart applies to three-dimensional data sets, of which only two dimensions need to be compared. The image above shows each country’s healthcare spending and life expectancy; the three dimensions are country, healthcare spending and life expectancy, and only the latter two dimensions need to be compared. To identify the third dimension, you can add a text label or a different color to each point.

Five. Bubble Chart

The bubble chart is a variant of the scatter chart, reflecting the third dimension through the area size of each point. The image above is the path of Hurricane Katrina; the three dimensions are longitude, latitude and intensity. The larger the point’s area, the greater the intensity it represents. Because users are not good at judging area size, the bubble chart only applies to occasions that don’t require precisely identifying the third dimension. If you add different colors (or text labels) to the bubbles, the bubble chart can be used to express four-dimensional data. For example, the image below uses color to represent the wind level of each point.

Six. Radar Chart

The radar chart applies to multi-dimensional data (four dimensions or more), and each dimension must be sortable (nationality cannot be sorted). However, it has a limitation: there can be at most 6 data points, otherwise they cannot be distinguished, so its applicable occasions are limited. Below is the data of the five starting basketball players of the Miami Heat. Besides the name, each data point has five dimensions: points, rebounds, assists, steals and blocks. Drawn as a radar chart, it looks like the following. The larger the area of a data point, the more important it is. Obviously, LeBron James (the red area) is the Heat’s most important player. Note that users are unfamiliar with radar charts and have difficulty interpreting them. When using one, add explanations as much as possible to reduce the burden of interpretation.

Seven. Summary

Chart

Dimension

Points to note

Bar chart

Two-dimensional

Only one of the dimensions needs to be compared

Line chart

Two-dimensional

Suitable for larger data sets

Pie chart

Two-dimensional

Only suitable for reflecting the relationship between part and whole

Scatter chart

Two- or three-dimensional

Two dimensions need to be compared

Bubble chart

Three- or four-dimensional

Only two of the dimensions can be precisely identified

Radar chart

Four dimensions or more

No more than 6 data points