Shulou(Shulou.com)06/02 Report--

The root of visualization

I read a very powerful article called "the Root of Lisp" (English version: The roots of Lisp) many years ago, to the effect that Lisp has built a programming language that is extremely concise and extensible only through a data structure (list) and a limited number of functions. At that time, I was deeply shocked by this design philosophy: on the one hand, it is simple enough, each individual function is simple enough, on the other hand, it has very complex mechanisms, such as macros, high-order functions, recursion and other mechanisms can build arbitrarily complex programs, and complex mechanisms are made up of simple components.

The same is true of data visualization. A clear, expressive and beautiful visual information map is composed of only some basic elements, but different combinations of these elements can produce fascinating power.

It is easy to list the roots of visual elements: location, length, angle, shape, texture, area (volume), hue, saturation and so on. Qiu Nansen provides a picture of visual elements in his "Beauty of data". It contains most of the commonly used elements.

Cdn.xitu.io/2017/5/20/6ab138d1a62e006199518ff97a236c55?imageView2/0/w/1280/h/960/format/webp/ignore-error/1 ">

The exciting thing is that these elements can be combined freely, and the combination tends to produce an effect of 1: 1 > 2.

Psychology and Cognitive system

Data visualization is actually based on the human visual cognitive system, so some understanding of how the human visual system works can help us to design visualization works that are more efficient (faster to convey the information we want to express to readers).

Psychophysics

In life, we will encounter such a scene: if a commodity with an original price of 10 yuan is reduced to 5 yuan, it is easy for consumers to buy it, while a commodity with an original price of 100 yuan is reduced to 95 yuan. It is difficult to stimulate consumers to have the impulse to buy. The absolute figure of the two discounts is 5 yuan, but the effect is different.

Weber-Fishner Theorem describes this kind of irrational scenario. A more pretentious description of this theorem is:

The sensory quantity is proportional to the logarithmic value of the physical quantity, that is to say, the increase of the perceptual quantity lags behind the increase of the physical quantity, the physical quantity increases geometrically, while the psychological quantity increases in arithmetic series. this empirical formula is called Fischner's law or Weber-Fischner's law.

-extracted from Baidu encyclopedia

This phenomenon is inherent in the structure of the human brain, so it should also be fully considered when designing visual works, such as:

Avoid using area maps as comparisons

When making comparative graphics, it is necessary to consider the use of nonlinear visual elements when the difference is not obvious.

When choosing multiple colors as visual coding, the difference should be large enough.

For example:

As shown in the figure above, as the area increases, it becomes more and more difficult for the naked eye to decode the actual data difference from the size of the shape. The three sets of rectangles above (two in each row are a group), and the corresponding data are as follows. You can see that the absolute difference between the two rectangles in each group is 5:

Var data = [{width: 5, height: 5}, {width: 10, height: 10}, {width: 50, height: 50}, {width: 55, height: 55}, {width: 100, height: 100}, {width: 105, height: 10}]; Gestalt School

The Gestalt school is an important school in psychology, which emphasizes the overall understanding rather than the composition of structuralism. Gestalt believes that when people see a picture, they will first simplify it into a whole, and then refine it into each part, rather than first identify each part and then splice it into a whole.

For example, the famous Dalmatian:

Our eyes-brain can easily see the spotted dog in the shadow, rather than recognizing the dog's four legs or tail first (in fact, the human eye cannot recognize individual parts in this picture).

Gestalt theory has several very important principles:

Proximity principle

Similarity principle

Principle of closeness

Continuity principle

Subject / background principle

Of course, there are some subsequent developments of the Gestalt school, summing up more principles. In engineering, these principles are still widely used to guide designers to design a variety of user interfaces. In view of the fact that there are many articles on Gestalt theory and its applications on the Internet, I will not repeat them here. Interested students can refer to these articles:

A Gestalt article on YouTube.

An article on Gestalt and Web design

An introduction to Gestalt in Tencent CDC

The basic principles of visual design

In the book "Design Book for everyone", the author gives several basic principles of design in an easy-to-understand way, which can be directly used in the design of data visualization:

Intimacy (put the related information together physically, while the less relevant ones are separated by leaving blank, etc.)

Align (align elements horizontally and vertically for visual recognition)

Repeat (repeat a pattern, such as the font color of title 1, the font color of title 2, etc., to be repeated and consistent)

Contrast (distinguish different messages by strong contrast)

If you pay a little attention, you will find that these principles are widely used in the real world. The form of the three headings is the embodiment of repetition; the content of each title is self-contained because the elements that make up it (numbers, two lines of text) are relatively close, and according to the principle of intimacy, the human eye will automatically classify them into one category; the oversized digital font contrasts with the smaller text; the color of the headline contrasts with other content, and so on.

These principles are actually related to the Gestalt school mentioned above and the Weber-Fischner theorem. After understanding these mechanisms of human visual recognition, it is very natural and handy to use these principles.

Some examples

Dilute the grid of the chart (in contrast to the data graph)

Emphasize the ruler through dark colors (strong lines contrast with the rest)

Highlight of outliers (contrast by different colors)

Use colors (through different colors, using the principle of intimacy to facilitate readers to group data)

Element color and legend (using repeatability principle)

There are multiple charts on the same page, adopt the same legend, color selection (emphasize the principle of repetition)

Example

The last article mentioned that I collected some records of my daughter's growth through a mobile phone App, including breastfeeding information, diaper change records, and sleep information. In this example, I will step by step introduce how to visualize this information and explain the visual principles used in it.

The first step in visualization is to figure out what information you want from the data. The information I want to get is the total amount of sleep and the distribution of sleep time.

Advanced version of the bar chart

After determining the purpose of visualization, the second step is to select the appropriate visual coding. As mentioned above, for the human eye, the most accurate visual coding is length. We can convert the sleep time into length, and the easiest way is to aggregate by day and then turn it into a bar chart. For example:

2016/11/21,7682016/11/22,7602016/11/23700

However, this kind of map can not see the distribution of time. We can consider using variants of the bar chart to meet the two core demands mentioned above. Let's draw a simple sketch on the paper first. The vertical axis is 24 hours and the horizontal axis is the date. Unlike a normal bar chart, the total length of each bar is fixed, and the bar represents not a simple non-data type, but 24 hours. In the draft, each slanted square indicates that the child is asleep, while the dotted line indicates that she is awake.

Original data: name,date,length,note Xin Xin, 2016-11-21 19 23 Magee 119, Xin Xin, 2016-11-21 22 purge 04 Magi 211, Xin Xin, 2016-11-22 02 JV 03 Magee 19, Xin Xin, 2016-11-22 02 Jing 23 Magee 118, Xin Xin, 2016-11-22 05 Jue 58 Magi 242, Xin, 2016 peg 11 22 10 purge 57 LG 128, Xin, 2016 Lance 11 22 14 peg Rod 35, Xin, 2016 peg 11 22 14 peg 15 Jr 127, Xin, 2016 Eng 1122 20 Jo 2 22, Xin, 2016 peg 1123 1 Jr 27197.

There is a problem here. Our vertical axis is 24 hours. If she starts to go to bed at 23:00 at night and sleeps for three hours, then the bar will exceed the 24-grid axis. I wrote a function to do data conversion:

Require 'csv'require' active_support/all'require 'json'csv = CSV.read ('. / visualization/data/sleeping_data_refined.csv',: headers = >: first_row) data = [] csv.each do | row | date = DateTime.parse (row ['date']) "% Y/%m/%d% Hava% M") mins_until_end_of_day = date.seconds_until_end_of_day / 60 diff = mins_until_end_of_day-row ['length']. To_i if (diff > = 0) then data row [' name'],: date = > row ['date'],: length = > row [' length'] : note = > row ['note']} else data row [' name'],: date = > date.strftime ("% Y/%m/%d% HRV% M"),: length = > mins_until_end_of_day,: note = > row ['note']} data row [' name'] : date = > (date.beginning_of_day + 1.day) .strftime ("% Y/%m/%d% Y/%m/%d% M"),: length = > diff.abs,: note = > row ['note']} endend

With the clean data, we can write some front-end code to draw the bar chart. There are several points to pay attention to when drawing:

The rectangle corresponding to the time period of each day needs to have the same X coordinates.

Different sleep lengths should be distinguished by color (the longer the sleep time, the darker the color)

Var dateRange = _ .uniq (data, function (d) {var date = d.date; return [date.getYear (), date.getMonth (), date.getDate ()] .join ("/");}); xScale.domain (dateRange.map (function (d) {return d.date;}); function getFirstInDomain (date) {var domain = xScale.domain () Var index = _ .findIndex (domain, function (d) {return date.getYear () = d.getYear () & & date.getMonth () = d.getMonth () & & date.getDate () = d.getDate ();}); return domain [index];}

The function getFirstInDomain returns an X coordinate based on a date value, which returns an integer value (thanks to the ruler function provided by d3) at 19:23 on 2016-11-21 and 22:04 on 2016-11-21.

In addition, we divided sleep quality into five levels according to the number of minutes each time we slept:

Var level = d3.scale.threshold () .domain ([60,120,180,240,300]) .range (["low", "fine", "medium", "good", "great", "prefect"])

Then, in the drawing process, different CSS Class is determined according to the actual data values:

Svg.selectAll (".bar") .data (data) .enter () .append ("rect") .attr ("class", function (d) {return level (d.length) + "bar";}) / /.

After the implementation, it looks like this. In fact, this icon can clearly see that most sleep is concentrated at 0-6 o'clock, while there are basically only sporadic sleep at 10-13:00 at noon and 18-20:00 at dusk.

Starry sky map

One drawback of the above figure is that when there are many dates (there are almost 100 days of data in the picture above), the X axis will be more difficult to draw, and if reduced to weekly or monthly, it will add a lot of additional complexity.

Another attempt is metamorphosis: since this statistic is time-related, the round clock image is a good metaphor and can be naturally mapped to a circle 24 hours a day. The sleep time can be expressed by the arc length, the longer the sleep time, the greater the arc length:

Angle to Radian

First, we divide the whole circle (360 degrees) into minutes, then the corresponding angles per minute are 360 / (24060), and then convert the angles into radians: degree * π / 180:

Var perAngle = (360 / (24 * 60)) * (Math.PI/180)

So for a specified time, such as 10:20, first calculate the number of minutes: 10: 60: 20, and then multiply by preAngle, you can get the starting Radian; the minutes of the starting time plus the length of sleep, and then multiplied by preAngle, is the end Radian.

Function startAngle (date) {var start = (date.getHours () * 60 + date.getMinutes ()) * perAngle; return Math.floor (start*1000) / 1000;} function endAngle (date, length) {var end = (date.getHours () * 60 + date.getMinutes () + length) * perAngle; return Math.floor (end*1000) / 1000;}

The result of the implementation is as follows:

At first glance, it looks like a star map, but the meaning of the different colors in the picture is not so intuitive, we need to add a legend to the diagram. By using the linear ruler of d3 and defining the gradient of svg, after defining the color range of the gradient and gradient, you can draw the legend.

Each arc on the picture will have a tooltip with the mouse moving up, which can be well compared with the clock metaphor in the reader's brain, making the chart easier to understand.

Since I have divided the whole circle into 24 parts, which is actually different from an ordinary clock, wouldn't it be better to add the scale of the clock? As a result, this kind of marking is a bit superfluous, so I removed the marking of the clock in the final version.

As we can see, we use a round clock metaphor to reflect the sleep distribution of each day, and then use the depth of color to indicate the length of each sleep. As the image of watches and clocks has been deeply rooted in the hearts of the people, it is easy for readers to find that the zero point is directly above the circle group. The solid circle in the center helps the reader focus on the innermost circle first, and then gradually outward, which coincides with the distribution of the date.

The final result is here: the heart's sleep record, the complete code is here.

further more

A complete visual work, not only to use a variety of visual coding to convert data into visual elements, background information is also important. Since the starry sky map is about the theme of sleep, a collection of pictures containing her sleeping will reinforce this visual cue and help readers understand quickly.

Make a background map

I have selected a lot of photos taken by my daughter while sleeping from the album, and now I need a tool to reduce these photos to the right size and then splice them into a large picture. There are many interesting places in this, for example, the pictures can be divided into horizontal and vertical screens, and some of them are square. I need to make the zooming result square so that it is easier to piece together.

Fortunately, there is an artifact like imagemagick, which can be done with only one command:

$montage * .jpg-geometry + 0,0-resize 128x128^\-gravity center-crop 128x128+0+0 xinxin-sleeping.jpg

This command zooms all jpg files in the current directory to 128x128pixel, and starts cropping from the middle-gravity center,+0+0 represents the gap between the images, and finally writes the result to xinxin-sleeping.jpg.

After stitching the picture, you can add a blur effect to it through CSS or image editor, and set a dark gray translucent mask.

Body {background-image:url ('/ xinxin-sleeping.png'); background-size:cover; background-position:center;}

Of course, background information is only a supplement and needs to be avoided. So the image is blurred and a dark gray translucent Mask is added (here the body / background principle of Gestalt theory is applied).

Summary

This article discusses some theories of visual elements behind visual works, as well as the mechanism of human visual recognition. On the basis of these mechanisms, this paper introduces how to use common design principles for visual coding. Finally, an example is given to show how to use these elements-and, more importantly, the combination of these elements-to create a beautiful and meaningful visual chart.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.