Full of practical information, making data interesting! How to design practical and easy-to-read charts

1. The purpose and value of charts

Chart design is a branch of data visualization. It is a secondary processing of data and presenting it in the form of statistical charts. Data is the result of facts or observations, and is a logical summary of objective things. Usually, a specific number is more credible and persuasive than a vague statement. But the simple number itself cannot provide enough influence. Suppose a Taobao women's clothing seller has a transaction amount of 500,000 in March. This data itself does not explain anything. But when you add the data of 600,000 in April and 700,000 in May, and present it in the form of a line chart, you can judge that the transaction amount is on an upward trend. Combined with the sales curve of the same period last year for comparison and supplemented with other dimensional information (Figure 1-1), it may be inferred that the sales volume has increased due to the change of seasons, and the store can consider increasing the launch of new summer models. So we say that charts are a powerful means of interpreting numbers.

Figure 1-1 Store transaction amount

Compared with pure text, the brain takes less effort to process graphical content. Each Chinese character can be regarded as a graphic symbol. When reading text, the brain first decodes them one by one, matching these shapes with the memories stored in the mind to understand its meaning. In a text, the decoding process of Chinese characters is linear and sequential, while the chart is decoded synchronously as a complete graphic, so it is much faster than text (Figure 1-2). According to relevant research, the comprehension of a high-quality infographic is 30 times higher than that of pure text.

Figure 1-2 Proportion of women's clothing sales

A study by usability expert Jakob Nielsen shows that the average person only reads about 20% of the text on a web page. People's attention is becoming more and more fragmented, and large amounts of text can easily cause reading fatigue. Charts can better capture people's attention. In marketing communications on channels such as Weibo and WeChat, presenting data in the form of charts will get higher clicks, collections, and other values ​​than pure text, and it is also easier to be remembered, thereby creating topics and building word-of-mouth marketing. Imagine the following text and chart (Figure 1-3), which one would you rather share?

The tallest mountains in the seven continents are: Antarctica, Mount Vinson, 16,050 feet 4,892 meters South America, Mount Aconcagua, 22,841 feet 6,962 meters Africa, Mount Kilimanjaro, 19,340 feet 5,892 meters Asia, Mount Everest, 29,035 8,848 meters Europe, Mount Elbrus, 18,510 feet 5,642 meters North America, Mount McKinley, 20,320 feet 6,194 meters Oceania, Mount Karsten 16,024 feet 4,884 meters

Figure 1-3 The tallest mountains in the seven continents

#p#

2. Principles and methods of chart design in data products

Big data is a very popular word in recent years. Jack Ma once said that Alibaba's strategic goal for the next ten years is to build the infrastructure for China's business development in the DT data era. Business Advisor is a data product incubated in this environment, aiming to provide small and medium-sized sellers with ideas for data-based operations, and help sellers adjust their store operations by monitoring the daily operations and activities of the store. I was fortunate to participate in the entire process of this product from its establishment to its growth. The most indispensable part of data products is actually chart design. It is necessary to ensure that the data of the chart itself is clear, accurate, intuitive and easy to understand, and to appropriately highlight the core content that users are concerned about, so as to help users make decisions through data. Business Advisor is a data product that integrates the idea of ​​data-based operations into the design, guides users to draw effective conclusions through data, and assists store operations. In addition, chart designs with a certain sense of design and that impress people can also create more commercial communication value and enhance brand image.

1. How to accurately express the data in the chart

In data products, users mainly use data for analysis and decision-making, so the accuracy of data is very important. So how to accurately convey data through charts? First, we must clarify the definition and scope of use of each chart. Secondly, we must use the correct method to draw the chart without any deviation in expression.

(1) Choose the right chart

Clarifying the definition and usage scenarios of each chart will help us process and communicate data. Column charts, pie charts, line charts, and tables are the four most commonly used charts, but they are often confused. Let's take a closer look at the definitions and types of these four basic charts and find the differences between them.

A. Column chart

Also known as a bar chart, a bar graph. It is a statistical chart that uses the length of a rectangle as a variable. It is often used to compare two or more values. There are four common types of bar charts:

Vertical bar chart, the most common bar chart; Horizontal bar chart, generally arranged according to the size of the values; Clustered bar chart, used for comparing multiple groups of data, emphasizing the comparison within a group of data; Stacked bar chart, used for comparing multiple groups of data, different from clustered bar chart, stacked bar chart emphasizes the relationship between the part and the whole in a group of data.

B. Pie chart

A statistical chart that uses the degree of the central angle of a circle to express the size of a value. It is often used to express the proportion of data. The sum of each item in a pie chart is 100%, which is most suitable for expressing a single theme, that is, the proportion of a part to the whole. There are relatively few types of pie charts, mainly the following three:

Basic pie charts include regular pie charts and ring pie charts; Semicircle pie charts: In some scenarios, semicircles are more convenient for layout and alignment. They also facilitate presentation of annotation information; Composite pie charts: When there are too many sectors in a pie chart, you can combine several items in the *** into other categories and present the composition of these items in a secondary chart.

C. Line chart

It is a chart that shows the change of continuous data over time or ordered categories through the fluctuation of lines (rising or falling). It is often used to emphasize the change or trend of data. Line charts can be mainly divided into single line, multiple lines, and stacked:

A single line chart only shows the fluctuation of one set of data; multiple line charts show the fluctuation of multiple sets of data at the same time; multiple stacked line charts show the fluctuation of multiple sets of data and the changes of the sum of multiple sets of data at the same time. When multiple data are superimposed (stacked chart), it is recommended to use an area chart, not a line chart.

D. Table

A table is an orderly organization consisting of several rows and columns. It can efficiently display a large amount of data. There are many types of tables. In addition to simple text and numbers, we can also add pictures, operations and other types. Tables are the most diverse and special types of charts.

Basic tables are basic tables of the static plain text type; Content composite tables are more complex table forms combined with other content types; Operation composite tables are tables in which user behavior affects the style or features of the table.

(2) Correctly draw the chart

After understanding the four types of charts, we have completed the first step of accurately expressing data by choosing the appropriate chart type, so the second step is to draw the chart correctly. Wrong axis selection or missing key elements will lead to reduced accuracy of the chart and unclear meaning.

A. Column chart

The charts of data products emphasize the accuracy of the data. Usually, the zero baseline is indispensable. In order to emphasize the starting position, the color should be darker than other grid lines. Considering the differences in different display devices of users, it is recommended to take a grayscale value of at least 94 to ensure clear identification. If the color is too light, it cannot be displayed clearly on some devices.

Figure 2-14 Zero baseline in a bar chart

If the width of a column is D, the recommended spacing between columns is between 1/2D and D, and the recommended spacing between two columns in a clustered column chart is 1/8D. This ensures that the columns are not too scattered, which means that the data is not related, but also not too dense, which ensures the independence of the data and comfortable reading.

Figure 2-15 Spacing between columns

B. Pie chart

The method we usually use to draw pie charts is to arrange the sectors clockwise from top to bottom, starting at 12 o'clock on the clock, according to the user's reading habits (Figure 2-16).

Figure 2-16 How to draw a pie chart

However, this drawing method has a disadvantage. In the upper half of the pie chart, which is the focus of the user's vision, the unimportant smallest data item and the largest data item occupy the visual focus. In order to solve this problem, we made some optimizations on this basis. Starting from 12 o'clock on the clock, we first draw the largest slice counterclockwise, then return to 12 o'clock, draw the second largest slice clockwise, and draw the remaining slices in sequence (Figure 2-17). This method makes the upper half of the pie chart, which is the focus of the user's vision, the most important data. However, this drawing method also has a small disadvantage: when there are multiple pie charts, the starting position of each pie chart is different (the position marked by the question mark in the figure). You can choose different pie chart drawing methods according to different usage scenarios.

Figure 2-17 How to draw a pie chart

C. Line chart

Line charts are often used to show data changes and trends. Different coordinate axes have a great impact on the change range of the line. If the value of the coordinate axis is set too high, the line changes too slowly, covering up the reality and failing to clearly show the change of the line. On the contrary, if the coordinate axis is set too low, the line changes too steeply, exaggerating the trend of the line change.

Figure 2-18 How to draw a polyline

#p#

2. How to improve the readability of charts

Data products are often filled with a large number of numbers and charts, and users are easily drowned in the ocean of data. In addition to accurately expressing these data, improving the readability of charts is also a significant feature of chart design in data products. The text part of the chart is usually a specific value and an explanation of the meaning of the value. By properly typesetting these texts, users can quickly understand the chart, thereby achieving the purpose of efficient reading.

A. Column chart

The labels of the coordinate axis should be arranged horizontally. It is not recommended to arrange them vertically or tilted. It is difficult to read when there are many words. The usage of some labels in the column chart is also applicable to the line chart.

Figure 2-19 Label arrangement of column chart

Horizontal column charts generally simplify the coordinates, with the data values ​​following the column chart, increasing the data-ink ratio.

Figure 2-20 Horizontal column chart

When the axis labels are too long, the vertical column chart cannot display all axis labels. There are several solutions:

You can use a horizontal column chart to increase the display space of the label.

Figure 2-21 Horizontal column chart

The main scale is displayed, and the rest of the data is omitted and displayed through interactive actions. For example, 2010/2011 is displayed, and the specific months in the year are hidden and appear when hovering. As shown in the horizontal axis of Figure 2-22. The high-digit values ​​can be converted into units. For example, 500,000 is displayed as 500,000, which is more in line with Chinese reading habits and saves space. As shown in the vertical axis of Figure 2-22.

Figure 2-22 Scale values ​​of a bar chart

B. Pie chart

Displayed in pie charts together with percentage values.

The information is coherent and visually focused, which is theoretically the most suitable position. However, due to the shape and size of the pie chart itself, it is easy to overflow when there are too many words.

Figure 2-23 Pie chart label

Use guide lines to display them in appropriate locations around the pie chart.

Guide lines can effectively associate slices with labels and display more characters. When there are many guide lines, they can be deformed and regularized. In data products, the data is usually active, and the values ​​are often changing. The positions of labels and guide lines are not fixed, making it difficult to control the layout.

Figure 2-24 Pie chart using guide lines

The value and label are displayed separately.

There is no limit to the number of characters in a label, but the label is separated from the pie chart and needs to be read in comparison.

Figure 2-25 Separate display of values ​​and labels

The interactive action switches the label to be displayed in the blank space of the doughnut.

The blank part is not affected by the slice size, and the label and value can be displayed together. It is suitable for emphasizing the value of the slice. The corresponding relationship between the label and the slice needs to be accompanied by interactive operation instructions, and the data display is relatively hidden.

Figure 2-26 Label with interaction

C. Table

The vertical column contrast of text information can form a good visual guide line, which conforms to the principle of proximity in Gestalt psychology. Different data types have different alignment methods. Generally speaking, text is left-aligned and data is right-aligned, which is convenient for comparing the magnitude and size of data by the length of digits.

Figure 2-27 Alignment of the table

Texts that indicate status usually have only a few fixed types (such as completed, pending payment, etc.), so they can be centered. Fields that are closely related can be grouped together to strengthen the relevance between data, while reducing the amount of data groups and making it easier for users to quickly locate information.

Figure 2-28 Alignment of the table