Traditional visual design cases

I've been teaching you since I shared the first article "Design Experience of Big Data Visualization Big Screen" with you! ",many friends will ask me some related questions. After reading the visual draft sent by my friend, it was not bad on the whole, but I found some problems in the chart design. You may have little experience in chart design of data visualization, so this paper digs out the details of the chart and shares my pit and my understanding of chart design.

Graphic design?

Chart design concept

Chart design is a branch of data visualization, which is the secondary processing of data and presented in the form of statistical chart. It is also the core performance of data visualization. Chart design should not only ensure that the data in the chart itself is clear, accurate, intuitive and easy to understand, but also highlight the core content that users pay attention to properly to help users make decisions through data.

The following analysis of three commonly used visual chart design:

line chart

Line charts are often used to represent the change and trend of data, and the different axes have great influence on the change range of broken lines.

On the left, the coordinate axis is set too low, and the polyline changes too steeply. In the figure, the data visualization with the numerical range of (10-34) exaggerates the trend of polyline change.

If the value of the right coordinate axis is set too high, the change of the polyline will be too gentle to clearly express the change of the polyline.

A reasonable line chart should occupy two-thirds of the position of the chart, and the value range of the x axis of the chart should change according to the increase or decrease of the value of the broken line, which needs to be explained to the younger brothers and sisters in the front end and dynamically calculated.

The thickness of the broken line of the line chart should be reasonable. Too thin a broken line will reduce the data performance, and too thick a broken line will lose the details of data fluctuation in the broken line, so it is difficult to find the value corresponding to the broken line intuitively and accurately! I usually use a line of two pixels, which looks more suitable!

The color of the right tick mark is too heavy, which affects the performance of chart data. The contrast between the zero baseline and the scale line in the chart is not obvious enough, and the whole is chaotic. The zero baseline emphasizes the starting position, which is generally more prominent than the line color in the chart.

Bar/histogram

The ideal is full and the reality is skinny. This case is a problem I encountered in my previous work. After the data came in, I was scared. The reason for the problem is that I didn't communicate well with my little brothers and sisters at the front end. They wrote the X axis dead, which led to this problem. In fact, the value range of these charts should be written as dynamic calculation.

For example, taking the current numerical range as an example, the highest value of the data is 18, and the highest value of the x axis should be 25. When the data rises to a certain height, the X-axis rises to the corresponding numerical height, thus avoiding the problem shown on the right.

The label text of the coordinate axis should be arranged horizontally. When there is too much label text on the X axis, it is not recommended to arrange it obliquely, up and down, and wrap the text, which greatly reduces the readability! The following figure shows two solutions, which greatly improve the readability of label text!

solution

If the columns are too scattered, the correlation between the data will be lost. If they are too dense, there will be no independence between the data, which is not conducive to comfortable reading.

When the column is n, it is suggested that the straight distance between columns should not be too different from n, and the distance between columns is half of the distance between columns, which is the most comfortable visually.

pie

The left figure 1 is not recommended to be displayed with percentage values in pie charts. The shape and size of the pie chart itself are easy to overflow when there are too many words. If there is a 2% and a 1%, it is difficult to distinguish the direction of the graph, thus losing the significance of data visualization. PPT usually has such a design style, because it is a dead picture.

Figure 3 on the left, people's reading habits are from left to right and from top to bottom, so the data are arranged from big to small, which is more helpful for reading and the graphics are more beautiful!

When the pie chart is the detection rate, or some important information detection focuses on data, it is not recommended to arrange the size data clockwise. This situation is rare in the left 1 chart, because it focuses on the detected values, showing that the undetected data is actually chicken ribs, which may be necessary in rare cases!

The picture on the right is most suitable for data with similar detection rate, which is intuitive and clear, and there is no useless data interference!

When the label dimension of the pie chart is too long, it is not suitable to display the data around the pie chart, which will be messy and difficult to read. The solution is shown on the right!

Chart classification chart

Sharing an encyclopedia of chart classification, saving it and designing data visualization products will have important reference value!

This diagram is a summary of various characteristics of the diagram by designer Abela.