Visual frame Design-visual channel

Visual Channel

• Introduction to Visual channels
• How data is mapped to the visual channel
• Design of G2 Visual channel
• More

Introduction to Visual channels

The core content of data visualization is visual coding, which is the technique of mapping data information into visual elements. Visual coding consists of two parts: a geometric marker (graphic element) and a visual channel.

• Geometric markers: The markers in the visualization are usually some geometry elements, such as: Point, line, polygon, body

• Visual channel: Used to control the presentation of geometric marks, including the location, size, shape, orientation, hue, saturation, brightness, etc. of the marker

Types of visual channels

There are two basic perceptual patterns for human recognition of visual channels. The information obtained from the first perceptual pattern is about the characteristics and location of the object itself, and the qualitative and categorical properties of the visual channel. The second perceptual pattern is the size of an object in numerical value, which corresponds to the quantitative or sequential nature of the visual channel. So we divide the visual channel into two main categories:

• Qualitative (categorical) visual channels, such as shapes, color tones, spatial positions
• A quantitative (continuous, orderly) visual channel, such as the length of a line, the area of an area, the volume of space, the slope, the angle, the saturation and brightness of a color, etc.

However, the two classifications are not absolute, such as positional information, which can differentiate between different classifications and distinguish the continuous data.

The expressive force of the visual channel

We need to consider the expressiveness and effectiveness of different visual channels in the visual coding, which are mainly reflected in the following aspects:

• accuracy, the ability to accurately visualize the changes between data
• Recognizable, the same visual channel can encode the number of categories, you can identify the maximum number of categories
• Separable, coded objects of different visual channels are placed together for easy resolution
• Visually prominent, important information, whether encoded with a more prominent visual channel

The expressive force of the visual channel:

Mapping of data and visual channels

The process of visualizing coding can be understood as the process of establishing correspondence between the fields of the data and the visual channels, and their mapping relationships are as follows:
* One data field corresponds to a visual channel (1:1)
* One data field corresponds to multiple visual channels (1:N)
* Multiple data fields correspond to one visual channel (N:1)

Let's look at the following example:

• Number of students in the class

This diagram has the following 1:1 mapping relationships:

• X-Axis: class names are mapped to locations as categorical data视觉通道
• Y-Axis: The number of students is a continuous data, mapped to the rectangle's长度

chart.interval().position(‘班级*人数‘);

• Different colors in different classes

This diagram has the following mapping relationships:

• X-Axis: class names are mapped as categorical data to位置
• Y-Axis: The number of students is a continuous data, mapped to the rectangle's长度
• At the same time, in order to distinguish different classes, the class is also mapped to颜色

So the class mapping exists two visual channel 1:N.

chart.interval().position(‘班级*人数‘).color(‘班级‘);

• The number and class together determine the color

The color is determined by the class and the number of students, the rules are as follows:

• If the class equals ' 1 ' or the number is greater than 40, the map is red.
• Others are mapped into green

The number of classes and students together determines the color mapping, so this mapping is N:1

chart.interval().position(‘班级*人数‘).color(‘班级*人数‘,function(grade,count){ if (grade == ‘1‘ || count > 40) { return ‘red‘; } else { return ‘green‘; }});

Visual channel design for G2 Vision Channel

In G2 we did not implement all of the visual channels mentioned above, but the following:

• Position (position), in a two-dimensional coordinate system can be mapped to x, Y, three-dimensional coordinate system can be mapped to x, Y, Z
• Color, which contains hue, saturation, and brightness
• Size (size), different geometries vary in definition
• Shape (shape), Geometry shapes determine how a chart type behaves. For example, a dot chart can be represented by dots, triangles, and small pictures, which can be expressed using polylines, curves, and lines
• Opacity (transparency), the transparency of the graph, this property can be used in a sense to replace the color, need to use the form of ' Rgba ', so in G2 we separate out.

Grammar design

The visual channel in G2 exists as a tagged attribute and needs to support the following features:

• Supports 1:1,1:n,n:1 mapping of multiple data and visual channels
• Different markers determine the resolution of the visual channel of the graph varies

The class structure is as follows:

So the visual channel is defined in the syntax of G2:

Chart.<geom><attr> (Dims,[callback])

• Geom, geometric markers, described in the following chapters
• attr, geometric marker properties, corresponding to the visual channel
• dims, fields that participate in a single visual channel mapping
• Callback, how to parse the visual channel, can not be provided, G2 provides the default visual channel parsing mode

In addition to attr (Dims,callback) function prototype, G2 for the convenience of the user, combined with the characteristics of the various visual channels, but also provides a more convenient way to use, in the later section of this chapter is described in detail.

Example:

chart.point().position(‘a*b‘).color(‘c‘);chart.interval().position(‘a*b‘).color(‘c‘,function(c){ if(c) { return ‘red‘ } return ‘green‘;});

Position

Location is the only data attribute that can be used for both encoding and sequencing or quantitative coding. In the two-dimensional plane there are two visual channels which can be separated vertically and horizontally. So the Position property supports the user input method:

• Postion (' Dim '), using only one dimension of the horizontal direction (x-axis) of the visual channel, at this time, the vertical direction of the visual channel has no data meaning.
• Postion (' dim1*dim2 '), simultaneous use of horizontal and vertical 2 visual channels

One-dimensional point graph

Two-dimensional point graph

Color

From the visual coding angle of the color analysis, you can divide the color into brightness, saturation and hue three visual channels, of which the first 2 can be considered as quantitative and sequential visual channels, and hue belongs to the qualitative visual channel. We do not differentiate these 3 visual channels in G2, so we think that color is both a classification and a quantitative visual channel. So the color method has more shortcuts:

• Color (' C '), using the default callback function, to read the colors in an array for color mapping
• Color (' C ', colors), which specifies the color type of the map, which is typically mapped to categorical data
• Color (' C ', ' Color1-color2-colorn '), specifies the gradient path of the color, which maps the quantitative (continuous) data in this gradient path
• Color (' red ') directly specifies a constant without a data map

Color mapping for categorical data:

Color mapping for quantitative (continuous) data:

Size

From a visual perspective, size is a complex visual channel that does not exactly match the meaning of different tags:

• For points, size corresponds to the radius of the point
• For lines, size corresponds to the thickness of the line
• For a histogram, size is the width of the bar chart.

Shortcut to Size:

• Size (Dim) Specifies the field that maps to size, built-in maximum and minimum (pixel size)
• Size (dim,max,min), which specifies that the maximum pixel and minimum pixels are available outside the size field
• Size (10) directly specifies the pixel size

More explanations of size can look at the resolution of size in each geometry tag in the later chapters

Point Chart Size:

Size of Bar chart:

Shape

Different geometric markers have different shape (shapes), which are described in detail in their respective chapters. The visual channel of shape is influenced by several other visual channels, such as shape, which can map color to a fill color or to a border. The shape method is relatively simple to use and is commonly used to map categorical data:

• Shape (' dim ') to map the specified field to the built-in shapes array
• Shape (' dim ', Shapes), the user provides the shapes data for data mapping
• Shape (' Dim ', Callback), using the callback function to get shape
• Shape (' circle '), specifying constants, mapping to fixed shape

The shape of the point graph:

Shape of the bar chart:

Opacity

Transparency in the visual coding process, only quantitative (continuous) data mapping, as a complementary use of color, so provide the following shortcuts:

• Opacity (' Dim ') specifies the field of the transparency map
• Opacity (0.5) specifying transparency constants directly
• Opacity (' Dim ', callback) use callback function for transparency

More

This chapter introduces the visual channel and the design of the visual channel in the G2, the different visual channels are implemented differently in various geometrical tags, in the later chapters there will be more detailed introduction, the next chapter, we introduce the coordinate system, and explore the different visual channels in different coordinate system performance.

G2 site: http://g2.alipay.com

Visual frame Design-visual channel