Data visualization must be carried out: chart articles

Editor’s Guide: How messy data is expressed in a concise approach, showing the value behind it? The chart is a foundation and common way. The author of this article revolves around the graphics, I hope to help you.

As the Internet is more and more improved, the frequency of use of data visualization is also increasingly high, while the chart is the most common form of performance in data visualization. Whether it is a work report or a background design, it is inseparable from the use of the chart. However, the information related to the chart class is too broken, and it is not a system. It is very unfriend of beginners. This article I started from the ancestors of the chart, I dug it out, I hope to help you (if the picture can’t see , You can open a big look ~).

First, what is chart

The definition of the chart: Intuitive properties of statistics, the graphic structure of the key role of knowledge excavation and information intuitive and vividly, is a good means of visualizing the object attribute data.

English call method: chart.

The user’s sense of sensitivity is much larger than the text, so the product needs to visualize data information, indicating more information quantity with simple graphics, and the chart is the most commonly used expression in data visualization.

Next we will introduce the specific composition of the chart and elements.

Second, the composition of the chart

The chart is made up: Title, legend, scale axis, data display, grid line, prompt information, water level line, timeline, each element has his existence. It is not necessarily displayed in actual use, and the contents that you want to display will be displayed.

Third, the chart element analysis

3.1 Title

As the name suggests, the title is the name of the chart, the title is an essential element. The content of the title must be simple, don’t be too long, you can write two words and write clearly without three words.

There are 3 common positions of the title: the upper left corner, the top center, and at the bottom.

Under normal circumstances, the title font size must highlight some, when the user first looks in Chart, it is clear to see what this chart is doing.

In special cases, if there is an additional explanation of the title, two ways:

Add prompt icon; increase the prompt.

3.2 Graphics

3.2.1 Composition of the legend

Color, name, value, unit.

3.2.2 Form of Exhibition

Round, switches, rectangles, drum lines, solid lines, dashed lines.

3.2.3 Location of the legend

From left to right, from top to bottom.

3.2.4 The role of the legend

Identify the category represented by each color; turn on / hide data display; the value displayed by the legend is generally the current value.

3.2.5 Color Selection of Less

In the same group, don’t appear similar colors, otherwise you can’t distinguish each other in the chart display.

In the use of the product, the color use of the colors should be used, which is generally divided into two types:

Commonly used legend color (color itself represents a certain meaning in the industry), such color needs to be a fixed color value, no matter which Chart is this color; there is no special meaning legend, you can regulate a legendary color. Sequence table. Those Chart without special meanings can use the legendary color in order, and the legend is neatly drawn.

3.2.6 How to display too much

If the legend can be integrated, show the main legend / top n legend, other legendary integration, add a detail page to display the full; if the legend is not integrated / omitted, you need to give sufficient display space.

3.2.7 Shared Legend

If multiple Chart’s legend, merge can be made and reduced redundancy.

3.2.8 Level I ʡ ʡ

If there is only one legend in Chart, it can be omitted.

3.2.9 Legend Limit

According to different use scenarios, in order to better show the effect, set a maximum value to the legend name, and the display will be omitted after the maximum value.

3.3 coordinate axis

The coordinate axis is divided into an X-axis and a Y-axis, and there is 1 X-axis +1 Y axis in conventional cases. However, 2X + Y or X + 2Y will be used in special cases.

3.3.1 Significance of the scale value

Time point: 12: 00; Time: Monday, Tuesday.

3.3.2 Coordinate axis usage rules

Is there a unit:

If the mean of scale values ??is clear, you can use a unit, such as: 2018, 2019, 2020 …; The scale value is added to the unit, and it needs to be judged according to the scene).

Alignment (common, but not necessarily):

X-axis: Come alignment; Y-axis: right alignment.

How to display the scale value:

Select regular omitted markings; tilting texts to display more copys.

The selection of the scale value must be the same law, and the scale value prohibited from the same distance represents different data.

Pattern use rules for scale points:

The mark of the scale facing outside.

3.4 Data Show

The display of data is the most obvious place in Chart. It can be said that if only one element is displayed, he is.

Data display rules: The boundary is clear, it is not promising; multiple data is displayed simultaneously, to ensure that each data can be clearly seen, transparency can be used to ensure that all data is displayed.

3.5 grid line

3.5.1 Role of grid line

Echorning the coordinate axis, the aesthetics.

3.5.2 Rules for the use of grid lines

The color of the line should be weakened, don’t win the master;

The grid line uses a solid line, try not to use the dotted line.

3.5.3 Using Scenes

Horizontal, vertical, horizontal, non-grid line.

3.6 Tips Information

Typically, the prompt information is used to identify data information in Chart, it is necessary to pay attention to: Important information is as simple as possible, and the amount of information is not too big.

3.7 water level line

According to the use scenario of different products, sometimes the threshold is used, and after a certain threshold is reached, a certain linkage will be triggered. At this time, there is a water level line, it acts as a warning.

There are two, solid lines and dashed lines, and the color selection depends on the warning level of the product.

The water level line can be one or multiple, depending on the situation.

3.8 Timeline

The timeline can flexibly adjust the upper and lower limits of the scale value, making it more accurately to see the data you want to see.

The function and restriction of the timeline is not very complicated, so it is more explained, and if you need it, it is used.

Fourth, chart usage suggestions

4.1 fold line diagram line

4.1.1 Definition

A line diagram can display continuous data vary over time (according to common proportion settings), so it is very suitable for displaying data from data in equal time intervals.

The line diagram is fluctuations in the fluctuations through the line, mainly reflecting the chart of data over time.

4.1.2 Using Scenes

Commonly used to observe floating changes in data fluctuations within a period of time, such as: the usage of memory within a day.

4.1.3 Use suggestions

The Y-axis scale value is reasonable, and the currently displayed data fluctuations should maximize the display;

Important nodes can be marked separately;

The data turning point is smoothed, don’t be too sharp.

4.2 Area Figure Area

4.2.1 Definition

The area map and the line diagram are similar, and the difference is that the area map has been divided by the data area, making the data display clearer.

4.2.2 Using Scenes

Area diagram showing not to exceed 3 images, otherwise there are many data display, and the display will be particularly chaotic and affect the viewing.

4.2.3 Suggestions

The area of ??the area and the color of the fold line are uniform, do not change color;

The area area is generally more than the color of the fold line, so it is visually more comfortable;

If multiple data is used, the area area is used to use transparency, otherwise some data will be blocked.

4.3 Columnar Figure BAR

4.3.1 Definition

Cylindrical chart, also known as long bar chart, column statistics. It is used to compare two or more value (different times or different conditions), only one variable is usually utilized for smaller data set analysis.

4.3.2 Using Scenes

The histogram is divided into landscape and vertical direction. The comparison of different data in the same dimension is more clearly compared with the histogram.

4.3.3 Use suggestions

The thickness of the histogram should not be a fixed value, to be adaptive to deal with the resolution of different sizes;

The contrast of thickness and spacing should be reasonable;

You can use a small round, don’t use a big round, too ugly …

If you want to emphasize a pillar, you can make color distinguish, but the column color should not exceed 2 (at the same dimension);

If you want to display a value on the column, use the suggestion (the order in the following is recommended):

The value appears when Hover; the value is displayed on the column by default; the value is displayed on the top / right side of the column.

4.4 Pie Pie

4.4.1 Definition

The pie chart is only arranged in a column or a line of data in a worksheet. It is a summary data that views each category to account for a chart of the total data.

4.4.2 Using Scenes

Commonly used to make a summary, annual report, etc .; all data must be 100% available.

4.4.3 Suggestions

Each data should be represented by a separate color; there is no negative value in the same color; the number of pie charts is not limited, but if you encounter a merge, you can merge; the start point of the pie chart is 0 / At 12 o’clock.

4.5 ring diagram

4.5.1 Definition

The annular map is a graphic obtained from two different sizes to the center portion.

4.5.2 Using Scenes

The annular chart has a unique feature that can highlight the value of a certain indicator in the central circle. It is often used to do data monitoring, monitoring a certain type of indicator is normal.

4.5.3 Suggestions

The start point of the annular chart is 0/12 points;

The thickness of the ring is reasonable, don’t be too thick and too fine;

Two circles of the annular chart are aligned from the center.

4.6 Stack area Figure 4.6.1 Definition

The stack area is a graphic that stepively stacked the data area in order.

4.6.2 Using Scenes

It is often used in traffic / capacity in different resources.

4.6.3 Use suggestions

Do not have repetitive colors; as much as possible, the amount of data is in the order of size, from the bottom to the top.

4.7 Stack Column

4.7.1 Definition

The stacked pillar map is a graphic that stepively stacked the data column graph in order.

4.7.2 Using Scenes

Often used for display of the same indicators in different dimensions.

4.7.3 Suggestions

Do not have repetitive colors; sort by the top-up to bottom.

4.8 Very chart

The usual suggestion of the common chart is introduced, but the chart type is far more than this, there are many very useful chart types. This time I will list it first. If you are interested, I will write a cold door. The use of the chart:

Radar chart, scatter plot, K line diagram, box mustchase, thermogram, rising sunlight, sankiogram, tree map, funnel illustration, instrument panel.

V. Common chart open source website

5.1 EchartSecharts


5.2 Highcharts


5.3 AntV

Six, summary

Chart is one of the most important modules in data visualization must not be ignored. Only by knowing the definition of each Chart and uses the scene to use the most suitable one in the product.

If you feel help you, you can pay attention, continue to share the design.

Author: Friendly Youth, Public number: Friendly Youth