In these years of rapid changes in the design industry, designers no longer simply draw pictures, but rethink their work content, how to reflect the design value? In this paper, we discuss chart intelligent recommendation based on our experience and thinking of Dashboard design in work.

01

–

Find the source – chart recommendations feature

On the one hand, the significance of the chart intelligent recommendation function lies in that many people at work do not understand the chart, there are learning costs, and there are “inappropriate use”, “incorrect use” problems; On the other hand, for those who are often in contact with charts, such as designers engaged in visualization and personnel in data-related industries, they have a better understanding of the usage of charts and have a set of choice logic for charts. Rather than let the user learn, let the machine.

At present, we know that there are two products with intelligent recommendation function:

  • Excel first needs to import or draw a table, box to select the data to be turned into a chart, click smart recommendation, intelligent recommendation results will appear, users can choose according to their own needs.

  • From the perspective of operation process, netease Lai is almost the same as that of Excel.

Through two cases, we can understand the operation process of a chart recommendation: first, users have visual requirements, then users put into the data source, then the system or platform carries out intelligent recommendation of the chart, and users finally choose the required display mode. From the perspective of the whole process, visual requirements and data sources are the necessary conditions for chart recommendation, and the completion of the whole chart selection process also requires users to select their own needs in the recommendation results.

02

–

Recommended upstream – requirements and data characteristics

2.1 Visual requirements

For example, the back-end products generally have three requirements: overview, monitoring, and operation and maintenance. Among them, the overall overview is to see the overall resource allocation and operation status through Dashboard, and present key business indicators. Monitoring is to see exceptions at a glance in the case of a large number of data and rich layers. Operation and maintenance is to analyze the causes of anomalies, comprehensively judge relevant indicators and drill data.

According to the requirements of each scenario, extract key words of requirement characteristics, and these keywords can be corresponding to various chart display components with design experience:

2.2 Data Features

Take monitoring scene data as an example. Data is generally presented from the lowest data source through some query conditions, filtering conditions, filtering conditions and display dimensions. The whole process is shown as follows:

The underlying data referred to here generally has a relatively simple data composition: time dimension and the value of an index at the time point, so this kind of data has a relatively clear time continuity feature. According to the whole feature and the design understanding of the chart, it is recommended to use curve and broken line graph.

As for the query indicators, designers need to cooperate with students from other positions to understand them. Here, I take simple aggregation as an example to illustrate the recommendation process. For example, when we add to find the cumulative value between several data points, we might use a stacked bar chart to show the comparison and composition relationship. Use line and column chart to show their contrast relation and fluctuation.

03

–

Recommended downstream – charting features

The mapping between diagrams and requirements and data was illustrated above. How did the mapping come about? Can the graphic design experience of the designer be abstracted and summarized?

First of all, we need to understand the visual cognitive characteristics of the chart itself. The visual chart is composed of four basic elements, namely point, line, surface and volume. These four basic elements combine one or more visual representations in visualization to present cognitive features of the chart, namely position, size, shape, direction, hue, saturation, lightness, etc. The combined features and human perception of a graph can be understood using classical gestalt principles, including proximity principle, similarity principle, continuity principle, closure principle, symmetry principle and so on.

The scatter chart of the same group of data is used as an example. In the scatter plot, we see the distribution of this group of data, because from the perspective of proximity principle, when data exist independently in the form of points, people will take the initiative to organize them together, and objects close to each other will be regarded as a group. In a graph, these points are connected to form a line, and what we see is the trend of the whole data, because the line has continuous visual perception, and the data is no longer discrete fragments.

Based on these features, each chart has its own attribute tag. Designers are able to skillfully use these cognitive features of charts and have a full understanding of business requirements and data, so that matching the two features can produce recommendations.

With the development of data visualization in recent years, there have been a large number of designers engaged in the industry. Fortunately, we can now stand on the shoulders of giants. Abela has outlined the various features of the chart:

However, these are not enough, and we can continue to mine more extended attributes of charts based on this method. Take line graph as an example: When there are many data items, it is recommended to use tabular annotation; When the business scenario needs to display the current value, we recommend the illustration combined with the number to display…

04

–

Matching and quantization

In general, the recommendation process is actually a process of “upstream” and “downstream” feature matching. However, for the sake of feasibility, we need to quantify this match.

You can guess: when we label the characteristics of the chart, the characteristics of the requirements, the characteristics of the data, the plot into multiple dimensions. By locating the characteristic attributes of a graph, you can lock a point in the graph. Similarly, data features are locked to a point; Requirement locking becomes a point. The closer these points are to each other in this virtual data space, the better they match.

Check out more original content