Datawrapper is a free, open source tool for making simple but effective graphs to visualise data for a story.

At Journalism.co.uk we regularly use Datawrapper to chart figures from the Audit Bureau of Circulation on web traffic to UK news organisations.

The Mirror's data journalism site Ampp3d also use Datawrapper for some of their simpler charts, although it should be noted that they create their more complex ones in-house.

Above is a quick video guide to using Datawrapper but the steps are laid out below too.

1. Log in by creating an account, or using Twitter or GitHub details.

The first page you're taken to is for uploading data. You can upload a .CSV file, copy and paste your data in directly from programs like Excel, Office or a Google Doc, or have a play with the sample datasets provided.

Datawrapper also provide a tutorial with guidelines on what types of data to look for, how to 'clean' the data – removing the formatting, extra characters or other elements – and visualising the data if it is necessary to go into more detail.

First we want to collect the relevant data together, then upload it in whatever way is easiest.

2. Hit 'upload and continue' and you're taken to the 'check and describe' page.

DWSS619
Screenshot from Datawrapper.de

Here you can credit the source and also edit the column options, such as whether it is a number, text or date, and how the numbers display.

You can also add options for how they display on the front end, like divided by millions or billions, whether you want to round the numbers to a certain number of decimal places, or whether you want to add extra text to the numbers.

Once you're all set, hit visualise.

DWSS6192
Screenshot from Datawrapper.de

If the chart does not appear as you expected there’s a helpful ‘transpose the data’ option below the different charts options that often does the trick.

3. You are given a number of types of chart, including an option to publish the data as a table, but lets start with a simple group column chart.

Go to refine the chart where you can customise various elements, depending on the story you want to tell, and type of graph used.

You can also set the display size of the graph, which will appear in the embed code when you publish.

Then make sure everything is correctly labelled (via the 'Tell the story' tab) before hitting publish.

5. Once published you can take the code on the left and embed the chart on your website.

If you are planning on regularly producing charts for data it is worth surrounding yourself with charts and data to get a real feel for what works best and the different options available.

Free daily newsletter

If you like our news and feature articles, you can sign up to receive our free daily (Mon-Fri) email newsletter (mobile friendly).