1 of 13

Get Charts and Maps Online with Datawrapper

2023 GIJC | Robert Gebeloff | Anuška Delić

​

2 of 13

Get Charts and Maps Online with Datawrapper

The Problem:

There are many tools for making charts and maps. But publishing them is not easy, especially for small news organizations.

The Solution*:

Datawrapper allows you to create professional looking charts without any coding and then embed the finished product into your published work. And it’s free.

* And we’re not getting paid to offer this solution, either

3 of 13

Get Charts and Maps Online with Datawrapper

Datawrapper was built by Gregor Aisch, a journalist from Germany, with journalists in mind. It is used by news organizations around the world. The larger orgs pay for a robust set of customized features, which subsidizes the free plan for everybody else.

4 of 13

Get Charts and Maps Online with Datawrapper

This is what Datawrapper promises:

Source https://www.datawrapper.de/faq#why-do-you-offer-such-a-strong-free-plan

5 of 13

Get Charts and Maps Online with Datawrapper

In this class we will:

  1. Walk through a simple demo of how to build a line chart.
  2. Provide you with some data so you can build your own chart
  3. Give you a more advanced example, making a map.

​

*** Please, create a free account at Datawrapper.de, if you haven’t already.

6 of 13

Get Charts and Maps Online with Datawrapper

Link: bit.ly/datawrapper0920

​

  1. Datawrapper.de
  2. Start Creating
  3. Upload data: bit.ly/datawrapper0920 (click raw, copy and paste this in)
  4. Proceed -- this is where you can alter the characteristics of your data (beware of the data formats!)
  5. Proceed -- this is where you decide the type of chart. It’s a sandbox to experiment, but for this example, let’s pick lines and click proceed.

​

​

7 of 13

Get Charts and Maps Online with Datawrapper

Link: bit.ly/datawrapper0920

​

6) Horizontal Axis - Datawrapper guessed correctly, we could customize but don’t have to

7) Vertical Axis - Can you see any problems here?

8) Let’s change the labeling as well. The format is ok but to even it out, let’s click on customize tooltip formats and enter 0.0 (complete guide to custom format is here: https://academy.datawrapper.de/article/207-custom-number-formats-that-you-can-display-in-datawrapper

​

​

8 of 13

Get Charts and Maps Online with Datawrapper

Link: bit.ly/datawrapper0920

​

9) Let’s skip coloring the lines and at the bottom click the “fill” button to emphasize the gap

10) Click proceed

11) for title, type “Annual Births and Deaths”

12) Type a description

13) Type a source

14) Click on text annotation and draw a box on the screen and type in an explanatory label

15) There are more options for styling chart, but most important -- click “embed link” and proceed

16) If you have an account, it will produce code for embedding your chart -- if not, it will prompt you to enter your e-mail and it will e-mail you the code.

​

​

​

​

9 of 13

Get Charts and Maps Online with Datawrapper

Link: https://tinyurl.com/44mr857x

​

​

Here is some more data to play around with!

​

It’s data on the number of McDonald’s restaurants globally, coupled with population data, sourced largely from the World Bank.

​

(Disclaimer: The data is not 100% sound. Do not reuse without verifying it!)

​

​

​

​

​

​

​

​

​

10 of 13

Get Charts and Maps Online with Datawrapper

So, let’s create a map with this data.

​

​

  1. Click on Create a new map
  2. Choose World
  3. Copy the data as before and click Proceed
  4. Copy/paste the data
  5. Click on the Match tab (DW allows you to input specific country formats)
  6. Click on the Check tab and observe the data

​

​

​

​

​

​

​

​

​

​

​

​

​

​

11 of 13

Get Charts and Maps Online with Datawrapper

Link: https://tinyurl.com/44mr857x

​

  1. Select your values column
  2. Choose your color palette (you can customize the colors further)
  3. Select the “steps” type of visualization and set the number of steps
  4. Continue to the Legend section and format the numbers
  5. Click on Advanced options and then:
    • Position your legend as you think it’s suitable
    • Enable highlighting on hover – is it necessary?
  6. Go to Appearance: should we make the map zoomable?
  7. Annotate the map and set the output
  8. Publish!

​

​

​

​

​

​

​

​

12 of 13

Get Charts and Maps Online with Datawrapper

Link: bit.ly/datawrapper0920b

​

Play around with this data – it’s union membership in the U.S. by industry sector.

​

Several different charts types are possible – which one works best?

​

Can you make the headings more understandable?

​

​

​

​

​

​

13 of 13

Get Charts and Maps Online with Datawrapper

​

​

Thank you!

​

rgebeloff@nytimes.com

​

Hvala!

​

anuska@ostro.si

​

​