Customizing your symbol map

After importing the data for your symbol map, you can now choose the data for the symbol size and color and style the map to your liking in step 3: Visualize. You'll find three tabs at the top: Refine, Annotate and Design. In this tutorial, we'll walk you through all these steps to create the following map:

Let's start with the options in the Refine tab:

Refine: Symbol shape and size

In the first panel, you have four options: 

  • Symbol shape: Here you can decide which geometric shape your symbol should have. Circles are the default, as they are used in most symbol maps and area easy to read. Squares, diamonds, and hexagons are great options for clustering, as we'll see later. Triangles (up and down) can be used to show a development (e.g. a city with a shrinking population). And markers are especially great if you don't choose a column for "size"; meaning if all your symbols are exactly the same size. 
  • Size by: Select which numeric column should define the size of your symbols. For our map, we use the population of the cities we show. If your symbols should all have the same size, select -- from the dropdown menu. 
  • Max. symbol size: Decide how large the symbols should appear. You can try around a bit to find a good solution: Too small, and it's hard to see them. Too big, and they're overlapping each other too much. 

Choosing the last option, Group nearby symbols, will cluster your symbols together. That's helpful if you have a lot of smaller symbols and it's important to see for your readers how many they are in an area. 

👉 Grouping nearby symbols comes with lots of options that are helpful to understand. To learn more about them, visit our article "How to group nearby symbols".

Refine: Symbol Colors

The next panel lets you define which colors your symbols should have. By default, they're all in the same color. Click on the color swatch to change this one: 

In our case, we want the symbols to shows us how much warmer a city has gotten. So we choose our numerical column "regionalwarming". As soon as we do this, we get a lot of new options.

Datawrapper automatically maps our 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. 

For our map, we changed the palette to a yellow-red-purple gradient. We also rounded the minimum value down to 1 and the maximum value up to 3.5.

👉 To learn which interpolations to use, visit our Academy article   "How to choose stops for choropleth maps".
👉 To learn how to work with these color options, visit our Academy article "How to use the color palette tool"

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 we chose our colors, let's make sure readers can make sense of them with a legend:

Refine: 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! 

👉 To learn which legend types exist, how to use them, and how to position your map legend, visit our Academy article "How to customize your map legend".

We gave our map legend the title "Warming since 1960 <br>in °C per century" – the <br> makes sure that the line breaks after 1960 in the desktop view. We also used used custom labels to make visible that our legend shows degree celsius:

We then clicked on "more options" to position our map in the top right.  

Refine: Appearance

The third and last panel in the Refine tab is the Appearance panel. Here you have four options:

  • Make map zoomable makes...well, the map zoomable. You will see that this succeeded if your map gets a grey minus & plus button in the bottom-right corner.
  • 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. Here's a choropleth map as an example:

These are all the settings you can find in the Refine tab. Let's move on to the Annotate tab:

Annotate: Annotate your chart

If you've created a Datawrapper chart or map before, you already know this feature. Here you can give your map a title, a description, add notes and a source:

  • We recommend writing in the title what's interesting about the map – the one key statement that you want to show on this map, if you have one, e.g. "All European cities got warmer since 1960" or "Unemployment highest in the south"
  • The description should have as much information about the data as possible: What do we see exactly? E.g. "Unemployment rates in % in all US states, 2016"
  • Think of notes as footnotes, where you want to specify any abnormalities about your data. E.g. "California unemployment rates from Jan and Feb 2016 not included in the calculation."
  • The source name will give your readers the information on how trustworthy your data is. Does it come from a government institution or another trustworthy organization? The source URL lets your reader dig even deeper and have a look at the underlying data themselves. Both, source name and source URL, should be filled out on every map to increase transparency. E.g. US Bureau of Labour Statistics, August 2017
  • Last but not least, add your name and/or organization as the byline.

Annotate: Tooltips

By default, Datawrapper displays your region names and values as the tooltips for the symbols. In the second and last panel in the Annotate tab, you can first decide if you want to display tooltips at all or not. 

Since symbol maps rely only on area and color – which are both a bit 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 more in-depth how to create tooltips, visit our article  "How to create tooltips".
👉  To learn how to create tooltips for your grouped/clustered symbols, visit our article  "How to create tooltips for grouped symbols"
👉  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.

Design

In this last tab, you can decide in which  layout your chart should be published. Should it come in the Datawrapper design? Or (if you or your organization decided to style a chart) in the design of your organization? 

You can also change the  Output Locale for your map. This affects the language of the attribution in the bottom left of your map and defines decimal and thousand separators as well as translation of month and weekday names.

You can also enable Social Sharing here. If you do that, the share buttons for Facebook, LinkedIn and Twitter will appear on the top-right corner of your map. 

Publish

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 symbol map. You can find more detailed explanations about the color palette, tooltips and custom map keys in other articles.