Map Design Principles

Most of the data collected today comes with some sort of geospatial component. People’s home and places of business have addresses associated with them, such as 1012 Broad St, Hartford, CT. When we track our runs or bike journeys on Strava, they come with latitude and longitude components. National statistical agencies across the world collect data about regions and territories, such as average income or population counts, making it possible to compare countries and other geographical entities.

However, just because data can be mapped does not mean it should be mapped. Before you decide to create a map, ask yourself: Does location really matter to your story? If precise values are more important to your story than spatial patterns, consider using a simple table to show values. Most people are familiar with the table, and can easily retrieve information from it as long as you arrange it logically (for example, alphabetically or sorted by value). If you want to show change over time for various geographies, consider using a line chart instead. Sometimes even a simple bar chart can be a much better alternative to a map.

An effective map should show interesting geospatial patterns and should be easy to read in both black-and-white (as is often the case with printed materials) and color.

Understand the Vocabulary

Take a look at Figure 7.1 to get familiar with main basic elements of an interactive map. Similar to a chart, a good maps should have a title and a description that gives a bit of context about what the map is showing.

Map elements.

Figure 7.1: Map elements.

The data in the map is presented as layers. A base layer is often satellite imagery of the earth or vector representations of buildings and streets (also known as vector tiles). A base layer provides the foundation of the map. The data displayed on the maps can be generally described as points (such as marker locations of nearby restaurants), polylines (connected points, such as roads or trails), and polygons (polylines where the final point is connected with the initial one). Polygons represent areas, such as building footprints or country boundaries.

The legend provides the mapping between shapes and colors and the values they represent. For example, you may wish to use blue markers to represent restaurants, and orange markers to represent bars, and legend will be the right place to explain that difference.

Interactive maps often “hide” data inside popups or tooltips – boxes with information that appear when you click or hover over map elements.

Interactive web maps often have zoom controls (+ and - buttons) to allow users to inspect data from various “distances”.

Color Palettes: Sequential, Diverging, and Qualitative

If you build a choropleth map, the choice of colors is very important as color is the main way to represent values. So let’s talk about color palettes.

Color palettes can be grouped into sequential, diverging, and qualitative. The examples are shown in Figure 7.2.

Examples of sequential, diverging, and qualitative color schemes from ColorBrewer.

Figure 7.2: Examples of sequential, diverging, and qualitative color schemes from ColorBrewer.

Sequential palettes are used to represent continuous numeric values, in other words, anything that can be placed on a scale. For example, average income, population counts, percent unemployed, etc. Usually such palettes are single-hue (for example, different shades of blue), and typically darker colors represent higher values (but not always).

Note: See Normalize Data to Create Meaningful Choropleth Maps section to see an example of sequential palette use, and learn why representing normalized instead of absolute values may be a better idea.

Diverging palettes also represent continuous values. Unlike sequential palettes, however, diverging colors represent “direction” from some reference value, such as below or above zero, or below or above the average value. Diverging palettes typically have two distinct hues for “positive” and “negative” values, with a neutral color in the middle.

Qualitative palettes typically consist of distinct hues that represent distinct classes. For example, the US Department of State issues travel advisory to foreign destinations ranging from “exercise normal precautions” to “do not travel” relying on a series of qualitative and quantitative measures, such as the likelihood of terror attacks, political and criminal situation, etc. But classes can also be derived from numerical values, as is the case with the World Bank’s classification of countries by income. The organization groups countries and territories into “low”, “lower-middle”, “higher-middle”, and “high” income categories based on gross national income per capita.

It is important you choose an appropriate classification for your choropleth map. While the nature of certain datasets will make the choice of a color palette obvious, most of the time you will have to actively choose how to display your data.

In Figure 7.3a, we presented the same dataset using three differnet color palettes. The map in Figure 7.3a represents per capita income for the contiguous US states using a sequential color scheme consisting of five shades of blue. The darker the color, the higher the income. You can quickly see that states in the north-east, such as Connecticut, Massachusettes, New Jersey, and Maryland have the highest per capita income.

In Figure 7.3b, we used a divergent color scheme to show whether states have higher or lower per capita incomes than the United States as a whole. We subtracted the US per capita income value of $33,831 from each state’s value. This new relative measure is positive for states with higher per capita income, and negative for the states whose per capita income is lower than in the US. In the map, sub-zero values are painted in orange, and above-zero values are in purple. Such color palette could be appropriate for a story about the north-south divide.

You can also split the 48 states into three groups of 16 based on their per capita income, and group them in three thirds, as “low”, “middle”, and “top” third. This is what we did in the map shown in Figure 7.3c.

Representing per capita income in US states using three different classifications.

Figure 7.3: Representing per capita income in US states using three different classifications.

ColorBrewer

One of the most useful color picking tools for meaningful choropleth maps is ColorBrewer, created by Cynthia Brewer and Mark Harrower. You can see ColorBrewer’s interface in Figure 7.4.

ColorBrewer interface.

Figure 7.4: ColorBrewer interface.

ColorBrewer can generate color palettes for a specified number of classes - between three and nine for sequential, three and elevel for diverging, and three and twelve for qualitative. You can also choose palettes that are colorblind safe and print friendly.

Remember that more colors (or “buckets”) does not equal better maps. People are quite bad at distinguishing hues, and an excessive number of buckets will make it harder for reader to compare map values with the legend. If you build a sequential color palette, we recommend you start with five buckets, then try four and six and decide what is appropriate for your data and your story.

Fewer colors create a coarse map with differences in colored ranges becoming more visible. More colors create a more granular map, but differences in colored ranges become less visible.

At this point, you should have some understanding of how maps work. So let’s move to the first practical exercise of creating a point map with Google My Maps.