When it comes to data visualization, a lot of times the UI girl has to create her own design, but when the front-end chart library is already set up, she has to do that. So, embarrassed our front cut graph son, must have to master some theoretical knowledge, it is possible to further communicate with the girl, so as to achieve benign development, common progress… 🐶
Today’s applications (design, operation, iteration, etc.) are highly data-dependent and data-driven, and the need for data visualization is increasing.
However, every now and then, we come across some confusing visualizations. So something needs to be done to try to avoid this “chaos.” Can you tease out some simple rules to change this?
The power of rules lies not in constraints, but in providing a default bridge of communication. – anonymous
This article brings “20 optimization rules for data visualization”, and we are done
1. Drawing direction of positive and negative values
If the data has positive or negative values, draw the data on the corresponding sides of the baseline rather than on the same side.
For example, with horizontal bar charts, draw negative values to the left of the baseline and positive values to the right.
2. The baseline of the bar chart starts from 0
As shown in the figure below, the baseline of the left bar chart is from 375. B-bar is more than 3 times the height of D-bar, indicating a large gap between them.
However, if you look at the bar chart on the right, starting with a baseline of zero, the difference between b-bar and D-bar is not as great, which gives a more accurate reflection of the data;
Truncation of data in a bar chart can lead to incorrect analysis results.
3. Adjust the Y-axis scale on the line chart
The main purpose of a line chart is to show trends, so if the scale starts at 0 on the Y-axis, as shown on the left, the trend changes very little and is almost flat.
On the right, adjust the line chart of the Y-axis calibration datum to keep the data set as close as possible to two-thirds of the Y-axis range, and the trend change is clear at a glance.
4. Select the right chart type
If you have XDM, you might ask, why do bar chart datum start at 0 and line chart datum adjust dynamically?
The reason is: different types of charts themselves have their specific data display functions;
The bar chart is mainly used to compare data, the line chart is mainly used to express the overall trend, the scatter chart is mainly used to express the correlation of data, and the pie chart is mainly used to express the component……
Data visualization, choose the right icon type, fit is the most important.
5. Pay attention to line charts over long periods of time
Line charts are usually used to show trends in data over time by connecting “markers” to form lines.
It helps explain how the values change over time and is more accurate if the time interval is short, while it can cause some “misunderstanding” when the time interval is long and the data is infrequently updated.
For example, if you use a line chart to represent annual income, if the values are updated monthly, the line chart is not as accurate as the bar chart.
6. Don’t use “smooth” line charts
Smooth line charts may be visually pleasing, but they can distort the actual data behind them (though this should be confirmed by the actual use of smooth curves).
7. Avoid confusing the two axes of a line chart
In general, to save visualization space, we might prefer to use a biaxial chart when we have two data series with the same measurement but different magnitude.
But these charts are not only hard to read, they also mislead users in the wrong way: they represent a comparison between two data series.
8. Limit the number of pie slices
- Keep the pie chart simple with no more than 5-7 slices;
- You can group excess minimum segments into “other” slices;
9. Please mark directly on the pie chart
Using a lable tag next to a pie chart reduces readability and the user has to compare and draw conclusions, which is time-consuming and time-consuming, so please label it directly on the pie chart.
10. Don’t stick notes inside the pie chart
Put the label directly on the pie chart. Because if the slice is small, it cannot be labeled at all;
Each section can be added with a clear line label, so that both clear, and solve the problem of alignment;
11. Set the pie chart clockwise from largest to smallest
Setting the size and position of pie slices in sequence is more convenient for reading:
- Place the largest slice at 12 o ‘clock, then place the next slice in clockwise descending order;
12. Avoid random columns
As with pie charts, the same advice applies to many other charts
Instead of defaulting to alphabetical order, place the maximum value at the top (for horizontal bars) or to the left (for vertical bars) to ensure that the most important values occupy the most visible space, reducing eye movement and the time it takes to read the chart.
13. The ring of a ring diagram should not be too thin
Ring charts, which are clearer than pie charts, leave space in the middle for more information to be written into; But the ring diagram, the ring, can’t be too thin, otherwise the whole presentation will lose the advantage of the pie chart;
14. Avoid fancy ICONS
We should not use too many styles to affect the presentation of data, such as: shadows, 3D effects, gradients, zebra stripes, excessive grid lines, italics, bold, etc.
15. Use different types of color schemes
Share a color picking tool: colorbrewer2.org
It divides colors into three categories: 1. qualitatively different; 2. 3. Spreading from the center to the sides;
Use a reasonable color scheme as needed to make the chart clearer.
16. Barrier-free design cares for color-blind users
About 1 in 12 people are color blind, according to the National Eye Institute. Data visualization is more likely to be successful if it reaches more people;
The solution: Chart colors use different saturation and brightness, which can be detected by printing in black and white.
17. Let typography focus on the data
Make sure the layout of the chart conveys the information accurately and helps the user focus on the data rather than being distracted in other ways.
For example, avoid using highly decorative fonts, avoid all caps, make sure the text has a high contrast with the background, avoid rotating text, etc.
18. Use horizontal bars instead of rotating labels
As you can see below, it would be better to switch to a horizontal bar instead of twisting the user’s neck.
19. Choose a chart library that works for you
If you’re in charge of graphics for web front-end development or mobile development, the first problem is to choose a good icon library.
Modern third-party icon libraries have many of the interaction designs and rules mentioned earlier that make it easier to implement charting functionality;
20. Let users generate their own custom charts
We can refer to the IOS Health application, which can help users to explore by themselves and get the data display they want by changing parameters, types of visualization, and timelines. This kind of user experience is very friendly
20- Ideas -for- Better -data-visualization
I’m Carmelo Anthony of the Nuggets. Output exposes input, technical insight into life. See you next time