Visualizing Data for Impact: Visual Design Theory

Effective visual design for data visualization guides the viewer through a visualization using visual cues and creates clarity by reducing visual clutter.

We can think of data visualization as a method for translating data into an interpretable format for an audience. We tell a data story by deciding which specific patterns or takeaways to highlight from the data through visual cues.

Some core elements of visual design for presenting data visualizations are lines, shapes, color palette, and typography.

Lines and shapes create structure, delineate different data points, and guide the viewer’s eye.

Color palettes encode meaning, evoke emotions, and enhance aesthetics.

Typography, including font choice, size, and hierarchy, ensures readability and emphasizes key information.

Position refers to the placement of elements in the frame, and includes balance, order, alignment, and white space. Position impacts how information is read and understood and contributes to visual hierarchy.

Visual balance broadly refers to working toward a balanced composition. We can strike visual balance by avoiding huge blocks of empty space.

Position also includes alignment – how are our elements aligned, and what do we want that to convey?

Proper use of white space helps direct the viewer’s gaze to the most important data points and insights.

The size of elements in a data visualization plays a crucial role in how information is perceived.

Larger elements are easier to see and tend to be viewed as more important, while smaller elements may be considered less significant.

Strategic variation in size creates a visual hierarchy, emphasizing key insights and guiding the viewer’s attention.

Contrast refers to the use of visually different elements to draw viewers’ attention and make specific items stand out. Contrast determines the first thing that our audience will look at, and draws the eye to the visible difference in design elements.

By increasing the contrast between key elements and the background, designers can make important data points and insights more obvious to viewers. Reducing contrast can make less critical elements fade into the background.

We often think of contrast in relation to color, but contrast can also be applied to other elements of visual design, like texture, shape, size, and placement.

Effective grouping of data simplifies complex data sets and guides the viewer’s attention to important patterns and insights.

Data can be grouped mathematically (e.g. by value ranges) or categorically (e.g. by type or class) during analysis. The way we group data visually is often central to the meaning the viewer takes away from the visualization. The objects that we draw associations between visually, whether by color, size, proximity, or other elements, will help viewers understand the visualization.

Text is a helpful tool for creating clear, readable data visualizations. Legends and labels help viewers understand our visualization and what different elements represent.

Legends provide a key to the visual encoding used in the visualization, such as the meaning of different colors, shapes, or sizes. They consist of a series of item markers and labels, sometimes with a title, that help viewers understand what different parts of a chart represent.

Labels are used to mark axes, data points, and other parts of a data visualization. While legends are separate from the visualization elements, labels are used to place information directly adjacent to elements to describe their meaning.

To maximize clarity, legends and labels should be placed close to the relevant data points whenever possible.

Annotations are informative or descriptive text labels that can help viewers interpret information in a visualization.

Annotations might also be used to share important context related to the story we’re trying to tell with our data, even if it doesn’t correspond to a visual anomaly. They might also be used to highlight a specific point related to the story we want to tell. We should limit our use of annotations to avoid overloading viewers.

When working with color for data visualization, as with all visual design elements, we should be intentional and prioritize choosing colors that best convey the information.

Sequential scales arrange colors in a sequence – often, this is the same hue with more and more white added to or taken away from the color.

Divergent scales are anchored by colors from opposite sides of the color wheel, also known as complementary colors. A divergent scale is used to visualize data where the middle is a baseline, and either side represents a contrasting change.

Categorical scales use a variety of colors to differentiate categories without assigning a rank or order to them.

To ensure accessibility for colorblind individuals, designers should vary color saturation and value, use textures, and include clear labels. Accessibility standards also require sufficient contrast for text which can guide our color choices.

Artificial intelligence tools, such as large language models (LLM) and generative AI models, may not be ready to be the creative director of any visual design process, but they can be a helpful assistant to anyone trying to save time as they work through the visual design process for a data visualization.

Working well with AI requires writing good prompts that AI tools will understand (also known as prompt engineering), knowing how to assess results to make sure they are accurate and follow design best practices, and being ready to make manual corrections.

When writing prompts for generative AI, we should start simple and break down tasks into precise, specific subtasks.