Choropleth Map with Datawrapper

Now let’s pivot from point maps to polygon maps. Since you’ve already learned how to use Datawrapper to design charts and symbol maps, let’s use this tool to create a choropleth map, which look like colored polygons. Choropleth maps are best for showing 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 7.40. 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 7.40: 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 definitions.

Good maps often require cleaning up messy data as described in Chapter 4. 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.

  1. In the Google Sheet, go to File > Download and select the Comma-Separated Values (CSV) format to save the data to your local computer.

  2. Open Datawrapper, click on Start Creating, then click the New Map button, and select Choropleth map as shown in Figure 7.41. 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 7.41: In Datawrapper, click New Map, and choose Choropleth.

  1. In the Select your map screen, choose your geographic boundaries. In this case, search and select USA > States and Territories in order to include data for Washington DC, which is not a state, as shown in Figure 7.42, then click Proceed.
Choose USA - States and Territories for your map outline.

Figure 7.42: Choose USA - States and Territories for your map outline.

Tip: 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 GeoJSON data section of Chapter 13.

  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 below the add data table and click the Import your dataset button, as shown in Figure 7.43.
Scroll down below the add data table to import your dataset.

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

Datawrapper will explain that when uploading data to the USA > States and Territories map, your data must include one of these columns:

  • Names, such as California.
  • FIPS-Codes, the Federal Information Processing Standards numeric codes for US states and smaller geographies, where California is 06.
  • ANSI-Codes, the American National Standards Institute alphabetical or numeric codes for US states and smaller geographies, where California is CA. Learn more from the US Census Bureau about ANSI and FIPS codes.

Codes vary by the type of map. For example, a world map may accept country names (which vary in spelling) or ISO three-letter codes. To view all of the codes for your selected geography, go back one screen in Datawrapper and select the Geo-code drop-down menu, as shown in Figure 7.44. If necessary, you could copy and paste names and their code equivalents into your spreadsheet to prepare your data. Learn more about place name geocoding at the Datawrapper Academy.

To view all codes for your selected map, go back one screen to the Geo-Code drop-down menu.

Figure 7.44: To view all codes for your selected map, go back one screen to the Geo-Code drop-down menu.

  1. Since our data includes columns for both Names and ANSI-Codes, go ahead and click Start Import.

  2. On the Import your dataset screen, rather than paste your data, we recommend that you click to upload a CSV file and select the file you downloaded in step 2.

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

Select the data column that contains matching ANSI codes.

Figure 7.45: Select the data column that contains matching ANSI codes.

  1. Proceed to the next screen, select the column of data values that you initially wish to map, and click Matched as values, as shown in Figure 7.46. 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.
Select the data column that contains the values that you wish to map.

Figure 7.46: Select the data column that contains the values that you wish to map.

  1. 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 7.47. Do not blindly 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 7.47: 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 7.48. 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 7.48: 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 7.49.
Experiment with other colors, intervals, and data columns to find true and meaningful stories.

Figure 7.49: 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), as shown in Figure 7.50. Learn more about Datawrapper custom formats in their link to the numeral.js documentation.
Change how numbers appear in the legend by entering a custom format.

Figure 7.50: Change how numbers appear in the legend by entering a custom format.

  1. 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 7.51. 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 7.51: To edit tooltips, click the blue column names or use drop-down menus to format the codes.

  1. Finally, click Proceed or advance to the Publish & Embed screen to share your work with others. Follow the prompts, or the more detailed Datawrapper tutorial above, to obtain an embed code to your interactive map, and learn more about your next steps in Chapter 9: Embed on the Web.

Tip: 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.