Choropleth Map with Datawrapper

In addition to creating wonderful interactive charts, Datawrapper lets you create stylish and interactive point and polygon maps. In this section, we will create a choropleth map of average home values in US states in 2019 according to Zillow data, as shown in Figure 7.13.

We calculated average 2019 prices for 50 US states and DC, and put them in a spreadsheet, which you can download for this tutorial.

Figure 7.13: This choropleth map is created in Datawrapper

Create a New Choropleth Map

Sign in to your Datawrapper account and click New Map in the header. Datawrapper will offer a choice of a Choropleth, Symbol, and Locator maps, as shown in Figure 7.14. Go ahead and choose choropleth.

Sign in to Datawrapper, click New Map, and choose Choropleth.

Figure 7.14: Sign in to Datawrapper, click New Map, and choose Choropleth.

Datawrapper splits the process of creating a map into four steps. In step one, you need to choose your map boundaries. Datawrapper has a wide collection of most common geographical boundaries, including states and counties and municipalities for most countries in the world, and zip code and census tract areas for the United States. But you are not limited to the boundaries that Datawrapper already has. You can also upload your own custom geographies as a TopoJSON or GeoJSON file, and you will learn more about that in the Convert to GeoJSON section of Chapter 13. Because we are mapping average home prices by US state, choose United States > States, as shown in Figure 7.15, and hit Next to go to step 2.

To map home prices by US state, choose appropriate boundaries.

Figure 7.15: To map home prices by US state, choose appropriate boundaries.

In the second step, you can attach data to the chosen boundaries. You can set values manually in the interactive table that Datawrapper offers. This is fine for several values, but is too time-consuming for all 50 values (District of Columbia is not a US state, so is not present in the boundaries). Instead, click Import your dataset button under the table.

Datawrapper will warn you that you need either Names (full state names, such as Connecticut), or ISO-Codes (the standardized two-letter codes for the state, such as CT for Connecticut) columns in order to perform merging. Since the dataset that we prepared contains both columns (titled State and StateAbbr), you can confidently press the Start import button.

In the following window, you can either copy/paste values from the spreadsheet, or upload a CSV file. We recommend uploading a file, so click the link and choose the file us-states-home-values-zillow-2019.csv. The table will then get populated, and Datawrapper will ask for help identifying the relevant column with geographical names. Make sure your Matched as ISO-Codes tooltip is blue above the StateAbbr column, scroll down and click Next, as shown in Figure 7.16.

Tell Datawrapper which column contains geography names (ISO-Codes of states).

Figure 7.16: Tell Datawrapper which column contains geography names (ISO-Codes of states).

In a similar fashion, you will then be asked to identify a column that contains values to be mapped. Make sure it is HomeValue2019 that is Matched As Values.

Note: See Normalize Data to Create Meaningful Choropleth Maps section to learn why you should avoid displaying absolute values or counts in choropleth maps.

Style and publish your map

When finished uploading data, go to step 3 to begin visualizing. Start with the Refine tab and choose a diverging color palette, from reds to blues. Make sure your “middle” color value corresponds to the state with the median home price by choosing min/median/max value from the Stops dropdown, as shown in Figure 7.17.

Choose red/blues divergent color scheme, and make sure to match median with the neutral (middle) value.

Figure 7.17: Choose red/blues divergent color scheme, and make sure to match median with the neutral (middle) value.

When finished with colors, scroll down to Tooltips section and click Customize tooltips button. In a popup window, set Title to the state name and Body to the average home value, as shown in Figure 7.18. The easiest way to do this is to click on column names in the upper-right corner of the popup window, where all available names are listed, which is circled in Figure 7.18. Note that references to variables are put in double curly brackets ({{ ColumnNameGoesHere }}). Make sure your dollar symbol ($) in outside of the curly brackets. Click Save, and hover over the map to make sure your tooltip displays the state name and the average home price.

To reference values from the spreadsheet, add column names in double curly brackets.

Figure 7.18: To reference values from the spreadsheet, add column names in double curly brackets.

You can now move to the Annotate tab and set values for the map’s title and description, which is the line just below the title. Make sure you reference Zillow Data as data source. Being transparent about your sources and methods adds credibility to your work.

In the final, fourth step, you can publish the chart and copy the iframe code that Datawrapper generated for you.

In the following section, we will create a point map inside Socrata data platform.