# When the data is presented graphically, everything you need to know about data visualization (Part 2) 11 min

## 1. Visual variables

According to Jacques Bertin, the visual variables of each person have a different amplitude. Variables, when studied over a long period of time, will provide methods for understanding how the human brain processes and navigates visual information. The original set of retinal variables consisted of seven variables: position, size, shape, value, color, orientation, and texture.

According to Bertin – The charts below are examples of visual variables that show qualitative or quantitative differences. A visual representation of properties through points, lines or areas.

A 1984 study of William Cleveland and Robert McGill ranked the most common shapes that the human brain easily discerns the differences between. They arranged visual visual features in the following order:

#### a. Popular vertical layout

It is the most universal reference system, consisting of the most easily identifiable and appreciable features associated with spatial elements.

Examples: Column chart, scatter chart

#### b. Vertical position is not hierarchical

It’s easy to compare individual ratios that are repeated with the same value even if they are not aligned. Panel charts, or high-level “Small multiples” are a great example of this type of chart. They are a grid of charts that have the same visual format but display different data sets. Compared to a single, larger chart, this type of chart can overcome data overload, data can be obscured or blocked because of too thick ink.

Examples: Small multiples (also known as Rellis, Lattice, Grid, and Panel charts)

#### c. Length

Length can effectively represent quantitative information because the length of an element can be scaled into the data value they represent. The human brain easily recognizes proportions and judges length, even when the objects are out of alignment.

Example: Column chart

#### d. Direction

The direction is easily recognized by the human eye. It can be used in line and trend charts, for example, to present data that changes over time.

Example: Trend charts (trend charts)

#### e. Corner

The corners provide a sense of proportion when compared. However, studies show that angles are more difficult to evaluate than length or position. However, a pie chart on three sections is just as effective as a stacked column chart.

Example: Pie chart

#### f. Area

The relative size of the areas is more difficult to compare than the lengths of the lines. However, the directional factor requires more effort to process and interpret.

Example: Bubble chart

#### g. Mass

Mass refers to the use of 3D objects in a two-dimensional space, making them significantly harder to evaluate. However, studies show that 3D objects can give a more accurate feel when comparing two shapes in the same direction.

Example: 3D column chart

#### H. Color saturation

Color saturation is related to the intensity of a color. As per our intuition, increasing color intensity means that numbers are increasing. However, it is difficult to evaluate exact results.

Example: Heatmap

Understanding rankings of visual variables is essential to creating compelling data visualizations. However, that doesn’t mean the designers need to limit themselves to the bar and scatter charts. Follow Cleveland and McGill:“The sort order doesn’t lead to a precise rule, rather a framework for working.”

## 5. Color

“Color saturation and gloss have lower precision when it comes to visual perception of patterns and behavior”, follow William Cleveland. However, color can be a powerful tool for data visualization designers to convey meaning and clarity when displaying data. It’s important for designers to understand how color works and the pros and cons of color.

#### a. Color in the background

Our perception of colors depends on the context, and the contrast of colors with surrounding objects.

Another great example is the experiment of Akiyoshi Kitaoka, professor in the Department of Psychology at Ritsumeikan University in Japan, he slipped a piece of gray paper on a black to white gradient strip. The paper seemed to change color as it moved back and forth. In every moment, we perceive different colors as different shades of gray that surround it. Watch the video below:

In the writing Practical rules for using colors in a chart, Stephen Few Draw some practical rules from these observations:

• If you want different objects with the same color in a table or chart to look the same, make sure that the background color that surrounds them is consistent.
• If you want the objects in the table or chart to be easy to see, use a background color that is contrasting enough with the object.

#### b. Use colors to tell the story

Color is not only decorative, but it also helps you to achieve strategies. Color helps the product tell a story and communicate the data set’s goals, making it easier to communicate with words.

Contrast colors should only be applied to significant differences in the data in order to reduce perceived load. Color can also emphasize key elements of visualization.

However, the lack of color doesn’t make a good histogram ineffective. In the early stages of an idea we should use gray, and once you’ve identified the key points, apply color to emphasize those parts.

#### c. Define the color scheme

Each color applied by a data visualization designer can completely change the meaning of the data. Many tools can help choose a palette that makes sense, depending on the nature of the data. Here are two typical recommendations:

• ColorBrewer. The palette is divided into three categories:

• Categorize (used to separate items into separate groups)
• Sequential (used to encode quantitative differences)
• Divergence
• Viz Palette. The Viz Palette cares about accessibility, design for colorblind patients and evenly spaced shades, including a “color report” that identifies shades that may look the same in different situations. .

#### d. Apply Gestalt principles to data visualization

The Gestalt principles of cognition can help clarify the way the brain is organized based on common traits when we try to understand the meaning of visual information. Gestalt theory is based on the idea that the human brain will try to simplify and organize complex images or designs by unconsciously arranging the parts into an organized system, creating a sum. rather than a host of distinct factors.

Similarity

This principle says that our mind automatically groups elements with similar image attributes. Similar colors, similar shapes, similar sizes and orientations are considered to be a group. This principle is illustrated in the charts below.

Contrary to the chart on the left with columns of different colors, the one on the right of them with the same blue color is better suited because the chart has only one variable (Cost / Revenue). Having columns of the same color makes it easier to understand the data and eliminates the cognitive stress when the brain tries to distinguish different colors.

Proximity principle

Closeness is more effective than synchronization because the human eye perceives the elements to be related based on how close they are to each other.

In the chart below, the goal is to compare sales of the three countries. While it is easy to compare sales by country due to the proximity of the chart, it is difficult to analyze sales by country.

The chart below conveys it more clearly. In this case, information is preferred to focus on the visualization goal, as it helps to bring the main data points closer together.

Enclosure principle

The Domain Principles, introduced by Palmer in 1992, demonstrating the tendency of closure of elements with a clear boundary is considered a group if they share the same common area.

In the example below, the three columns in the shaded area appear to be a group. This technique helps the viewer focus on a group of objects in the chart.

## Conclusion

Understanding the key elements of human perception and cognitive processes is an essential part of designing great data visualizations. When working on products that need data visualization, be it a B2B dashboard or a finance app, Google designers have noticed the human brain’s visual perception process. and basic data visualization design principles.

Familiarity with visual principles can be a great boon for designers and help them understand how the brain transforms complex images into models. Keeping these principles in mind can easily achieve a clearer visual hierarchy, resulting in more efficient data visualizations, and design of charts.

In addition, Pre-attentive processing and visual variables, as well as the application of color, will also help designers to create more efficient data visualizations.

Editor: Thao Lee
Follow: toptal

• When data is represented graphically, everything you need to know about data visualization (Part 1)
• Why should designers work with real data instead of instinct?
• When user responses don’t match research data and how Spotify optimizes user experience