3/4/2013

Color Theory and Mapping

 

Originally published by Miranda Mulliganexecutive director of Northwestern University Knight Lab, and formerly design director for digital at the Boston Globe, on Source under a Creative Commons Attribution 3.0 licence.

vis.png

Of all the forms of non-verbal communication, the most instantaneous method of conveying messages and meaning through visual cues is color.

In our design work, we use white space, typography and color theory to create and support the information architecture of a composition or a story. Information layering—organizing large amounts of data into short, digestible chunks—is a method for providing multiple points of entry into a story package, presentation, or layout. Color not only helps highlight or reinforce the information architecture of a layout, it can also set a mood, evoke an era or time period, or induce an emotional response to the information often unique to any given individual.

At every level of communication, color is a powerful force and often stimulates the other senses to symbolize abstract concepts and thoughts, recalls another time or place, and produces an aesthetic or emotional response. Reaction to color is subliminal and most people are somewhat unaware of the pervasive and persuasive effects of color.

Just as there are individual color preferences and responses, there also are strong associations with each of the basic colors that are shared by almost everyone. For example, typically we like blue because it reminds us of blue skies and deep blue oceans, thus we associate a feeling of serenity and openness with blue. Green and brown are associated with nature, purple/violet is often used to indicate royalty and wealth, white symbolizes freshness, purity and cleanliness while black is often thought of as authoritative. Gray is more often than not associated with elegance.

Therefore, your color palette choices can dramatically affect the story and the reader’s experience when consuming a story package. No single element in visual presentation is more influential on readers’ understanding of information than color. It gets attention, sets a mood, and sends a message. Choosing the perfect color palette to express journalistic information is part art, part science. Effective visual communication is a learned practice, or set of skills—which includes color—acquired over time with effort and practice.

Map-Based Storytelling

Let’s start with thinking color theory and how it affects map-based storytelling.

Sometimes a visual story needs illustrations, charts, graphs, maps, or diagrams. We like maps. We like to map things…errr, data. When a story is completely based on the geography, there’s nothing more effective than a map. Maps are also a terrific way to let readers focus on information about specific places. Maps are used in a wide variety of contexts, such as forecasting the weather, locating an event, or geographically plotting statistical information. For presenting key facts in a geographical context, maps allow a quick description, overview, and explanation of complex concepts.

You may have already guessed, there’s also a parallel issue, the question of whether a map is the most effective way to represent the story of a dataset in the first place. We’ll talk about this issue in a future case study. You can also check out Matt Ericson’s “When Maps Shouldn’t Be Maps.”

Whether or not you determine the story of a dataset is best told through a map, in order to tell a complete story and communicate information clearly and accurately, you have to understand your data. The more you know about your data, the better story you can tell with it. In the following scenario, let’s assume you’ve interrogated the data and determined that the complex set of information you have will be easiest for readers to understand with an awareness of physical location to each data point. In other words, you have determined that a map of the dataset will deepen the user’s understanding of the story in the data.

Maps are the most common way to visually represent large amounts of data, and the most effective way when the geographic data is intrinsic to the story. Learning the interpretive and ethical issues involved in using a map to convey a message, or story, about a dataset is the starting point with any newsroom map—and these things are crucial to producing good news. Color plays a significant role in the user experience, or reader comprehension, so its effects are among of the first things you need to think about as a developer.

Color and Info Layering

In our scenario, we are mapping census data to show how similar geographic areas compare to each other in terms of population, income, race, or education level.

Before you start writing any code, you’ve got design issues that matter not just to aesthetics, but to the reader’s comprehension of the presentation. So how do you choose color? What colors are the “right ones”? The key is that color is relational. In any composition or layout, a single color does not exist in a vacuum, but is always comprehended in relation to the other colors present.

Screen_shot_2013-04-03_at_1.10.56_PM.png
Three maps with standard color palettes.

For discussion, let’s look at a few relatively standard color palettes choices for mapping large datasets.

Each of the maps shown above—the Boston Globe’s 115 Places to See in New England (left), the Washington Post’s Where the Nation’s Highest Earners Live (center) and the New York Times’ Where Were You on Sept. 11, 2001? (right)—are utilizing secondary color palettes that are muted, which allows the more salient and pertinent data to be highlighted with brighter, contrasting colors. It is important to remember that when designing data-driven presentations, you should pay close attention to detail, carefully avoiding the potential for confusion. Therefore, most of the time, the color palette should be simple and type/font choices legible. All aesthetic choices should reinforce the newsworthiness of the data, not distract from it.

Now, let’s look at two similar(ish) data sets mapped in two dramatically different ways, utilizing significantly different color palettes. Below, the New York Times’ Mapping America: Every City, Every Block: Distribution of Racial and Ethnic Groups map cropped to show Chicago (right) and the Chicago Tribune’s 2010 Census: Same-Sex Partners in Chicagoland (left).

Screen_shot_2013-04-03_at_1.15.10_PM.png
Similar data sets mapped in different color palettes.

The maps shown above display two similar data sets, yet tell dramatically different stories. Putting aside that one is intended to be a bit more exploratory than the other one, they are both using a mapping technique called dot-distribution (or dot-density) to highlight clusters of information. In each map, the creators have assigned colors to different population groups. In the NYT’s map (right), the creators used a more conventional, gray-scale background color palette, allowing the five colors indicating different race/ethnic households to stand out. The Tribune’s map makes a non-traditional map design choice, utilizing a primarily black background likely to enhance the discern-ability of the dots indicating male-male and female-female households.

What are these color choices telling us as readers? The colors used in the NYT map do not indicate a hierarchy between the different population groups. Instead, the quiet, neutral background color palette allows for a hierarchy between the most salient information—the population groups—and the necessary secondary information like roads, coast lines, neighborhoods, and cities.

In the second example, we see colors used out of a familiar context, which can’t help but fascinate and attract the eye. Because the Tribune made a non-traditional color choice, the reader can’t help but wonder if the black is part of the information layering. Does the black mean something? Is it indicating to the reader some layer of information symbolized by the color black? Does this story have something to do with nighttime? If a reader gives the map more than a quick glance, it becomes obvious that the black background choice isn’t about meaning, but focuses on readability. And it sure is pretty, to boot. Comparing the color choices in these maps shows that we have a learned response to colors and the colors that we see are invariably influenced by what we feel.

It's Your Turn

Using your newly-refined critical eye, take a moment to examine and analyze the Guardian’s Verified Sandy Events map and WNYC’s Stop & Frisk: Guns map, both of which employ a lot of black in the secondary parts of their color palettes. Apply the same thought process to maps designed to note that the future or the past are part of the story, like the New York Times’ What Could Disappear and National Geographic’s Hudson River Valley. Ask yourself how color is enhancing—maximizing—a reader’s understanding of the story, as well as how it is helping organize the data.

There are tons of beautiful examples of maps that engage the reader with non-traditional color choices. Some of my personal favorites include Your Warming World from NewScientist, the big data geographic mapping by Fathom, most of the mapping experiments from Stamen Design, and Periscopic has been producing some beautiful map projects.

In general, there is no absolute right or absolute wrong when you make design decisions. There will always be a use-case as an appropriate argument for breaking a rule. Understanding that color is relative, and being cognizant of color choices early in the design and story planning stages helps you produce more effective map-based presentations of data.

 

Comments