laitimes

Data visualization: Anatomy of the design elements of a basic chart

author:Everybody is a product manager
Editor's Guide: Data visualization makes it easier and clearer for us to understand the data. This article mainly explains how to correctly select data charts, not to confuse their concepts and functions, so that the presentation of charts is in line with our reading habits, improve our work efficiency, I hope to help everyone.
Data visualization: Anatomy of the design elements of a basic chart
The purpose of data visualization is to visualize the data so that the information can be transmitted clearly and effectively. ——Vitaly Friedman

If people want to find the law of data in massive data, or clearly find specific data, data visualization is an effective way of expression.

Data visualization is mainly aimed at clearly and effectively conveying and communicating information through graphical means. As shown in the figure:

Data visualization: Anatomy of the design elements of a basic chart

Mark Twain famously said, "There are three kinds of lies in the world: lies, damn lies, and statistics." "People often misinterpret numbers, lies do not stem from the numbers themselves, but from people who use numbers wrongly or irresponsibly, and when you show numbers to others, you have a responsibility to show the truth

- "The Beauty of Data"

The display of data truth is inseparable from the reasonable selection of data charts, so how to choose correctly? Now I will talk about the selection and analysis of basic data chart types.

Data visualization: Anatomy of the design elements of a basic chart

Commonly used base chart types

In data visualization design work, the column pie chart is the most commonly used and the most confusing. When a set of data can be selected from both a line chart and a column chart, the designer's heart often has the doubt of "which chart should I choose to better convey the data to the user".

Based on the above questions, here are some design guidelines for your reference.

Line charts primarily represent trends in data over time, and histograms are used to describe comparisons between categorical data. If you do not need to show trends in your data, we recommend that you do not use a line chart instead of a column chart.

Histograms focus more on comparisons between data than on trends than on line charts.

Data visualization: Anatomy of the design elements of a basic chart

In most cases, line and column charts are interchangeable with each other.

Users are more sensitive to horizontal length than vertical, and it is best to use bar charts when it comes to ranking.

For longer labels, use a bar chart. For example, the data display of urban population inflow, due to the long text of the city name, it is recommended to use a bar chart.

Use a bar chart when the chart canvas is taller than the width, taking advantage of the excess height space to reveal more bars.

Instead, it is recommended to use a histogram.

Data visualization: Anatomy of the design elements of a basic chart

Based on people's cognitive characteristics, people's sensitivity to area and angle is not as sensitive to length. Pie charts are not recommended when the values of categories are approaching, unless it emphasizes the proportion of individual data in the population and highlights the characteristics of the data in the population.

Data visualization: Anatomy of the design elements of a basic chart

Typically, an area chart is a derivative of a line chart. In area charts, the area between the number axis and the line is often colored or shaded to increase legibility. The differences between area charts and datasets are visually highlighted.

Data visualization: Anatomy of the design elements of a basic chart

Essentially, pie charts and doughnut charts belong to the same type of chart. However, the two have different emphases on the performance of data visualization. From the perspective of graphical mapping, arc length is easier to identify and more efficient than area and angle. Therefore, compared to pie charts, the ring chart makes the data more readable, and at the same time, the emphasis data can be placed in the middle of the ring chart to attract user attention.

Data visualization: Anatomy of the design elements of a basic chart

If you add a multi-data comparison to a pie or doughnut chart, you need to introduce a stacked column chart.

Compared with a pie chart, each single stacked column chart is a deformation of a pie chart, which can meet the contrast relationship between the parts of the user's single data. By arranging the stacked column chart horizontally, the overall data is compared, while the pie chart cannot compare the overall data.

Data visualization: Anatomy of the design elements of a basic chart

Stacked area charts emphasize the extent to which quantities change as a result of a single data change, while emphasizing partial and overall trends.

Stacked histograms emphasize the overall contrast, and can also intuitively see the values of each series, especially when it is necessary to look at the synthesis of a certain unit and the proportion of the values of each series, which is the most suitable.

When there are many date data points, such as showing the changes in a certain set of data trends in the past 50 years, it is recommended to use a stacked area chart, which can be dynamically interacted with, such as X-axis zooming in and out to display the data more intuitively. When the date span is small, such as the change relationship of a certain set of data in the past 7 days or 3 days, it is recommended to use a stacked histogram.

Data visualization: Anatomy of the design elements of a basic chart

1) For readability, the number of line chart lines is recommended not to exceed 5. When the number of polylines exceeds 5, the most important parts can be highlighted in the default state of the chart.

Data visualization: Anatomy of the design elements of a basic chart

2) For the legibility of the data, it is recommended to use solid lines for the polyline visual effect.

Data visualization: Anatomy of the design elements of a basic chart

3) Use curves with caution. Lines are the only theme in a single line chart, and each point of the line truly reflects the ups and downs of the data, and it is generally recommended to use a line.

If the line trend does not need to be presented very precisely, and it is necessary to eliminate the individual differences and the overall trend, a smooth curve can be used.

Data visualization: Anatomy of the design elements of a basic chart

4) Line chart can handle a large amount of data, very suitable for giving users some values with reference value, it is recommended to add comparison data.

Data visualization: Anatomy of the design elements of a basic chart

As a derivative of a line chart, an area chart can be used to present continuous data and is a good representation of trends, accumulations, decreases, and changes. Stacked area charts are better at showing relationships or trends between parts and the whole than at conveying specific values.

Data visualization: Anatomy of the design elements of a basic chart

1) The spacing between the columns should not be too large, increasing the legibility of the data.

Data visualization: Anatomy of the design elements of a basic chart

2) Use a reasonable data ink ratio to reduce the cognitive cost of users to obtain data.

Data visualization: Anatomy of the design elements of a basic chart

Stacked histogram values must be able to be added, adding meaningless data is not recommended.

As shown in the figure, the age of personnel in the same area is added, there is no data significance, if the age is changed to the number of personnel, it can be compared horizontally with the number of personnel in different regions, which is of practical significance.

Data visualization: Anatomy of the design elements of a basic chart

The number of classifications is fixed, and empty data is also displayed. If you omit some empty data nodes, you will cause unnecessary misunderstandings. At the same time, the overall distribution of the data cannot be fully expressed. The same is true for histograms.

Data visualization: Anatomy of the design elements of a basic chart

1) If the percentage is calculated, the value of each slice cannot be negative, the size of the pie slice is proportional to its corresponding value, and all slices must be added up to 100%.

Data visualization: Anatomy of the design elements of a basic chart

2) Through visual markers such as the area, radian and color of the sectoral block, the relationship between the parts and the parts and the whole is revealed.

Data visualization: Anatomy of the design elements of a basic chart

3) The slices of the pie ring chart are arranged in an orderly manner.

Data visualization: Anatomy of the design elements of a basic chart

While data visualization is often reminiscent of a business analyst, it's often more creative and colorful than you might think. From business dashboards and public health visualizations to pop culture trend analysis, data visualizations cover a wide variety of application scenarios.

With the development of data visualization, data representation has become more and more abundant and diverse, such as the introduction of icon styles in nearly 40 categories in Echarts. Such as Sanchi maps, radar charts, maps and so on. Some of the previously rare types of charts are also becoming more and more common, such as the rose chart (Nightingale rose chart), which is also well known to the public through the application of the People's Network during the epidemic.

Data visualization: Anatomy of the design elements of a basic chart

In general, compared with the basic chart, the current development of data visualization chart, the application scenario is relatively limited, while the production method is more complex, different from the basic chart, can be achieved through Excel, the production of complex charts requires more professional tools, or professionals to achieve. If you need a professional data analyst, through Tableau, Qlikview, FineBI and other data analysis tools to achieve, there is a high cost of learning and application.

A good visual design must be easy to read, highlight the value of data, easy to analyze, beautiful as one, and ultimately make the data simpler and easier to communicate. Conversely, not only will the data be more complex, but it will also lead to false inducements. Therefore, how to make data analysis easy, smooth and easy to read, so as to improve the user's work efficiency and reduce the user's work burden, has become an important responsibility of the designer.

This article only introduces the application experience of some basic charts, and there is a chance to continue to improve the precipitation and sharing of the application experience of visual charts.

Hony Road, public number: experience designer (uxd-si), everyone is a product manager columnist. Focus on user experience design and related fields, and are committed to sharing personal design experiences, opinions and insights.

This article was originally published in Everyone is a Product Manager. Reproduction without permission is prohibited

The title image is from Unsplash, based on the CC0 protocol

Read on