Customizing your choropleth map
After importing the data for your choropleth map, you can now refine, annotate, and design it in step 3: Visualize. In this tutorial, we'll walk you through the different options.
In the Refine tab, you can find three panels: Colors, Legend and Appearance.
With the Color panel, you can decide which colors the regions should have on your map. If you imported multiple columns, you can choose which ones you want to visualize on your map at the top.
If you imported numerical values (e.g. percentages or population numbers), you'll see these options:
Datawrapper automatically maps your values between the lowest and the highest number in a linear interpolation. You can choose another color gradient with a click on the gradient at the top.
👉 To learn how to work with these color options, visit our Academy article "How to use the color palette tool".
For our map, we choose another gradient and set the interpolation from linear to natural:
If you want to visualize categorial values (e.g. "yes"/'no" or "Republican"/"Democrat"/"Independent"), you'll see all your categories. Click on them and then on the color swatch to change their colors:
Now that you chose your colors, let's make sure readers can make sense out of them with your legend:
By default, Datawrapper shows a legend. You can customize it in the second panel, "Legend":
Here you can give your legend a title and decide how it should be displayed. Click on "more options" to not miss all the positioning options!
We changed the number format to 0% because we want to show a percentage ( unemployment rate).
The third and last panel in the Refine tab is the Appearance panel. Here you have five options:
- Make map zoomable makes...well, the map zoomable. You will see that this succeeded if your map gets a grey minus & plus button at its bottom-right corner.
- Hide regions without data: regions without data will not be shown on the map.
- Map alignment: determines the positon of the map on the background. Often, a map fills the background completely, like an US map. If you work with such a map and the map padding is set to zero, this option won't have any effect.
- Map padding: adds padding around the map. If your map legend covers parts of the map, use Map padding and Map alignment to move the map next to the legend.
- Max. height (px) - Datawrapper by default will automatically adjust the height according to its width to reduce any unnecessary white space around the map. But when you have a long map like Chile, for example, you might want to set a maximum height to avoid all the scrolling:
These are all the settings you can find in the Refine tab. Let's move on to the Annotate tab:
Annotate: Annotate your chart
In the Annotate tab, you're first asked to give your visualization a title, description, notes, source, byline, and an alternative description for screen readers. You can find a detailed explanation of all these Annotate options here.
Annotate: Map labels
As soon as you select a column for your map labels, they'll show up on your map – if you see the min. zoom for labels to 1 and are in a zoomed-out view:
Our map is too detailed for this feature, so turning in on isn't a good idea for zoom level 1. However, map labels that readers will see even if not zoomed in make a lot of sense in maps with bigger regions (e.g. US states, European countries).
The solution for our map is too set the min. zoom for labels higher. Play around with the slider while zooming in to see which zoom level makes the most sense.
To still show the most important county names even before readers zoom to the min. zoom for labels, you can use the Highlight regions option. Use the dropdown menu to select the regions you want to see labeled:
By default, Datawrapper displays your region names and values as the tooltips. In the last panel in the Annotate tab, you can first decide if you want to display tooltips at all or not.
Since maps rely only on color and are therefore hard to read, tooltips can be a great help for readers to make sense out of the data. For our map, we're turning them on.
A click on Customize Tooltips will open two text fields. Below the text fields, you can find all the columns you imported as blue buttons. Click on them to integrate them in your tooltips:
👉 To learn how to customize tooltips – e.g. with bold text, If/Else statements or tables – visit our article "How to customize tooltips".
After we worked through the Annotate options, there's only one tab left: Design.
In the Layout tab, you can select an output locale, change the design theme and footer options, and enable social sharing. Find a detailed explanation of all the Layout options here.
Once we have worked through Refine, Annotate and Design in step 3: Visualize, we can now proceed to step 4: Publish & Embed. The best way to use a Datawrapper chart is by embedding it directly on your website. To do that, click the big blue button that says " Publish chart". Then, copy & paste the embed code snippet into your website or CMS.
You can also download your chart in two formats. First, users of all subscription plans have the option to download their chart as a PNG. Custom and Enterprise plan users also have the option to download their chart as a PDF or SVG. Click here for more information on the different pricing plans of Datawrapper.
In this tutorial, we gave a quick overview of all the options that you have to customize your Choropleth map. You can find more detailed explanations about the color palette, tooltips and custom map keys in other articles.