Comparison charts are usually used for data comparison based on classification/time. When there are few items to be compared, such as the comparison of receiving quantity in five regions, it can be represented by histogram.
Bar chart When there are many items, such as 12 or more, the bar chart on the mobile side will be crowded and more suitable for bar charts. Generally, there are no more than 30 data items, otherwise it will easily bring visual and memory burden. Column charts have many rich applications. Such as stacked column chart, waterfall chart, horizontal bar chart, horizontal positive and negative chart, etc.
Look at the trend line chart. When the x-axis is a continuous value (such as time) and the changing trend is emphasized, the line chart is applicable.
Enlarge the difference-nightingale rose map. Because the radius and area of the fan are square, the Nightingale Rose Diagram will enlarge the difference between the values and is suitable for comparing the values with similar sizes. Rose diagram is also applicable to the concept of period/time, such as week and month. It is still recommended that the data volume should not exceed 30, which exceeds the bar chart that can be considered.
When comparing positive and negative data or even more dimensions, you can try a two-way bar chart. Using color to distinguish large areas and using hollow/solid to distinguish sending and receiving volume can not only compare large areas as a whole, but also compare the situation of areas in detail.
Upgrade the monster to make it more difficult. Add another dimension to the two-way chart, as shown in the following table, and compare the profits and corresponding income costs of five regions. Please think about it first, and then slide down to see the recommended map.
It can be seen at a glance that the profit in Shenzhen is lower than that in Guangzhou. Even though its income is higher than that of Guangzhou, its cost is relatively high.
Target realization-the realization of the indicators of the project symbol chart, such as the income reaching the standard and the scope (excellent, good and poor).
Bullet map, because it's like the trajectory of a bullet. Compared with the dashboard, it can express rich data information in a narrow space and has greater efficiency advantages in information transmission.
If you want to compare the income of four quarters, just use different colors to distinguish it. As shown below, it can be seen at a glance that the performance in the second quarter was better, but the first quarter was not good.
Performance-radar chart. Multidimensional performance data, such as comprehensive evaluation, are often represented by radar charts. See more in the game. It is widely used in commercial and financial fields and is suitable for expressing some known results within a fixed framework. Common in business conditions, financial health.
The index score is close to the center of the circle, indicating that the state is very poor and needs to be analyzed and improved; The index score is close to the outside line, indicating that it is in an ideal state. For example, I analyze corporate finance, which falls into six categories: sales, marketing, research and development, customer service, technology and management. It is clear to compare the budget with the actual expenditure by radar chart. As shown in the figure below:
The above are commonly used charts of the "Comparison" category, which are summarized as follows:
A whole is divided into several parts. This situation will be composed of structural charts, such as the proportion of receipts in five major regions and the source of company profits.
Single pie chart
In Guanzhong (No.1), the reception volume of five regions is compared with histogram. If you look at the scale, the pie chart is more suitable. The pie chart is flawed and good at expressing a certain kind. But not good at comparison. It is difficult to tell the difference between 30% and 35% with the naked eye on the pie chart. When there are too many categories, it is not suitable to use pie charts to express them.
What if it becomes a 17 area? Generally, there are no more than 9 pie charts, so it is recommended to display them with bar charts.
In addition to pie charts, doughnut charts can also represent proportions. The difference is that the middle area of the pie chart is hollowed out and the text information (such as the title) is displayed in the hollow area, which has the advantage of higher space utilization.
Layering-ring diagram, rising sun diagram
For management, we must first grasp the overall situation and key points. For example, the person in charge of the region needs to know the situation of key regions and key branches at a glance (as shown below). How to show it?
This is the so-called sunrise map If you drill down to see the data layer by layer, the composition of key areas and the corresponding regional branches will be clear at a glance.
Cumulative trend-accumulation area chart
Look at the case of numerical composition changing with time: how to visualize the income composition trend of the first major field (including four key fields) in recent four years?
The recommended scheme is the accumulation area diagram, which can show the contribution of each component (region) to the total amount (region) and the change process of the total amount (region). It should be noted that the starting point of regional income does not start from y=0, but is layered on the basis of the later regions, and finally forms a whole.
Best design guide for area map: put the category with big fluctuation at the top, use transparent color, and no more than 4 categories. The y-axis starts from 0. Don't use area chart to display discrete data, only continuous data have intermediate values.
Cumulative comparison-stacking histogram
If the label text (that is, the year) and the legend (that is, the region) on the X axis of the above picture are interchanged (as shown in Figure A below) to see the income composition of each region in the past four years, which picture is more suitable?
Accumulated values can be displayed in both stacked area chart A scheme and stacked column chart B scheme. The difference is that the X-axis of the stacking area graph is continuous data (such as time), and the X-axis of the stacking histogram is classified data. In this case, the X axis is discontinuous classification data, so scheme B is more suitable.
Cumulative increase or decrease-waterfall chart
If you want to express the evolution process of quantity between two data points, you can use waterfall diagram. Initial value, after constant addition and subtraction, gets a value. Waterfall diagram graphically illustrates this process and is often used to show income and expenditure in financial analysis.
Through distribution &; Contact graph can see the distribution of data, and then find some connections, such as correlation, outlier, data clustering and so on.
Bivariate scatter plot
Still taking business as an example, the following figure shows the cost/revenue distribution of single ticket in national outlets.
If you look at it alone, you may not see anything. If you add two average lines, it will be different.
If you add the moving average, you will know which points are above the moving average and which points are below it. However, there are so many outlets that you can't tell which area it belongs to one by one. It is very meaningful to add color to scattered points.
Through this chart, we can see which areas have low single-ticket profit and need to be improved urgently. For example, in the fourth largest area in the lower right corner, the revenue per ticket is lower than the average, and the cost per ticket is higher than the average.
Three variables-bubble chart
As we all know, the total profit of outlets is not only related to the profit of single ticket, but also related to the volume of transactions (that is, the amount of receipts). Using the area of scattered points to represent the amount of collection becomes a bubble chart.
All analysis related to spatial attributes can use geographic maps. For example, the sales volume in various regions, or the density of shops in a business district. The combination of bubble map and map can evolve into heat map. Through the heat map, we can see which outlets receive more and need to allocate resources.
Geographic maps must use coordinate dimensions. It can be latitude and longitude, or it can be a geographical name (Shanghai, Beijing). Coordinate granularity can be as fine as a specific street or as wide as all countries in the world. POI is a very important factor. POI is the abbreviation of "information point", which can be translated into information point. Each POI contains four aspects of information, such as name, category, latitude and longitude, and nearby hotels and restaurants. With the help of POI, data can be presented by geographical dimension.
Best design guide: 1. Use a thin map outline; Choose a suitable color scheme; Use less filling patterns; Select the appropriate data interval.
User behavior analysis, showing the operation of browsing, clicking and accessing the page in a highlighted visual form. The following figure shows the click behavior of users in Google search results.
Summary: When we get the data, we first refine the key information, make clear the data relationship and theme, and then select the appropriate chart for visualization.
Good visualization can tell stories, and it reveals the laws behind the data to us. The cognition of using visualization may come from the following figure. Although the structure is clear, it is only for Excel charts, which is not rich enough.
Dimensions are often mentioned in data analysis. Dimension is the angle of observing data and the description of data. We can say that the region is a dimension, including Shanghai and Beijing. It can also be considered that sales volume is a dimension, which contains all kinds of sales data. Dimensions can be represented by time, values or text, and they are usually used as a category. The essence of data analysis is the combination of various dimensions.
Dimensions are mainly three data structures: text, time and value. Shanghai and Beijing in the region are text dimensions (also called category dimensions), sales quotas are numerical dimensions, and time is the world.
The numerical dimension can be calculated by processing other dimensions, for example, according to the regional dimension, how many are from Shanghai and how many are from Beijing. Dimensions can be converted to each other. For example, age is originally a numerical dimension, but through the division of age, it can be divided into three age groups: children, youth and the elderly, and then converted into a literal dimension.
1. Box diagram
Box chart is not well understood by most people, and it can accurately reflect the dispersion of data dimensions (maximum number, minimum number, median, quartile). Box graph is applicable to all discrete data.
The following figure is a typical application of box diagram. The upper and lower ends of the line represent the maximum and minimum values of a certain set of data. The upper and lower ends of the box represent the highest 25% and 75% values in this set of data. The horizontal line in the middle of the box indicates the middle value.
2. Chart
A chart showing the relevance and relevance of things, such as social relationship chain, brand communication, or the flow of certain information.
There is a Weibo, and now I want to study its communication chain: through which big V's are shared, who shared them before the big V's, and so on. On this basis, we can draw a scattered network diagram and analyze the process of virus marketing. The chart depends on a large amount of data, and it has no concept of dimension.
3. Rectangular tree diagram
As mentioned above, column charts are not suitable for expressing too many categories (such as hundreds) of data. What should I do? A rectangular tree diagram appears. It intuitively represents values by area and categories by color.
Each color in the figure below represents a category dimension, and there are several secondary categories under the category dimension. If expressed in a histogram, it would be a disaster. It is easy to use a rectangular tree diagram.
E-commerce, product sales and other analysis involving a large number of categories can use rectangular tree diagrams.
4. Sankitu
Relatively unpopular charts often represent the change and flow of information.
5.0 Funnel diagram
The famous visualization of conversion rate is suitable for the conversion analysis of fixed process, and you can also think of it as a simplified version of Sankey diagram. The conversion rate can also be expressed by several sets of numbers, and it is not necessary to make a funnel chart.
Readability * *
The primary function of charts is explanation, not design, especially most charts will fall into the trap of over-design.
objectivity
Interpretation of data can present many results, because everyone has different views and perspectives. This is why we often say that statistical society lies.
The following figure is a sales column chart. There seems to be no big change in sales.
Shown in another chart. I see a changing growth trend.
In fact, there is no difference between the data in the two charts. Why? The difference is only on the coordinate axis. The y-axis of the first graph starts from 0, and the second graph starts from 2.45. The second is a column chart with a part cut off.
consistent
If the overall color of the chart is cold, then don't add warm colors.
If the text of the chart is elegant black, don't add song style.
If the data in one area is compared with a column chart, the column chart style is also used in other areas.
If women use red and men use blue in a chart, then this norm should be reflected in all charts. All the design elements are the same except the color.
If there are multiple charts, the chart elements should be unified, such as title, axis scale and axis position.
Why do users have the need to "turn data into charts"?
The final answer must be to return to the "first principle" of enterprise management-open source and reduce expenditure. Enterprises need data to analyze how to save more money and how to make more money. Future BI products should not position themselves as "tools", but as "services".
1.0 From the process point of view, exploratory visualization is like this:
This visualization focuses on the microscopic functions of charts, such as auxiliary lines, early warning, various chart types and so on.
2.0 Explanatory visualization requirements
Generally, after completing data exploration and forming a certain data insight, we will focus on the story-telling scene. Some "one picture understands XXX" and "one picture understands XXX" you see on the Internet belong to explanatory visualization.
This class focuses on the overall visualization of charts, such as combining multiple charts to make a report or story version, so it will provide functions such as title editor and typesetting editor. At present, BI products on the market, such as Netease, BDP, Tableau and PowerBI, all adopt this model.
1. This business-oriented product framework is not suitable for the domestic market.
Because the users of such products are basically professional users (data analysts), it is ignored that most domestic enterprises have not set up special data analysis posts. Enterprises with the ability to equip data analysts are generally medium and large enterprises, and their ability to pay may be relatively strong, but it also means that the number of users will be less.
Professional users correspond to data analysts, and semi-professional users correspond to users who are professional in business but not professional in data analysis, such as finance, sales, HR, etc. This kind of users usually focus on explanatory visualization in their daily work, such as year-end summary, annual planning, monthly report, etc. The process for such users is as follows:
[Image upload failed ... (Picture-E6E0b4-1556103840929)]
Users can directly import data and generate charts without too complicated operations. There is a problem:
Understanding of visualization: information visualization is to correctly express complex information and logical relations with graphics.
? Attract readers through the unique beauty and interest of pictures? Make the content easier to understand through the best expression.
? Close the distance between readers and products and enhance brand awareness.
Work 1: safety product homepage display
Creative inspiration: From the requirements document, I saw that the names of these sub-products were Royal Avant-garde, Eight Diagrams Array and Yucheng River ... It was very interesting at that time, and a picture of the ancient city immediately came to my mind, surrounded by soldiers, Eight Diagrams Array and Yucheng River. After expressing this idea with the visual designer, everyone hit it off and finally came up with this plan. At first, the tower in the middle was red, which was a bit too eye-catching. In order to avoid usurping the role of the host and reflect the feeling of data protection, it was changed to this translucent and very digital virtual feeling.
Work 2: Product Structure Diagram
Creative inspiration: Through the analysis of competing products, it is found that colleagues at home and abroad have made great efforts in this respect, so we should try to describe the product structure and relationship clearly with a picture. The next article will talk about the specific design process.
Op. 3: Schematic diagram of the use process
Creative inspiration: The drawing given by the product manager is rigorous, but it is difficult for users to understand, so it is simplified into a one-way flow chart with wireframe first, but it is not beautiful and intuitive enough. The ingenious visual designer skillfully solved this problem by beautifying the graphics.
Under revision (part):
After improvement:
Op.4: schematic diagram of scheme description
It is also to sort out the information logic first, express it in a more easy-to-understand way, and then beautify it through visual designers.
Improved drawing:
To do a good job, we must first know what the standard is. By putting these failed works together, we can get a general idea of the reasons for the failure and the good standards.
[image upload failed ... (image-cf 4898-1556103840928)]
As a visualization tool, "infographic" should include the following six categories: charts, diagrams, graphs, tables, maps and lists.
According to the formal characteristics, we often divide charts into five types: relational flow chart, narrative illustration type, tree structure chart, time distribution type and spatial deconstruction type.
1, relationship flow class diagram
2. Narrative illustrations and charts
Narrative diagram is a diagram that emphasizes the time dimension and the information changes with time.
3. Schematic diagram of tree structure
Express complex data clearly through branching and combing. Using grouping, each reclassified topic frame represents the master-slave structure.
4. Schematic diagram of time expression class
The time expression class diagram only needs to add text data around the time axis. From the design point of view, integrating the theme into graphic design and selecting important events for interpretation can make the picture beautiful and deepen understanding.
5. Schematic diagram of spatial structure class
It is the significance of the existence of spatial structure diagram to model and virtualize complex structures with design language.
This process needs collaboration, and the data needs to be filtered and sorted out. Accuracy is the first condition, followed by combing. Find out the main logic, filter the secondary content and design it carefully.
1, basic graphic creativity
Histogram and pie chart are the two most commonly used basic figures, but simple geometric figures are difficult to give people a sense of design. Highlighting the design theme with the creativity of basic graphics can achieve twice the result with half the effort.
The left and right contents in the above picture are exactly the same, but the right picture can get information even if the reader doesn't look closely.
2. High attraction and visual highlights
From traditional web pages to social Weibo, users browse information faster and faster, and high attraction is the most precious wealth point.
3, the picture is concise and clear
4. Symbol icon
In the design, attention should be paid to maintaining the unity of style, making people visually coherent and pleasing to the eye.
1, the pie chart is out of order.
Pie charts are very simple visualization tools, but they are often too complicated. The stocks should be sorted intuitively, and should not exceed 5 paragraphs. There are two sorting methods that allow your readers to quickly grasp the most important information.
Method 1: Place the part with the largest share in the direction of 12, place the part with the second largest share counterclockwise, and so on.
Method 2: Place the largest part at 12, and then place it clockwise.
2. Use a dotted line in the linear diagram.
The dotted line may be distracting, but it is easier to distinguish it with a solid line with the right color.
3. The data placement is not intuitive
Your content should be logical and guide readers to read data in an intuitive way. Sorts categories by letters, times, or values.
4. Data fuzzification
Ensure that data is not lost or overwritten by design. For example, use transparency in an area chart to ensure that users can see all the data.
5. It costs readers more energy.
You need to make the data easier to understand through auxiliary graphic elements, such as adding a trend line to a scatter chart.
6. Error in presenting data
Make sure that any presentation is accurate. For example, the bubble chart should be as big as the numerical value, so don't label it casually.
7. Use different colors in the heat map.
Some colors stand out from others, adding unnecessary heavy elements to the data. Instead, we should use a single color and then express it through the depth of the color.
8. The column is too wide or too narrow
Column spacing should be adjusted to 1/2 width.
9. The data is difficult.
Contrast is an effective way to present differences, but if your readers are not good at comparison, the effect will be greatly reduced. Ensure that data is presented in a consistent way so that readers can make comparisons.
10, using the stereogram.
Although these pictures look exciting, 3D pictures are also easy to distract expectations and disturb data, and sticking to 2D is king.
The essence of numerical visualization is to represent the size of data values with various visualization attributes. There are several visual attributes: position, length, area and color. Point, line, surface and color value corresponding to visual design.
The core idea of its visualization is to connect it with the numerical things in our present world in a quasi-object way according to the context.
If the running speed is 15km/h, then you can draw a picture of athletes running to express this number. If the running speed is 70km/h, you can draw a cheetah running and express the running speed by blurring the background. If you want to describe the height of a 5km mountain, you can draw a towering mountain, giving people an intuitive image of the mountain, and more creative designs can be carried out around imagination.
The speed is divided into slow, medium and overspeed, as shown in the left figure below. When expressing evaluation information, it is necessary to expand association according to the background. For example, if the precipitation is 50 mm, we may imagine a test tube connected to 50 mm deep water.
One-dimensional table is shown in the figure below, and there is only one row or one column of data in the data table. We need to analyze the goal of data visualization and classify the data into the following categories according to the goal:
? Data that emphasize absolute values;
? Data that emphasizes trends;
? Percentage data;
? Different types of data.
3. 1. 1 histogram
/kloc-the income of 0/0000 yuan is twice that of 5000 yuan, and the GDP of 1 trillion yuan is twice that of 500 billion yuan. This kind of data is called isocratic data. Readers of bar charts are generally visually attracted by the columns themselves and do not pay attention to the starting point of the vertical axis. Users usually default the length of the column to represent the absolute value. So the starting point of the histogram longitudinal axis must start from zero.
3. 1.2 histogram
The essential difference of histogram data lies in expressing the quantitative distribution of continuous intervals. In statistics, the vertical axis of histogram needs counting data, that is, histogram is used to count the number of objects in a certain interval.
3. 1.3 Bar Chart Variant: Bar Chart
Bar charts also have a great typesetting advantage, which can display text and bars on one side and attach classification instructions. In China, if it is not because of typesetting, please use this bar chart with caution.
3. 1.4 Histogram variable: counting bar chart
3. 1.5 Bar chart variants: radial bar chart, radial bar chart and spiral chart.
In order to adapt to the typesetting area or increase the interest of graphics, the column chart will be distorted.
3. 1.6 column chart variation: replace columns with pseudo.
In graphic design and poster pages, simulacra elements are usually added to make the expression of data more vivid. Its basic idea is to expand the association around the data subject and replace the columns with quasi-objects.
Example 1: If you describe football-related content, you can use the image of kicking the ball instead of the post.
Example 2: If the content described is related to the stars, then the column can be replaced by the image of the stars.
Example 3: If you describe the differences between men and women, you can use the images of men and women instead of columns.
Example 4: If the data is related to smoking, use the shape of cigarette butts instead of cylinders.
Example 5: If it is the height of the mountain, then the shape of the mountain can be used.
3. 1.7 column chart variant: carry out reorganization design according to some dimensions.
The idea of replacing columns with imitations in the previous section is still under the framework of histogram. But in many cases, you can even throw away the shackles of histogram and expand the association according to keywords. In the process of association, we only need to remember the essence of data visualization mentioned in the first chapter: the size of data is represented by four visual elements: position, length, size and color.
Example 2: PM2.5 values of provinces and cities (assuming data)
This kind of data can only be developed with location as the key word and presented in the form of map.
PM2.5 is a concept without image, and it is unlikely to be developed on PM2.5 if it is visualized. Then this kind of data can only be developed with location as the key word and presented in the form of map.
The province itself is a surface with a fixed shape and size on the map, and the numerical value can be expressed by a color heat map (below, left).
Example 3: Visit each website
Example 4: Migration Diagram
The data prototype of a single city migration map is still a one-dimensional array. When designing with the map as the dimension, what needs to be expressed is the connection between each city and Beijing. The length information of the connecting line has been used by the distance between the city and Beijing, so the value can only be expressed by the color of the connecting line.
3.2 Data emphasizing trends
3.2.2 Variant of line chart: curve chart
3.2.3 Variant of line chart: moving average line chart
3.2.4 Variant of line chart: area chart
3.2.5 Variant of line chart: stock index trend chart
Generally speaking, percentage data is represented by pie chart (or ring chart), which is the most routine.
The difference between pie chart and doughnut chart is that doughnut chart can better integrate the theme with the chart.
3.3.2 Pie chart change: the pie chart changes into an object-like shape.
Example 1: If you describe the composition of the human body, you can visualize it around the human shape and change the shape of the cake into the shape of a human.
Example 2: If you want to describe the proportion of people in various industries, then you can consider drawing 100 people. People in various industries use graphics without styles, as shown in the left figure below; And when you want to describe the source of guns in various shootings, as shown in the picture on the right.
Step 1: Make sure that the ideogram is correct.
"Correctness" is the most basic requirement of an infographic, so we must first ensure that the content of the infographic is correct.
For products with complex business and difficult to understand, the product manager can draw a picture according to his own understanding first, and the designer and the product manager communicate to confirm that the two sides have the same understanding.
Taobao technology has a saying in ten years that "good architecture diagrams are beautiful". It took Taobao engineers ten years to prove it. In fact, it is not only a technical architecture diagram, but also a good flow chart, structure diagram, information diagram and so on.
How to optimize the expression of infographic? If it is a structure diagram with complex logic, it can be like this:
Although there is no mistake in logic, the arrows cross and look ugly.