How to design a useful and readable chart

The age of data visualization will not be outdated chart design! Today Ali's liuying students to a simple and efficient tutorial, two steps away, first taught you to accurately express the chart data, and then help you improve the readability of the chart, contains a lot of combat cases, dry goods full!

　　I. Purpose and value of the chart

Graphic design is a branch of data visualization, which is a two-time processing of data, rendering in the form of statistical charts. Data is the result of fact or observation, it is the logical generalization of objective things, usually a specific figure is more reliable and persuasive than a vague statement. But the simple number itself does not provide enough influence, assuming a Taobao women's March turnover is 500,000, the data itself does not explain what the problem, but when you add the April 600,000, May of the amount of money 700,000 and so on a number of months of data, through a line chart of the way to present, It can be judged that the turnover is an upward trend, combined with last year's sales curve and additional dimension information (Figure 1-1), it may be inferred that because of the seasonal increase in sales, the store can consider increasing the new summer money. So we say that graphs are a powerful means of interpreting numbers.

Figure 1-1 Shop turnover amount

As opposed to simple text, the brain's processing of graphical content can be more labor-saving. Each Chinese character can be seen as a graphical symbol, and when reading the text, the brain first decodes it, matching the shapes with the memory stored in the mind to understand its meaning. In a text, the decoding process of Chinese characters is linear in sequence, and the chart is decoded as a complete graph synchronously, so it is much faster than text (Figure 1-2). According to the relevant research, a high quality information map understanding is 30 times times higher than the pure text.

Figure 1-2 The amount of women's clothing accounted for

A study by usability specialist Jakob Nielsen shows that average people reading a Web page will read only about 20% of the text. People's attention is more and more fragmented, a lot of text makes it easy to read fatigue, the chart can better capture people's attention. In micro-BO, micro-letter and other channels of marketing communications, the data used in the form of charts to show more than pure text will be more clicks, collections and other values, but also more easily remembered, thereby creating a topic, creating Word-of-mouth marketing. Imagine the following words and graphs (Figure 1-3), which one would you rather share?

Highest peaks in 7 continents: Antarctica, Vinson massif, 16050 sq ft 4892 m South America, Aconcagua, Cerro, 22841 sq ft 6962 m Africa, Kilimanjaro Mt., 19340 sq ft 5892 M Asia, Mt. Everest, 29035 8848 m Europe, Elbrus, Gora 18510 sq ft 5642 m North America, Mckinley Mt. 20320 sq ft 6194 m Oceania, Kastentus 16024 sq ft 4884 m

Fig. 1-3 the highest peaks in 7 continents

　　Principles and methods of chart design in data products

Big Data is a very popular word in recent years, Ma Yun has said Alibaba's strategic goal for the next decade is to establish the DT data age China's business development infrastructure. Business staff is in this large environment incubation of a data product, aimed at small and medium-sized sellers to provide data operation ideas, by monitoring the day-to-day operation of stores and activities, to help sellers to adjust the operation of the shop. The opportunity to participate in this product from the establishment to the whole process of growth. Data products are the most inseparable from the graphic design, not only to ensure that the chart itself data clear and accurate, intuitive and understandable, but also in the search for the core content of the user's attention to appropriate highlighting, to help users make decisions through the data. Business staff This kind of data product is to integrate the idea of data operation into the design, guide the user to draw the valid conclusion through the data, assist the store management. In addition, has a certain design sense, the heart of the graphic design can also create more commercial communication value, enhance the brand image.

　　1, how to accurately express the data in the chart

Data products in the user is mainly the use of data for analysis and decision-making, so much emphasis on the accuracy of data. So how to accurately convey the data through the chart, first we have to define the definition and scope of use of each chart. The second is to use the correct way to draw the chart out of the expression can not be biased.

　　(1) Choose the right chart

Defining and using scenarios for each chart helps us to process data and communicate two times. Column charts, pie charts, line charts, and tables are the four most commonly used charts, but they are often confusing to use, so let's look at the definitions and types of these four basic graphs and find out the differences.

A. Column Chart

Also called the bar Statistic chart, the bar chart. is a statistical chart that takes the length of a rectangle as a variable. is commonly used to compare two or more values. Column charts are common in the following 4 kinds:

Vertical Column chart, the most common column chart; Horizontal column chart, generally in accordance with the size of the numerical arrangement; Clustered Column chart for multiple sets of data comparisons, emphasizing the internal comparison of a group of data; Stacked column charts, used for multiple sets of data comparisons, and clustered column charts, stacked column charts emphasize the relationship of parts to the whole in a set of data.

B. Pie chart

A statistical chart that expresses the size of a value in degrees of the center of the radius. Commonly used in the representation of the ratio of data, the pie chart of the sum of 100%, the most suitable for the expression of a single theme, that is, part of the overall proportion. The type of pie chart is relatively few, mainly has the following three kinds:

A basic pie chart that includes regular pie charts and doughnut-shaped pie charts; Semi-circular pie chart, in some scenes, semicircle will be more convenient typesetting, conducive to alignment. And the annotation information also facilitates the presentation; Composite pie charts, when the pie size is too large, you can combine the last several items into other classes, showing the composition of these items in a level two chart.

C. Line chart

A chart that displays continuous data over time or in ordered categories by means of line fluctuations (ascent or descent). Often used to emphasize changes or trends in data. Line charts can be divided into single, multiple, stacked:

A single line chart showing only one set of data fluctuations; Multiple line charts, displaying multiple sets of data fluctuations; Multiple stacked line charts that show multiple sets of data fluctuations, while displaying the changes in the combination of multiple sets of data. Multiple Data overlay (stacked graph), recommended area map, do not recommend the use of Line chart form

D. Forms

An orderly form of organization consisting of rows and columns that can display large amounts of data efficiently. There are a variety of forms, in addition to simple text and numbers, we can add pictures, operations, and many other types. Tables are the most diverse and special types of charts.

base table, static plain text class basic table; Content Compound table, a more complex table Form combined by other content types; Manipulating a composite table, the user's behavior affects the table style or feature.

　　(2) Correct drawing of the chart

Once you've learned about four charts, we've completed the first step of accurate presentation of data by choosing the right type of chart, and the second step is to draw the chart correctly. Incorrect selection of axes, or lack of key elements, can result in a decrease in the accuracy of the chart, with no apparent meaning.

A. Column Chart

Data product charts emphasize the accuracy of the data, usually zero baselines are essential, in order to emphasize the starting position, the color is darker than other gridlines. Considering the difference between different display devices, it is recommended to take at least 94 of the gray value to ensure clear identification, color too shallow on some devices can not show clearly.

Figure 2-14 0 baselines in a column chart

The width of the column is D, the spacing between the columns suggests between 1/2d and D, and the spacing between two pillars in a clustered column is suggested as 1/8d. This ensures that the columns will not be too dispersed--losing the correlation between the data and not being dense--guaranteeing data independence and comfortable reading.

Figure 2-15 Spacing between columns

B. Pie chart

Pie charts in general, we use the drawing method, according to the user's reading habits, from top to bottom, with the clock 12 points as the starting point, clockwise configuration fan (Figure 2-16).

Fig. 2-16 Drawing method of pie chart

However, this method of rendering is not enough, in the focus of the user's view-the top half of the pie chart, the unimportant minimum data items and the largest data items occupy the visual focus. In order to solve this problem, we have done some optimization on this basis, the same as the starting point of clock 12, the first counterclockwise to draw the largest slice, then back to 12 points, clockwise draw the second large slice, the rest of the slices are drawn in sequence (figure 2-17). This approach makes the focus of the user's view-the top half of the pie chart is the most important data. But there is a small disadvantage to this method: When you have more than one pie chart, 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 method According to different use scene.

Fig. 2-17 Drawing method of pie chart

C. Line chart

Line charts are often used to represent changes and trends in data, and the range of changes in the different lines of the axes is greatly affected. The value of the axis is set too high, the line changes too smooth, masking the reality can not clearly show the change of the polyline. Conversely, if the axis set too low, it will let the polyline changes too steep, too exaggerated exaggerated the trend of the line change.

Figure 20 percent-18 percent drawing method of line

　　2, how to improve the readability of the chart

Data products are often filled with a large number of figures and graphs, users easily submerged in the sea of data, in addition to accurate expression of the data, enhance the readability of the chart is a data product in the graphic design of a significant feature. The text portion of a chart is usually interpreted as a specific numeric value and a numerical value. By making proper typesetting of these texts, the user can quickly understand the chart and achieve the goal of efficient reading.

A. Column Chart

Axis labels Use horizontal arrangement, do not recommend the vertical arrangement or tilt arrangement, words are more difficult to read. The use of some labels in a column chart also applies to line charts.

Fig. 2-19 The label Arrangement horizontal column Chart of column chart generally simplifies the coordinates, the data value follows the column chart, and the data ink ratio is increased.

Figure 2-20 Horizontal Column chart When the axis labels are too long, vertical columns cannot display all the axis labels, with the following solutions:

A horizontal column chart can be used to increase the display space of the label.

Figure 2-21 Horizontal Column chart

Displays the master scale, the rest of the data is omitted, and is displayed by interactive action. For example, Show 2010 Years/2011, and the year inside the specific month hidden, hover. Like the horizontal axis in figure 2-22. The value of a high number can be converted into units. For example, 500,000 shows 500,000, more in line with Chinese reading habits, and save space. Like the ordinate in figure 2-22.

Figure 2-22 The scale value of the column chart

B. Pie chart

Displayed in a pie chart with a percentage value.

Information coherent visual concentration, theoretically the most appropriate position. However, it is limited by the shape and size of the pie chart itself and is easily overrun with too much text.

Figure 2-23 Label for pie chart

Use the Guide line to display at the appropriate location around the pie chart.

A guide line can associate slices with labels effectively, and can display more characters. When the guide line is more, the deformation regularity can be carried out. In the data product is usually the activity data, the value size is often changing, the label and guide line position is not fixed, typesetting is difficult to control.

Figure 2-24 a pie chart with a guide line

The values and labels are separated from the display.

The label character count is not limited, but the label is separated from the pie chart and needs to be read against.

Figure 2-25 Value and label separation display

The toggle label of the interactive action is displayed in the blank space of the circular pie.

The blank part is not affected by the slice size, and the labels and values can be displayed together. Applies to emphasize when a slice value. The corresponding relationship between the label and the slice needs to be explained with interactive operation, and the data display is hidden.

Figure 2-26 Tag with interactivity

C. Forms

The longitudinal contrast of text information can form a visual guide line well, which accords with the similar principle in Gestalt psychology. Different data types have different alignment. Generally speaking, the text is left aligned and the data is right aligned to compare the magnitude and size of the data by the number of digits.

Figure 2-27 Alignment of the table

Text that represents a state, usually with only a few types (such as completed, pending payment, etc.), that can be centered. Closely related fields can be arranged in a group to enhance the correlation between data, while reducing the amount of data groups, but also convenient for users to locate information quickly.

Figure 2-28 Alignment of the table