The meaning behind the data is effectively communicated to the observer through visual perception. We will learn how computers display information using computer graphics and how humans perceive that information visually. We will also examine the forms of data, both quantitative and non-quantitative, and how they are properly mapped to visual elements to be perceived well by the observer.

1. Visual overview

Visualization patterns, in general, 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 might join in, but it’s basically a user in front of the computer. And plot the data to try to understand what it means. You have full control over the data, and you can change the data set and how it is displayed dynamically to help you understand what the consumer is viewing.

2. Presentation visualization

This kind of visualization is what you see in a video or slide show. Its purpose is to certain aspects of the data message to a large audience, visual rendering and interactive visual difference: visual rendering type does not support user input, you can sit there watch but cannot interact with data, you can get the data has been packaged well, can help you to understand but cannot interact.

3. Interactive storytelling

They are presentation visualizations, presented in the form of interactive web pages that allow the user to interact with the data in limited ways. The viewer cannot modify the data set, but can further investigate the data. More information can be presented at once, just like a presentation visualization.

Graphics, drawing and realism

2 d graphics

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

Vector graphics

A graph used for drawing, describing shapes. For example, take a pen and draw a straight line.

Raster graphics

Use a pixel table to display shapes. Cell phone screens, for example, are linear arrays of pixels that are specified colors. By specifying certain colors for certain pixels, different shapes can be represented. rasterize

You’re going to describe a point, starting and ending lines and points, and you’re going to get a straight line, or a smooth curve between them, and these are going to be converted into raster graphics display, and it’s going to be made up of illuminated pixels that make up the path to show the path that you’re describing with vector graphics.

When we draw primitives in two dimensions, when we want to draw shapes in two dimensions, for example for drawing triangle functions, we need a coordinate system and then draw those shapes so that we know where to place vertices.

SVG example

You can visit Wthreeschools.com for a tutorial on scalable Vector Graphics (SVG).

2 d drawing

The scalable vector graphics specification is a method for describing two-dimensional graphics of various systems. One of the systems it uses is HTML, so you can embed 2d graphics by placing an SVG tag in the HTML code of a web page.

Its width and height are usually measured in pixels. When SVG is used for web pages, it is used to describe document systems. We tend to read from left to right, top to bottom, and set the coordinate system appropriately.

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

3 d graphics

To understand how three-dimensional computer graphics work, you must first understand how light leaves shadow, reflects off an object, and then reaches your eye so it can be perceived.

In real life, we have a light source, an object that reflects light, and a sensor called our eyes.

When the light leaves, the sun and it’s the lightest in the whole spectrum, so it’s basically white, but then that light hits the sky, and the sky scatters the light in a different way. And based on the region of the spectrum that it’s dealing with, so red wavelengths of light will be scattered less, blue wavelengths of light will be scattered more, so the light is scattered to other locations in the sky, making the sky blue, which makes the sun look yellow, because the light is always hitting there. Yellow sunlight shines on trees, grass, or any other biome. Certain wavelengths of light are absorbed by chlorophyll molecules and turned into thermal compounds that provide nutrients for the tree. So chlorophyll absorbs light primarily in the blue regions.So we can simulate this process, for example, in this camera, the vacuum camera has a very small aperture, is reflecting light from the object, in this case, this little blue rabbit, goes through a focal point, it’s projected onto an image plane, and then on a modern CCD array camera.

The other thing we wanted to do was create a sense of perspective that makes things that are far away seem small and things that are close seem big. In computer graphics, we do this by manipulating the primitives themselves. For example, the perspective scene of the teapot on the table in the image below looks fine, but if we look at it from the side, there are actually more tables on the front and smaller tables on the back, so when it is projected onto the two-dimensional image plane, it gets the correct scale for the perspective rendering.

realism

Realism provides visual cues that tell our visual nervous system to imagine a 3D scene when presented with a 2D image. These techniques are: occlusion. The occlusion here gives you the impression that the boy’s hand is on the outside of the frame, and that’s what activates your sensory system to make you think that this is a little boy crawling out of the frame, rather than a two-dimensional image; Other techniques include perspective, such as the closer the water waves are to the horizon, the closer the ripples are arranged. Other techniques, such as lighting.One of the most effective techniques is occlusion, which can be very interesting if you add some optical illusion to it.

In data visualization, we can combine the two approaches.

For example, 🌰

We modeled blood flow in the aorta using the trajectory of the particles as they moved. The occlusion effect in this simulation allows some tracks to appear in front of others. You can see the green track in front of the blue track; And then there’s lighting, and you can see that these tracks are cylindrical, and they have light and dark sides, because light scatters when it hits them; At the same time, we can also see the perspective technique, the object in front is larger, while the object behind is compact and smaller, so the superposition of these techniques makes the viewer have a better sense.