Front-end graphics -1 Data visualization

What is data visualization?

Data visualization is a scientific and technological research on the visual representation of data. The information extracted in a summary form, including various attributes and variables of the corresponding information unit, is interpreted visually by using graphics, image processing, computer vision and user interface through expression, modeling and stereoscopic, surface, attribute and animation display.

This paper mainly records the key points of data visualization in the front end, and does not pay attention to the collection and cleaning of early data.

The picture shows the percentage of electoral votes in each state. The authors devised two methods of representation, one based on the distribution of “electoral votes” and the other based on the map of the United States. In addition to the comparison of the total number of electoral votes between the two sides at the top of the picture, moving the mouse over each state can also show the number of “electoral votes” and the percentage of support for Clinton and Trump in each state.

Why data visualization

The main purpose of data visualization is to be able to visualize their data and communicate information clearly and effectively. Therefore, data visualization requires effective expression of ideas, not only aesthetically but functionally, providing insights into sparse and complex databases of information, and communicating key aspects of information in an intuitive manner. Far-fetched and excessive visualization will be chaotic, confusing users and aggravating the information burden in the era of big data.

As a hasty passer-by on the fork intersection, a simple and clear direction pointing to the card can be, set up too much direction card, messy description modification may bring unnecessary trouble for it.

So data visualization serves three main purposes:

(1) Large-scale visualization is more efficient, allowing people to quickly build their own insights from large amounts of data

(2) Visualization can help analysts or teams gain more insights into the nature of the problem and gain a deeper understanding

(3) Proper visualization can help people create a shared view of the situation and reach a consensus on what needs to be done.

Not only will there be more data and more open data, but the silos will move from an isolated state to an associated sharing phase. Thus it can connect all aspects of life and work.

How do YOU visualize data

Discussion on the process of big data visualization

(1) Data visualization

Appropriate visual elements are adopted to express the original data, which includes text-based data, symbols, images, animations, sounds, etc., mainly based on numerical text-based data.

(2) Visualization of indicators

As store sales, sales personnel to complete the task given by the superior, it is necessary to develop their own sales indicators, and the formulation of indicators is crucial. For example, people need to obtain the population portrait of a certain region, and the indicators are the population number, population age, population gender, consumption, income and so on. By visualizing the population of an entire region with clear indicators, one can quickly formulate strategies for the next step.

(3) Visualization of data relationship

Data relationships tend to be visual data need to express the theme of the core objective, the book is the relationship between size, how much, and so on, in the visual display, you can use the location (up and down or so), size, color, and the future to achieve such effect, we need to sort, classification, perspective, and so on arithmetic operation.

(4) Visualization of background data

Visualization should bear in mind that “data is not valuable, information is valuable”, which is also the reason why people urgently need to continue efforts to extract valuable information from the explosive growth of big data. The core is the background data, such as sales data. Only looking at sales data is truly meaningful to serve the decision making of the enterprise. More data are needed.

(5) Convert to an acceptable form

In fact, there are different forms of expression for the same original data, so the data expression model needs to be determined according to the data type and characteristics, but the premise also needs to consider the difference of the data receiving masses. People’s age, income, education, occupation and other levels of understanding of the data model directly affect the data effect. For example, between 50-year-old senior government staff and 20-year-old university students, the former tends to be more stable color and intuitive expression of data.

(6) Focus

In overloaded data, it is impossible to uniformly display all the data, so we need to optimize the original visualization twice, and focus on those small parts of data and information that need to be strengthened in accordance with the visualization standards.

(7) Concentration or summary display

Summary presentation (concentration) is an essential part of data visualization. After processing data indicators, relationships and focus, we have completed the basic data visualization design. However, if there are too many models, we need to conduct summary presentation of models. By summarizing models, such as text types, numerical types, graphs, etc., to tell people the core meaning of data presentation, so as to better guide people to carry out further strategic work.

(8) Mop up

Decorative work is done to make the details of the visualization more accurate and even beautiful. Typical work includes setting the title, indicating the source of the data, shortening the column that is too long, setting the color of the table line, various fonts, pixel thickness, color Settings, etc.

(9) Stylization

Stylization is not all unusual, on the contrary, it is the characteristic of standardization. For example, layout, color, graphics elements, commonly used charts, infographic forms, data, information dimension control, typical ICONS, even animation time, transition and so on.

The visualization of data is composed of the most basic elements, just like the nine elements mentioned in The Beauty of Data by Nathan Qiu: position, length, Angle, direction, shape, texture, area, hue and saturation.

The combination of these most basic elements can form a gorgeous visual diagram in the front, such as rectangle and high and low length quantization into the common column model.

The figure below provides us with ideas for model selection. We determine the model to be presented according to data type, index weight, data relationship, etc.

Take big-screen visualization as an example. Currently, big-screen data visualization mainly includes three categories: information display, data analysis and monitoring and warning. For example, tmall Double 11 large-screen visualization can leave a shocking and deep impression on the public through “large area, cool animation and rich colors”.

The background data of double 11 large screen comes from constantly refreshing consumption records and massive consumer groups. Through the definition of indicators, we sorted out the key indicators, delimited the priority level of each indicator according to business needs, and focused on the data we needed. Determine the latitude of index analysis and select the visualization type (valid).

Principles of attention in data visualization design

Ultimately, if users can’t easily use data visualization to draw conclusions and act on them, let them go back to their ancestors. Clarity, practicality, and user-friendliness are essential to any aesthetic design.

The rule of subtraction, less is more, and Apple’s products have won praise from the design world not for the features they contain but for the features they subtract, rejecting any excess and cumbersome interfaces.

Interactivity, like a map, allows users to constantly interact with the map to get the necessary purpose, so increased interaction allows users to quickly ask and answer questions that enable them to make better decisions.

When using relative number, the opposite meaning of relative is absolute. In the decision-making of data visualization, too many absolute numbers are very unwise and lack of theoretical basis. Relative number can reduce users’ doubts about “what data is compared with”, so as to better obtain the context of data.

The future of data visualization

Quantified self

In the future, we will no longer be seen as transparent beings, and the reconstruction of data to individuals will undergo integration from the outside to the inside. From the quantification of human body temperature, blood oxygen and heart rate by intelligent wearable technology, to the evolution of genes and memory storage by intelligent human chip. Whether the data will be presented visually on a screen or in VR holograms, there is no doubt that quantifying the self will revolutionize the experience.

The Internet of things

The Internet of Things is widely used in the integration of networks through communication perception technologies such as intelligent perception, recognition technology and ubiquitous computing. A typical example is machine monitoring, which uses multiple sensors installed on different machine parts to upload data such as temperature, vibration and pressure to the analysis system, which processes, identifies and responds to them. Visualization is a very important bridge between analysis system and users. Through the Internet of Things, visualization can integrate and connect objects in life and work more efficiently and quickly.

Article pictures from the network, assault deleted

Reference article:

Wikipedia. “Data Visualization”

Data View. Introduction to big data visualization concepts and related tools

Phil Simon. Big Data Visualization — Reconstructing an intelligent Society

Chart advice – an idea launched © 2010 a. says v. bela, http://www.extremepresentation.com