Various infographic Application Notes

With multiple elements \ Combinations, it's important to consider the priority, like the core and the disposable part of the rocket, and if we can only show the content in a smaller space, what should we leave it with?

It is in the work groping, to the data chart in the mobile phone side of the application of a point of collation and refinement; Each of the underlying charts has its own characteristics, mastery of its qualities, and the ability to use it to do more innovation, is the value of visual data. Data is not boring, interesting data charts are its best translators. The above views, cases and thinking inevitably superficial, one-sided, more and better applications to continue to dig.

In the process of collating the example, think of how early in the app, how to migrate the Web-side or client business to the phone: take the backbone of the business to the core. Now, as the proportion of mobile phone applications increases dramatically, it is important to make efforts to focus on the main tasks or provide effective guidance to users, in addition to the core backbone. In the case of data-class apps, in a limited space, aggregating data or calling key indicators is indispensable, and the data table will appear relatively small, and the structure of the elements will roughly become like this:

With multiple elements \ Combinations, it's important to consider the priority, like the core and the disposable part of the rocket, and if you can only show it on Apple Watch or a smaller space, should we leave that piece?

(1) Select the appropriate chart

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

A. Column Chart

Also known as bar chart, bar graph. is a statistical chart with the length of a rectangle as a variable. is often used to compare two or more values. The following 4 types of column charts are common:

Vertical Column chart, the most common column chart, horizontal column chart, generally according to the size of the number of columns, clustered column chart, used for multi-group data comparison, emphasizing a set of data within the comparison; Stacked column charts, used for multiple sets of data comparisons, and clustered column charts, the stacked column chart emphasizes the relationship of part to whole in a set of data.

B. Pie chart

A statistical chart that expresses the numerical size in degrees of the center angle. Commonly used in the proportion of performance data, the sum of the items in the pie chart is 100%, the most suitable for expressing a single topic, that is, part of the overall proportion. The type of pie chart is relatively small, there are mainly the following three kinds:

Basic pie chart, including regular pie chart and doughnut pie chart, semi-circle pie chart, in some scenes, semi-circle will be easier to typesetting, facilitate alignment. And the labeling information is also convenient to render; a composite pie chart, when a pie chart has too many slices, you can combine the last few items into other classes to show the composition of these items in a level two chart.

C. Line chart

is a chart that shows continuous data changes over time or in an orderly class by the fluctuation (ascent or descent) of the line. Often used to emphasize changes or trends in data. Line charts can be divided into single, multiple, and stacked lines:

A single line chart, showing only a set of data fluctuations, multiple line charts, while displaying multiple sets of data fluctuations, multiple stacked line charts, showing the situation of multiple sets of data fluctuations, and the performance of multiple sets of data changes. Multi-Data overlay (stacked graph), recommended area map, not recommended for use with line chart form

D. Forms

By a number of rows and columns of an orderly form of organization, the table can efficiently represent a large number of data. There are various types of tables, in addition to simple text and numbers, we can also add images, operations and other types. Tables are the most diverse and special types in several charts.

Base tables, basic tables of static plain text classes, content composite tables, more complex tabular forms that are combined by other content types, and manipulation of composite tables that affect the style or characteristics of a table.

(2) Correct drawing of the chart

After understanding four charts, we completed the first step of accurately expressing the data by selecting the appropriate chart type, then the second step is to draw the chart correctly. Incorrect axis selection, or missing key elements, can result in a reduced accuracy of the chart and unclear meaning.

A. Column Chart

The chart of the data product emphasizes the accuracy of the data, usually the zero baseline is indispensable, in order to emphasize the starting position, the color is darker than the other grid lines. Considering the difference of different display devices, it is recommended to take at least 94 gray values to ensure clear identification, the color is too shallow on some devices can not be displayed clearly.

Figure 2-14 0 baselines in a column chart

The width of the column is D, the spacing between the pillars is suggested between 1/2d and D, and the spacing between the two pillars of the clustered column is suggested to be 1/8d. This ensures that the pillars are not too fragmented-the correlation between data loss is not too dense-ensuring the independence of data and comfortable reading.

Fig. 2-15 spacing between columns

B. Pie chart

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

Figure 2-16 How to draw a pie chart

However, this method of drawing is a bit inadequate, with the focus of the user's line of sight-the top half of the pie chart, the unimportant minimum data item and the largest data item-occupy the visual focus. In order to solve this problem, we have done some optimization on this basis, also take the clock 12 points as the starting point, first counter-clockwise to draw the largest slice, then go back to 12 points, draw the second large slice clockwise, the remaining slices are drawn sequentially (figure 2-17). This approach puts the focus of the user's gaze-the top half of the pie chart-on the most important data. But there's a little bit of a problem with this approach: when there are multiple pie charts, the starting position of each pie chart is different (the position of the question mark in the figure). You can choose different pie chart drawing method According to different usage scene.

Figure 2-17 How to draw a pie chart

C. Line chart

Line charts are often used to represent changes and trends in data, and there is a great influence on the amplitude of the different lines of the axes. The value of the axis is set too high, then the polyline changes too gently, masking the reality can not clearly show the change of the polyline. Conversely, if the axis is set too low, it will make the polyline changes too steep, too exaggerated exaggerated the trend of the change of the polyline.

Figure 20 percent-18 percent how to draw a line

2, how to improve the readability of the chart

Data products are often filled with a large number of figures and charts, users can easily drown in the ocean of data, in addition to the accurate expression of these data, enhance the readability of the chart is also a data product of the chart design a significant feature. The text portion of the chart is usually explained by the meanings of the specific values and values. Through the reasonable typesetting of these texts, the user can quickly understand the chart, so as to achieve the purpose of efficient reading.

A. Column Chart

Axis labels using horizontal arrangement, not recommended vertical or oblique arrangement, the number of words is not easy to read. The use of some labels in a column chart also applies to line charts.

Figure 2-19 the label arrangement of the column chart the horizontal column chart generally simplifies the coordinates, and the data values follow 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 the axis labels, there are several solutions:

A horizontal column chart can be used 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 by interactive actions. For example Show 2010 Years/2011, and the year inside the specific month hidden, hover appeared. The horizontal axis in 2-22. The value of the high number can be converted to units. For example, 500,000 display is 500,000, more in line with Chinese reading habits, and save space. The ordinate in 2-22.

Figure 2-22 Scale values for a column chart

B. Pie chart

Displayed in a pie chart together with a percentage value.

Information coherence visual concentration, theoretically the most appropriate location. However, it is limited by the shape and size of the pie chart itself and is prone to overflow when too much text.

Figure 2-23 The label of the pie chart

Use guide lines to display the appropriate position around the pie chart.

A guide line can associate a slice with a label, and you can display more characters. When the guide line is large, the deformation can be normalized. In the data product is usually the activity data, the numerical size often changes, the label and the guide line position is not fixed, the typesetting is difficult to control.

Figure 2-24 Pie chart using a guide line

Values and labels are separated from the display.

The number of label characters is not limited, but the label is separated from the pie chart and needs to be read against.

Figure 2-25 separation of values and labels display

The Interactive Action Toggle tab is displayed in the blank of the circular pie.

Blank parts are not affected by tile size, and labels and values can be displayed together. Suitable for emphasizing the value of a slice. The relationship between the label and the slice needs to have interactive instructions, and the data display is more hidden.

Figure 2-26 Label with interaction

C. Forms

The text information longitudinal row contrast can form the visual guide line very well, conforms to the Gestalt psychology similar principle. Different data types have different alignment options. Generally speaking, the text is left-aligned and the data is right-aligned, which makes it easy 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 a fixed number of types (such as completed, pending payments, etc.), which can be aligned in the center. Closely related fields can be arranged in close proximity to each other, enhancing the correlation between the data, reducing the amount of data groups, and allowing users to quickly locate information.

Figure 2-28 Alignment of the table

Various infographic application notes