24 Visual encoding Principles

T. Raghuveera

 

In the previous module, we looked at the various types of data in Data visualization and how these types of data are used in various aspects. We also looked about the principles of Visualization. The visual encoding is the way in which data is mapped into visual structures, upon which we build the images on a screen. We will look into the objectives and what visual encoding is all about. It is then followed by the types of visual encoding, its attributes involved, data types and their mapping, the examples of such attributes, their effectiveness and expressiveness, accuracy of the model retrieved.

 

Learning objectives:

  1. To Introduce the types of visual encoding
  2. To Learn the visual encoding variables.
  3. To Learn about marks and attributes.
  4. To know about the expressiveness and effectiveness of the visual

 

24.1 Visual encoding:

 

“Sameness of a visual element implies sameness of what the visual element represents” is a saying about visual encoding. Visual encoding is the process of encoding images and visual sensory information. This means that people can convert the new information that they have stored into mental pictures. It is usually analyzed as combination of marks and channels showing abstract data dimensions. The visual encoding is the way in which data is mapped into visual structures, upon which we build the images on a screen. The amygdala is a complex structure that has an important role in visual encoding. Amygdala is a part of the brain which understands the visual encoding patterns. It accepts visual input in addition to input from other systems and encodes the positive or negative values of conditioned stimuli.

 

24.2 Inputs for visual encoding:

 

The input for visual encoding can be of two models.

 

  1. Mathematical model.
  2. Conceptual model

Mathematical model includes the raw data and the operations over the data, whereas the conceptual model includes the semantics and their domain knowledge.

With the input from either of the models, certain relevant tasks are performed to deliver the output images using the visual encoding patterns that exists as shown in figure 1.

 

24.3 Types of visual encoding:

 

The visual encoding is broadly classified into

 

1. Retinal

2.Planar

 

24.3.1 Retinal:

 

Human beings are very sensitive to these kinds of retinal variables. Some of the retinal variables are colours, shapes, size and other kind of properties. Human beings can easily differentiate between these kinds of retinal variables.

 

24.3.2 Planar:

 

Planar variables are another kind which can be applied to all types of data that are available.

 

24.4 Mapping of data types to encoding:

 

Quantitative, ordinal and nominal are some of the types of data that we normally come across.

 

24.4.1 Quantitative: These are the data types that represent the quantity of certain data. Some attributes of this type includes position, length, volume, area etc.,

 

24.4.2 Ordinal: These are the data types that holds data of some order. For example, days of the week, which holds the order in which they should be represented.

 

24.4.3 Nominal: In this kind of data types, the data is represented in the form of the names and categories.

 

24.5 Visual encoding principles / variables:

 

Bertin has put forth the visual variables based on position, size, shape, value, colour, orientation, texture as shown in figure 2.

 

 

24.5.1 Position: Generally graphs maps across the X- and Y-axis. They work great to present any quantitative data. It deals with the flat screens and just two planar variables.

 

24.5.2 Size: In general, the size indicates greater quantity or importance. In terms of quantity, area carries the value message. For example, let us consider a square with 2cm sides which indicates 4 times as much “stuff” as a square with 1cm sides. E.g. Figure 3 shows Ayville has a greater population (roughly 4 times greater) than Beeton. The bigger the square size, the larger is the quantity.

 

24.5.3 Orientation

 

Orientation typically indicates relative orientation, direction of flow or movement. From the given example, it is clearly seen that Ayville is perpendicular to Beeton. Thus, the direction of both the places are observed as shown in figure 4.

24.5.4 Color

 

Color is often modeled as three components – HSV model. Hue indicates the redness or greenness of the color that it represents. Many hues have particular associations. Saturation or Chroma, describes about the color purity. Saturation is often used in combination with value, but may also be used independently to control the prominence of symbols. Value gives the color intensity as lightness or darkness. Value is often used like size to indicate quantity or importance. Other color models also exist, e.g. RGB (display devices), CMYK (cyan, magenta, yellow, black – used in printing). This model is set by a standard CIE (international standard based on physics). The variation in colour is shown in Figure 5.

 

 

Figure 5: Colour variation

 

For example, the Figure 6 shows the existence of lakes and island in a particular region with the help of colour component. The blue and green colour denotes the lakes and islands respectively.

 

24.5.5 Shape

 

Shape may be used simply to distinguish between different symbols. The symbols can be either abstract symbol or mimetic symbols. Figure 7.1 and 7.2 are the examples of abstract and mimetic symbols respectively. The mimetic symbol is also termed to be iconical. An icon is a small picture that provides a metaphor for particular idea or process.

 

 

24.6 Pattern

 

Pattern is comprised of texture, focus.

 

24.6.1 Texture: Figure 8 represents the density of symbols. For example, they are used to communicate between the relative concentrations.

 

 

24.6.2 Focus: Figure 9 represents the crispness of symbols. For example, they are used to communicate between relative certainties.

 

 

Figure 9 : Crispness of symbols

Patterns: Figure 10 shows the arrangement of symbols, for example, whether ordered or random

 

Example

 

In this given example, Figure: 11 shows the visual encoding variable such as color, size, and positions represents each of the different attributes.

 

Color: It represents and distinguishes the continents in the given figure.

Size: It represents the medals count of each of the continent in the given figure.

X and Y: It represents the world map and their mapping with each of the continent.

 

 

 

24.7 Marks

 

Mark is a basic graphical element or a geometric primitive. It can be represented as point, line (1D), area (2D), volume (3D). Figure: 12 shows the various representation of mark.

 

 

Figure 12: Various representation of Mark

 

Using marks and attributes

 

 

 

This example provides the usage of marks and attributes. Figure: 13(a) represents the relationship between the mark and the length attribute, which shows the variation in the length. Figure: 13(b) represents mark and position attribute for describing the position of an object. Figure: 13(c) represents the mark and color attribute, which describes the color of an object. Figure: 13(d) represents the mark and the size attribute, that deals with the size of an object.

 

24.8 Channels: Channel is used to control the appearance of a mark. Position, size, shape, orientation and hue, saturation and lightness are used in the controlling of the mark appearance. There are three size channels, one for each added dimension: length is 1D size, area is 2D size, and volume is 3D size. The motion oriented channels includes the motion patterns. The channel are broadly classified into two types namely

1.  Magnitude channel – Magnitude channels shows variation in the attribute. Figure: 14  shows the magnitude channels with ordered attribute.

2.  Identity channels – They represent the categorical attributes. Figure: 15 shows the identity channels with categorical attributes.

 

 

24.9 Marks and channels

 

All the channels are not equal. The same data attribute encoded within two different visual channels will result in different information content in our heads after it has passed through the cognitive and perceptual processing pathways of human visual system. The use of marks and channels in design should be guided by principles of effectiveness and expressiveness.

 

24.10 Mark types

In the representation of Tables, the mark type is always a point. In the representation of Network, the mark type is a combination of node and link. The two link mark types are:

 

1.  Connection: Describes the pair wise relationship between two nodes/items using a line.

2. Containment: Describes the hierarchical relationships using areas and to do so connection marks can be nested within each others at the multiple levels.

 

24.11 Expressiveness

 

Expressiveness principle tells that the visual encoding should express all of, and only, the information in the dataset attributes. Lie factor is one parameter used to evaluate the expressiveness of the visual. Lie factor is one which tells that it is not possible to retrieve the exact true nature of the picture. The most fundamental expressiveness of this principle is that ordered data should be shown in a way that our perceptual system intrinsically senses as ordered. Visual Representation encodes all the facts.

 

 

24.12 Effectiveness

 

Effectiveness principle tells the importance of the attribute should match the salience of the channel. That is, its notice ability. In the other words, the most important attributes should be encoded with the most effective channels in order to be most noticeable, and then decreasingly important attributes can be matched with less effective channels.

 

24.12.1 Uses of Effectiveness

 

Effectiveness is used to show accuracy, Discriminality and Separability which are shown clearly in the following figures. Figure 17 shows the plot between Perceptual judgement vs. stimulus, which shows the Weber’s law: S = In where S is the perceived sensation and I is the physical intensity. This shows the accuracy of values.

 

 

 

Figure 19 shows separable vs. integral channels. Using position it is possible to separate them. Also using different colors, hue and saturation it is possible to separate the values.

 

24.13 The Elements of Visual Encoding Attribute

 

24.13.1 Space

 

Space is the negative or positive area that an object or objects occupy in an area. Using simple principles we can control the relative position of every element. For example White space is used to control location of each and every element. Overlapping elements are used to control the position and values are used to control the relative positions.

 

Examples of Space Usage

 

White Space Tips

 

While using do not trap white space and do not trap white space between two design elements. This interrupts the flow of the design. To avoid this, we can Increase font size, graphic size, or reposition the elements.

 

Keep Text Cells Small

 

Don’t have text, stretch across the entire length of the design.

 

Avoid Rivers

 

Rivers appear if type is justified. A river is word space that appear near each other on subsequent lines of text. Edit the text instead of changing the word spacing. Rivers may also be a symptom that line length is too long or short.

 

White Space

 

GOOD: Figure: 22 which is the Tennis Group business card which makes good use of white space.

 

 

Figure: 22 Example of good use of white space

 

BAD: Figure: 23 shows that the Card is too busy and has trapped white space between the information on the left and the logo. Your eye doesn’t really know where to look first.

 

24.13.2 Size

 

Size specifies how big or small objects are in relation to the space they occupy. The primary role size plays in design are given below:

 

• Function – For example, the age of the audience – older people would need type set larger to aid help in reading.

• Attractiveness is to add interest by cropping or scaling the elements.

• Organization makes the important element the largest and the least important the smallest.

 

 

24.13.3 Texture

 

Texture is the look or feel of any object or surface. The appearance is either visual (illusionary) or tactile (physical to touch). Patterns are good examples of visual texture. Figure: 25 shows the various examples of texture.

 

24.14 Summary

 

Here we have looked into the different visual encoding principles and visual encoding variables like marks and attributes. We have also learnt the two visual evaluation parameters namely the Expressiveness and Effectiveness in this module.

 

 

References:

  1. Visualization Analysis and Design by Tamara Munzner.
  2. Information visualization – Design for interaction by Robert Spence.