[data visualization] 360 ° teaching you how to comprehensively learn visualization - Part 1

Effectively convey the meaning behind the data to the observer through visual perception . We will learn how computers use computer graphics to display information , And how humans perceive this information visually . We will also study the form of data , Including quantitative and non quantitative data , And how they are correctly mapped to visual elements to be well perceived by the observer .

One 、 Visualization overview

Visualization mode , Generally speaking , These are important for understanding data visualization .

1、 Interactive visualization

This is a visualization for discovery . Usually , It's a single user , Maybe one or two collaborators may join , But it's basically a user in front of a computer . And draw the data to try to understand what the data means . Can completely control the data , And you can change the dataset and how it is displayed dynamically , To help understand what users are viewing .

2、 Rendering visualization

This kind of visualization is what you see in videos or slides . The purpose is to convey some aspects of the data to a large audience , The difference between presentation visualization and interactive visualization is ： Rendering visualization does not support user input , You can only sit there and observe, but you can't interact with the data , The data you get has been packaged , Can help you understand but can't interact .

3、 Interactive storytelling

They belong to demonstration visualization , Present in the form of interactive web pages , Allows users to interact with data in limited ways , Viewers cannot modify the dataset , But it can further investigate the data , More information can be presented at one time , Just like rendering Visualization .

Two 、 graphics 、 Drawing and realism

Two dimensional graphics

So for most data visualization tasks , We only need two-dimensional computer graphics to draw and display data . To do this , We need to use different coordinate systems . We use different coordinate systems to plot the data , Instead of displaying data .

Vector graphics

Graphics for drawing , Describe shape . For example, pick up a pen and draw a straight line .

Raster graphics

Use a pixel table to display shapes . For example, the mobile screen , They are linear arrays of pixels , These pixels are the specified colors . By specifying certain colors for certain pixels , Can represent different shapes .

Gridding

You will describe a point , Start and end lines and points , You'll get a straight line , Or the smooth curve between them , These will be converted to raster graphics display , It will be composed of illuminated pixels. The path shows the path you describe in vector graphics .

When we draw primitives in two dimensions , When we want to draw the shape of a two-dimensional figure , For example, for drawing triangle functions , We need a coordinate system , Then draw these shapes , So that we know where to place the vertex .

SVG Example

You can visit wthreeschools.com, There are scalable vector graphics （SVG） A tutorial for .

Two dimensional drawing

Scalable vector graphics specification is a method to describe two-dimensional graphics of various systems . One of the systems it uses is HTML, So you can use the HTML Put a... In the code SVG Label to embed 2D graphics .

Its width and height , Usually in pixels . When svg When used for web pages , Used to describe the document system . We tend to go from left to right 、 Reading from top to bottom , And set the coordinate system properly .

<svg width=pw height=ph viewbox="x y w h">......</svg>

3D graphics

To understand the working principle of three-dimensional computer graphics , We must first understand how light leaves light and shadow , Reflected from an object , Then reach your eyes , So it can be perceived .

in real life , We have a light source 、 An object that reflects light and a sensor , This is our eyes .

When the light leaves , The sun and it are the slightest in the whole spectrum , So it's basically white , But then the light shot into the sky , The sky scatters light in different ways . Based on the spectral region it processes , So the red wavelength light is less scattered , Light at blue wavelengths is more scattered , So the light is scattered to other places in the sky , Make the sky blue , This makes the sun look yellow , Because the light is always there . The yellow sun shines on the trees 、 On grass or any other biota . Some wavelengths of light are absorbed by chlorophyll molecules , And become a thermal compound , Provide nutrition for trees . So chlorophyll absorbs light mainly in the blue area .

So we can simulate this process , For example, this camera , The vacuum camera has a very small aperture , Reflecting light from objects , under these circumstances , This little blue rabbit , Through a focus , It is projected onto an image plane , Then in modern times CCD Array camera .

Another thing we want to do is create a sense of perspective , Make distant things seem small , Something close seems big . In computer graphics , We do this by dealing with the primitives themselves . For example, the perspective scene of the teapot on the table in the following figure , It doesn't seem to be a problem , But if we look at it from the side , In fact, there are more front tables , The table in the back is smaller , So when it is projected onto a two-dimensional image plane , Get the correct scale of perspective rendering .

Realism

Realism will provide some visual cues , To tell our visual nervous system , To see a 2D When it comes to images , Let's imagine a 3D Scene . These techniques are ： Occlusion . The shelter here makes you feel that the little boy's hand is outside the picture frame , It's stimulating your perception system and making you feel like a little boy crawling out of the picture frame , Instead of an image of a two-dimensional plane ; Other techniques include perspective , For example, the water wave in the picture , The closer it is to the horizon, the farther it cuts , The more closely the ripples on the picture are arranged ; Other techniques include illumination and so on .

One of the most effective methods is occlusion , Add some optical illusions to it , It's going to be very interesting .

In the process of data visualization , We can combine the two techniques .

for instance

We use the trajectory generated by particle motion to simulate the blood flow of aorta . Here we simulate the effect of occlusion in , You can make some tracks appear in front of others . You can see that the green track is in front of the blue track ; In addition, light is used , You can see that these trajectories are cylindrical , They have bright and dark sides , Because when light hits them, it also scatters ; At the same time, we can also see the perspective method , The object in front is relatively large , The objects behind are relatively compact and small , So the superposition of these techniques makes the viewer feel better .