Want to do a hot info map? We need to understand five Tiger of data visualization first.

Because the next to do the seller background data vertical and horizontal revision, the data visualization of this piece of research and experience of the collation, with you to share the data visualization commonly used in five ways, hope to give you the development of ideas.

　Concept

Through the use of graphical means, clear, efficient and effective transmission and communication information. From the user's point of view, data visualization allows users to quickly grasp the point of information, so that key data points from the human eye quickly to the depths of the heart.

Data visualization will generally have the following characteristics: accuracy, innovation and simplicity.

Five common methods of visualization

The following 5 data visualization methods are summarized from the most common and practical dimensions, so let's take a look at them:

　Area & Size Visualization

Distinguish the length, height, or area of the same type of graph (such as column, Circle, and spider map) to clearly express the contrast between the corresponding index values of different indicators. This approach gives the viewer a clear view of the data and the comparisons between them. When making this kind of data visualization graph, we should use the mathematical formula to express the accurate scale and proportion.

Examples:

A: Cat's shop dynamic rating

Day Cat Store Dynamic scoring module the right side of the bar chart clearly expresses the ratio of different rating users in precise proportions. From the image below, we can strongly perceive the absolute proportion of users with a 5-point dynamic score at the first glance.

B: Federal Budget map

The following figure, in the U.S. federal Budget profile, uses a different level of money flow to clearly express the source of the money, and the proportion of the amount of each item.

C: Company Yellow Pages-Enterprise capability model Spider map

The following figure, through the performance of Spider map, the company's comprehensive strength and peer average level of comparison will be at a glance.

　Second, color visualization

By the depth of the color to express the strength and size of the index value, is a common method of data visualization design, the user at a glance can be seen as a whole to see which part of the index data is highlighted.

Examples:

A: Click on the frequency of hot try

For example, the following is the eye heat, through the difference in color, we can visually see the user's attention point.

Statistics of unemployment rate in the b:2013 year

As you can see in the picture, the overall unemployment rate in the United States is fully visible by dividing the U.S. map by state, and using different colours to represent different levels of unemployment.

C: U.S. mobile phone users City distribution

The red dots are in the iphone, and the green dots are for people who use Android. The two pictures, seen on Weibo, are the first of a city in the United States, and the second Zhang Tute the city center of New York, especially the Manhattan region. We can see the majority of people in the city centre and on the main road with the iphone, while the Android people are in the suburbs. It's also a hot argument, some say that rich people in the United States live in suburban villas, so the rich love to use the Android phone, and some retort that Manhattan has almost all the iphone, indicating that the rich like to use the iphone. Regardless of the conclusion, it is enough to show that the user is attracted by these graphs, so the visual effect of the way is really intuitive.

Note: Scientists have counted 3 billion Twitter tweets with geo-data for 2 years, based on data summarized by clients.

　　Third, graphic visualization

When we design metrics and data, we use graphs with corresponding actual meanings to combine rendering, which makes the data chart more vivid and easier for users to understand the theme of the chart.

Examples:

A:ios mobile phone and flat panel distribution

As shown in the following illustration, when showing the use of different types of mobile phones and tablet user ratio, directly using the total Apple graphics background to divide the user ratio, so that users can intuitively see these pictures at the first sight of the picture is described in the Apple device, intuitive and clear.

B: Net purchase survey for Renren users

As can be seen in the following figure, the design of the data visualization is directly based on male and female graphics, which makes the classification clear. The combination of color visualization (left blue right pink), but also using the area & size visualization, different proportions with different lengths of the bar. The combination of these visualization methods greatly enhances the comprehensible nature of the data.

　　Iv. Visualization of regional space

When the target data is to be expressed in relation to the subject, we usually choose to use the map as the background. This allows users to intuitively understand the overall data situation, but also can be based on a rapid geographical location to a region to view detailed data.

Examples:

A: The best place to drink beer in America

In the figure below, a clear record of the total number of medals produced by different States in the United States Beer Festival during the 1987-2007 years is clearly recorded in the context of a map of the United States. supplemented by the color visualization method, let the user clearly see which states are more rich in drinking beer.

　　V. Visualization of Concepts

By converting abstract metric data into familiar, easily sensed data, users are more likely to understand the meaning of the graphic.

Examples:

A: Toilet tips

The picture below is the toilet in the wall of the paper-saving environmental protection tips, using the concept of the conversion method, so that users clearly feel the staff a year of paper volume. If we just describe the amount of paper towels and the height of the stack, we have no concept of dominance. But when users see the stack height of paper than the world's tallest building is still high, at the same time need to cut more than 500 trees, presumably the user's savings paper or even the feelings of the ban on paper. So we can see how important and effective it is to use the concept of conversion method.

Visual description of the B:flickr cloud storage space up to 1TB

Flickr's rise to 1TB of cloud storage is really a pleasure, but I believe many people are not clear about what this order of magnitude means. So Flickr is using a concept visualization program to advertise this new upgrade. As you can see from the figure below, the user can dynamically select the size of the photo, and Flickr will then use the dynamic interaction to calculate and display how many pictures 1TB can hold the corresponding size. In this way, the user has a clear concept, know what the 1TB is the scale of capacity.

　　Attention matters

After summarizing the common dimensions of the data visualization methods and examples, to the overall emphasis on doing data visualization design considerations, summed up three points are as follows:

1) Designed to apply at least two levels: one is to be able to display a large graphic contour, so that users can quickly understand the overall concept of the diagram to express, and then in the appropriate way to the local detailed data to render (such as the mouse hover display).

2 When doing data visualization, the above five methods are often mixed, especially when doing some complex graphics and multidimensional data display.

3 Make the visualization of the chart must be easy to understand, on the basis of the visibility of the more beautiful the better, avoid flashy.

　　Summarize

As a designer, in addition to mastering methods to have targeted design, but also in peacetime to pay more attention to accumulate material, while cultivating their creativity and professionalism, to maintain a curiosity, in order to truly design a beautiful style and practical data visualization chart.