1. Do you worry about how to choose visual charts in your work?
Data visualization design is indispensable and very important in data-related UI design such as corporate big data, back-end management panels, and the financial industry.
But many designers don’t understand the chart specifications for different purposes in visualization, just to design good-looking data charts, constantly looking for design inspiration references, and finally found that even if there are beautiful visualization data charts, they can’t be used in their own. It is a pity on the project.
Why is there such a situation?
The reason is actually nothing more than: In addition to less exposure to data design, designers do not understand visual design specifications.
If you understand the relevant design specifications of some data charts, know what data to use which chart, know the meaning of colors, and know the main points of data layout, then you can draw excellent and beautiful visual data charts from these rules .
2. What are the data visualization chart design specifications that designers should know?
Today I will share with you the Material Design data visualization design specification guide updated by Google in June 2019. This specification guide is basically applicable to all data chart designs and is of great reference value. It is recommended to collect.
Mainly summarized from the following aspects:
- The basic principle of data visualization ?
- What are the types of data charts?
- How to choose the appropriate visualization chart type for different purposes?
- The style design of the data chart?
- What is the purpose of the data visualization large screen?
Three, the basic principles of data visualization
Data visualization is a form of graphical depiction of dense and complex information. The visual effects of data visualization are designed to make data easy to compare and use it to tell stories to help users make decisions. Data visualization can express data of different types and scales, from a few data points to a data set with a large number of variables.
So we need to pay attention to three requirements when visualizing data:
1. Accurate
Prioritize the accuracy, clarity, and completeness of the data, and present information in a way that does not distort the information.
2. Helpful
Create conditions and functions that facilitate research and comparison when users browse data.
3. Scalable
Predict users' needs for data depth, complexity and form, and visualize content and form for different devices.
Fourth, the type of data chart
Data visualization can be expressed in different forms. Charts are a common way to express data because they can display and compare a variety of different data.
The choice of chart type mainly depends on two points:
- Data to be represented
- Express the purpose of the data
1. Specific type
1) Graphs that change over time
This type of chart is mainly used to display data over a period of time, such as trends or comparisons between multiple categories.
Common use cases include: stock price fluctuation performance, data statistics, annual reports, etc. 
Source: Network
2) Comparison of categories between different data
The category comparison chart is a comparison between multiple different categories of data. Common use cases include: income in different countries, time of hot spots, and team distribution.
Source: Network
3) Show ranking charts among different data
The ranking chart shows the position of the item in the ordered list. Common use cases include election results and performance statistics.
Source: Network
4) The proportion of different parts of the data in the overall data
The percentage chart shows the relationship between the part and the whole. Common use cases include: the comprehensive income and budget of the product category.
Source: Network
5) Association comparison of more than two data
Association charts show the relationship between two or more variables. Common use cases include: income and life expectancy.
Source: Network
6) Distribution between values
The distribution chart shows the frequency of each value in the data set. Common use cases include: population distribution and income distribution.
Source: Network
7) Data flow
Process diagrams show data movement between multiple states. Common use cases include: fund transfer, vote counting, and election results.
Source: Network
8) Data relationship
The relationship diagram shows the relationship between multiple items. Common use cases include: social networks, word graphs.
Source: Network
5. How to choose the appropriate visualization chart type for different purposes?
Faced with many types of charts, the following table summarizes how to choose the right chart.
To display changes over time, you can use a time series chart to show changes over time, that is, a chart that shows data points in chronological order. The graphs that show changes over time include: line graphs, bar graphs (bar graphs), and area graphs.
*The baseline value is the starting value on the y-axis.
1. Bar chart (bar chart) and pie chart
Both bar graphs (bar graphs) and pie graphs can be used to display proportions, which indicate the comparison of parts to the whole.
Histograms (bar graphs) use a common baseline, and the length of the bars represents the quantity;
pie graphs use the arc or angle of a circle to represent a part of the whole.
Bar charts (bar charts), line charts, and stacked area charts are more effective than pie charts in showing changes over time. Since all three graphs use the same baseline, it is easier to compare the differences in values based on the length of the bars.
Source: Network
2. Area chart
There are many types of area charts, including stacked area charts and stacked area charts:
- Stacked area chart shows multiple time series (in the same time period) stacked together
- Stacked area chart shows multiple time series (in the same time period) overlapping each other
It is recommended not to use more than two time series for stacked area charts, because doing so will make the data ambiguous. Instead, use stacked area charts to compare multiple values within a time interval (the horizontal axis represents time).
Source: Network
Six, the style design of the data chart
Data visualization uses custom styles and shapes to make the data easier to understand to suit user needs.
The chart can be optimized from the following aspects:
- Graphic elements
- Typesetting
- icon
- Axis and label
- Legends and notes
Style design of different types of data:
Visual coding: is the process of converting data into a visual form. Unique graphic attributes can be applied to both quantitative data (such as temperature, price or speed) and qualitative data (such as category, flavor or expression).
These graphic attributes include:
- shape
- colour
- size
- area
- volume
- length
- angle
- position
- direction
- density
Performance of different attributes:
Multiple visual processing methods can be applied to multiple aspects of data points. For example, in a bar chart, the color of the bar can represent the category, and the length of the bar can represent the value (such as the number of people).
Source: Network
Shapes can be used to represent qualitative data. In this chart, each category is represented by a specific shape (circle, square, and triangle), so that a specific range of comparison can be easily achieved in one chart, and comparisons between categories can also be performed.
1. Shape
Charts can use shapes to display data in a variety of ways. The shape design can be interesting, curvilinear, or precise and high-fidelity, etc.
Shape accuracy: The chart can display data with different accuracy levels.
Data used for detailed research should be presented in shapes suitable for interaction (in terms of touch size and functional visibility), while data intended to express general concepts or trends can use shapes with less detail.
Source: Network
2. Color
Color can be used to distinguish chart data in four main ways:
- Distinguish categories
- Represents the number
- Highlight specific data
- Means
1) Color classification
Source: Network
Example: In a doughnut chart, colors are used to indicate categories.
2) Color highlights data
Source: Network
Example: In a scatter chart, colors are used to highlight specific data.
3) Key areas
Without abuse, color can highlight the focal area. It is not recommended to use high-brightness colors in large quantities, as they will distract users and affect their concentration.
4) The color indicates the meaning
Source: Network
5) Accessibility
To accommodate users who cannot see color differences, you can use other methods to emphasize the data, such as high-contrast coloring, shapes, or textures. Applying text labels to data can also help explain its meaning while eliminating the need for legends.
3. Line
The lines in the chart can represent the characteristics of the data, such as hierarchical structure, highlighting, and comparison. The lines can have many different styles, such as dotted lines or different opacity.
Lines can be applied to specific elements, including:
- Annotation
- Predictive element
- Comparison tool
- Reliability interval
- abnormal
Source: Network
4. Typesetting
Text can be used for different chart elements, including:
- Chart title
- Data label
- Axis label
- legend
Chart titles are usually text with the highest level of hierarchy, and axis labels and legends have the lowest level of hierarchy.
Source: Network
Font weight: The change in title and font weight can express the importance of the content in the hierarchical structure. But you should exercise restraint and use limited font styles.
Source: Network
5. Icon
Charts can represent different types of data in the chart and improve the overall usability of the chart.
Charts can be used to:
- Classification data: used to distinguish groups or categories;
- UI controls and operations: such as filtering, zooming, saving and downloading;
- Status: For example, error, empty status, completed status, and danger.
When using icons in diagrams, it is recommended to use universally identifiable symbols, especially when representing operations or status, such as: save, download, complete, error, and danger.
Source: Network
6. Axis
One or more coordinate axes display the scale and range of the data, for example, a line chart displays a series of values along the horizontal and vertical axes.
1) Baseline of histogram (bar graph)
The histogram (bar graph) should start with a zero baseline (the starting value on the y-axis). Starting with a non-zero baseline may cause the data to be misunderstood.
2) Axis label
The design of labels should reflect the most important data in the chart. Labels should be used as needed and consistent in the UI. Their presence should not hinder viewing the chart.
3) Character direction
For readability, the text label should be placed horizontally on the chart.
Text labels should not:
- Spin
- Vertical stacking
Source: Network
7. Legend and Notes
The legend and notes describe the information of the chart. The notes should highlight data points, data outliers and any noteworthy content.
1—Note, 2.—Legend.
On the PC side, it is recommended to place a legend below the chart. On mobile, place the legend above the chart to keep it visible during the interaction.
1) Labels and legends
In simple charts, direct labels can be used. In dense charts (or part of a larger chart group), legends can be used.
Seven, the classification of the purpose of the data visualization large screen
In the UI interface called the data big screen, data visualization is realized through a series of charts. Multiple independent charts can sometimes express a story better than a complex chart.
Design of big data screen: The purpose of big data screen should be reflected in its layout, style and interaction mode. Whether it's for making presentations or for in-depth research on data, its design should suit the way it is used.
The big data screen should:
- Highlight the most important information (use layout)
- Determine the focus of the information according to the information level (using color, location, size and visual weight)
The priority of information should be determined and arranged according to the demand for data. In the design of the dashboard in this example, the following user issues are considered:
- Need to pay attention to
- The time the problem occurred
- Where the problem occurred
- Other variables affected by the problem
1. Analytical data large screen
The large analytical data screen allows users to study multiple sets of data and discover trends. Usually, these large data screens contain complex charts that provide insight into the data.
Use cases include:
- Outstanding trends over time
- Answer the "why" and "hypothesis" questions
- prediction
- Create in-depth reports
Examples of large-screen analysis data:
- Track the effectiveness of advertising campaigns
- Track the sales and revenue of a product throughout its life cycle
- Urban population trends over time
- Track climate data over time
Analytical data large screen displays climate data
2. Operational data large screen
The large operational data screen is designed to answer a set of preset questions.
They are usually used to complete monitoring-related tasks. In most cases, these types of large data screens have a series of simple charts about current information.
Use cases include:
- Track the current progress of the goal
- Track system performance in real time
Examples of large screens of operational data:
- Track call center activities, such as call volume, waiting time, call length or call type
- Monitor the running status of applications in the cloud
- Show stock market conditions
- Monitor telemetry data on the car
Operational data large-screen display device storage indicators
3. Demonstration data large screen
The large demo data screen is a display view for topics of interest.
These large data screens usually include some small charts or data cards, with dynamic titles describing the trends and insights of each chart.
Use cases include:
- Provide an overview of key performance indicators
- Create high-level executive summary
Examples of large-screen demo data:
- Provides an overview of investment account performance
- Provide a summary of product sales and market share data
Source of English original text: Google / Material Design