Choropleth Map with Datawrapper

Now that you’ve learned how to use Datawrapper to create charts and symbol maps, now let’s design a choropleth map. These maps are best to show patterns across geographic areas by coloring polygons to represent data values. Datawrapper offers a wide collection of common geographical boundaries, including world regions, states and provinces, and also hexagons (cartograms), counties, congressional districts, and census tracts for the United States.

In this section, you’ll create a choropleth map of typical home values for US states in August 2020 according to the Zillow Home Value Index, as shown in Figure 8.31. The index reflects typical home values (meaning those in the 35th to 65th percentile range, around the median) for single-family residences, condos, and co-ops, and it is smoothed and seasonally adjusted.

Figure 8.31: Choropleth map of 2020 home values in US states with Datawrapper. Explore the interactive version.

Datawrapper splits the process of creating a map into four steps: select map, add data, visualize, then publish and embed. To create your own choropleth map, follow this tutorial.

  1. Open the Home Value Index data in Google Sheets, which we downloaded from the Zillow research site. Read the notes to understand its origin and some data issues. For example, Washington DC was included in the data, but it does not yet appear in the Datawrapper map of US states, because the District of Columbia is not a state.

Good maps often require cleaning up messy data as described in Chapter 5. In our spreadsheet we removed all of the columns except two, August 2019 and August 2020, and we also inserted a Percent Change column, which we calculated this way: (2020 - 2019) / 2019 * 100. Also, we’re fortunate that Datawrapper easily recognizes US state names and abbreviations. If you’re mapping other types of geographic areas, learn more about international ISO codes and place name geocoding at the Datawrapper Academy.

TODO: DECIDE whether to keep basemap or change to one of the others that now reflect DC. DECIDE whether to mention other types of codes recognized by Datawrapper, which vary with map type, such as FIPS and ANSI.

  1. Go to File > Download in CSV format to save the data to your local computer.

  2. Open Datawrapper, click the New Map button, and select Choropleth map as shown in Figure 8.32. No login is required to create a map, but you should sign up for a free account in order to save your work and publish your map online.

In Datawrapper, click New Map, and choose Choropleth.

Figure 8.32: In Datawrapper, click New Map, and choose Choropleth.

  1. In the Select your map screen, choose your geographic boundaries, and in this case choose USA > States, as shown in Figure 8.33, then click Proceed. Since Washington, DC is not a state, it does not appear in this map of US States.
Choose USA - States for your map outline.

Figure 8.33: Choose USA - States for your map outline.

Hint: If Datawrapper does not list your preferred map outline, you can upload your own custom geography data in GeoJSON or TopoJSON format, which you will learn more about in the Convert to GeoJSON section of Chapter 14.

  1. In the Add your data screen, you can manually enter data for each area, which would be fine for just a few, but not for 50 states. Instead, scroll down and click the Import your dataset button, as shown in Figure 8.34. Datawrapper will explain that your data must include either Names (such as California) or ISO-Codes (standardized two-letter codes for states, such as CA, or three-letter codes for nations, such as USA). Since we prepared our data this way, click Start Import.
Scroll down below the add data table to import your dataset.

Figure 8.34: Scroll down below the add data table to import your dataset.

TODO: Decide whether to include screenshot of names/codes drop-down menu, which is helpful because it shows how Datawrapper labels each geography, and one could copy and paste this into a spreadsheet and use VLookup. Decide if it’s important to include an image of this import button, since I believe it’s hidden far below the table that most users see.

  1. On the Import your dataset screen, instead of pasting your data, we recommend that you click to upload a CSV file and select the file you downloaded in step 2.

  2. In the Match your columns screen, click the column that matches up with ISO codes, as shown in Figure 8.35. You may need to scroll down a bit to click the Next button, then Continue.

Select the data column that contains matching ISO codes.

Figure 8.35: Select the data column that contains matching ISO codes.

  1. In a similar way on the next screen, click the column of data values that you initially want to map, and click Matched as values. For this tutorial, select Aug2020 Home Values, then scroll down to click Next, then Go, then Proceed. You’ll be able to map other data values in a later step.

  2. In the Visualize screen, under the Refine tab, click the wrench symbol next to the color palette to review the default map settings, as shown in Figure 8.36. Never automatically accept the default map, but it’s a good place to start and explore how factors shape its appearance.

Under the Refine tab, click the wrench symbol to see the default map settings.

Figure 8.36: Under the Refine tab, click the wrench symbol to see the default map settings.

Let’s review key concepts we first introduced in the Design Choropleth Colors & Intervals section of this chapter. The default map shows a continuous green-to-blue color palette, with linear interpolation, which means the home values are distributed in a straight line up the scale. These colors and intervals work better for a data story that emphasizes the low and high extremes.

  1. In the Refine tab, experiment with different types of interpolation to change how values are assigned to colors. For example, change from linear to quartiles, which groups the data into four groups of equal size, as shown in Figure 8.37. This map works better for a data story that emphasizes geographic diversity, since we see more contrast between states in the middle range.
Under the Refine tab, change the interpolation from linear to quartiles and see how the map changes.

Figure 8.37: Under the Refine tab, change the interpolation from linear to quartiles and see how the map changes.

  1. Experiment with other colors, intervals, and data columns. Change the palette from sequential to diverging colors, which display a neutral color in the middle range and two dark colors at the extremes. Change from a continuous gradient to steps, and choose different numbers of dividers. Change the data column to Pct Change 2019-20 to normalize the choropleth map data as discussed earlier in this chapter, since home values are so different across the country. For example, see the map of percent change in home value from 2019 to 2020, with a diverging red-to-blue palette, 5 steps, and rounded values in Figure 8.38.
Experiment with other colors, intervals, and data columns to find true and meaningful stories.

Figure 8.38: Experiment with other colors, intervals, and data columns to find true and meaningful stories.

Which data columns, colors, and intervals make the best map? There’s no easy answer, since there’s more than one way to make a true and meaningful map. But keep two principles in mind. First, make sure that you honestly show the data, rather than hide or disguise it. Second, reflect on what kind of data story you believe is important to tell, since design choices emphasize different interpretations of the data. Review our guidance in the Design Choropleth Colors & Intervals section.

Let’s move on to finalize the labels and styling of the map before we publish and share it with others.

  1. Under the Refine tab, customize the legend format. For example, to convert long numbers (such as 107762) into abbreviated dollars ($ 108 k), we selected custom format and inserted the code ($ 0 a).

  2. Under the Annotate tab, add a title, description, and source credits, to add credibility to your work. You can also add map labels and customize tooltips that will display when readers hover their cursor over different states. The easiest way to edit tooltips is to click on blue column names, or format them using their drop-down menus, to make the proper codes appear in double curly brackets, as shown in Figure 8.39. Learn more about customizing tooltips from Datawrapper Academy.

To edit tooltips, click the blue column names or use drop-down menus to format the codes.

Figure 8.39: To edit tooltips, click the blue column names or use drop-down menus to format the codes.

  1. Finally, proceed to the Publish and Embed screen to obtain an online link for your map, an iframe code that you will learn how to use in Chapter 10: Embed on the Web, and a static PNG image you can download.

Learn more about choropleth map design in this excellent series of posts by the Datawrapper Academy.

Now that you’ve learned how to create a choropleth map using one tool, Datawrapper, let’s compare the process using a different tool, Tableau Public.