MCOM

402 / Spring 2018 / Instructor: Dr. Stan Diel

How to Create Interactive Graphics in Datawrapper

1. Open the Excel file containing the data you want to use. This data needs to be
“clean,” meaning there can be no punctuation marks or empty cells, and it
needs to be formatted as numbers. Clean data should look something like
this:

2. To format your data as numbers, click and hold on the letter “B” at the top of
the second column, and drag to the right until all of the columns containing
data have been shaded.

 MCOM 402 / Spring 2018 / Instructor: Dr. Stan Diel

3. With your cursor anywhere in the shaded area, right click, then click “format
cells” in the drop-down menu. This box should now pop up:

In the box, click on “Number” under category, then lower the number of
decimal places to zero, then make sure the “Use 1000 separator” box is NOT
checked. Now click “OK” at the bottom of the box.

4. On the internet, open datawrapper.de, and click on “create a chart.”

 MCOM 402 / Spring 2018 / Instructor: Dr. Stan Diel


5. Now go back to your Excel data, click and hold on the “A” at the top of the
first column, and drag to the right until all of your columns are shaded.

6. Right click over the shaded area, and the click “copy” in the drop down menu.


7. Back in Datawrapper, put your cursor in the box that says “paste your copied
data here,” right click and then click on “paste” in the drop-down menu.

 MCOM 402 / Spring 2018 / Instructor: Dr. Stan Diel



Your data show now appear in the box, and look something like what you see
below. Now, click “Upload and continue.”

8. Your data should now appear in an orderly grid, like the one below. Make
sure the “First row as label” box IS checked, and then click “Proceed.”

 MCOM 402 / Spring 2018 / Instructor: Dr. Stan Diel






9. Your data should now appear in the form of a chart (see below), with a
selection of chart style options appearing at left. Click on the “Bar Chart”
option, then click the “Bars (old)” in the dropdown menu near the bottom.

 MCOM 402 / Spring 2018 / Instructor: Dr. Stan Diel




Now click the “Annotate” tab and you can enter a headline where it says
“title,” and a short description. You can identify the source of your data by
entering that information in the “source name” box. You can use the
“Highlight the most important elements” dropdown menu to make one or
more items in the chart stand out. Under the “Refine” tab, select
“Automatically sort bars.” Now click “proceed.”

You should now have a functioning, interactive chart. Click on the bubble
below any of the dates at the top of your chart, and the bars below should re-
arrange themselves accordingly.

10. Click “publish” to get an embed code you can drop into WordPress or any
other blogging software to make the chart appear in your story.
 MCOM 402 / Spring 2018 / Instructor: Dr. Stan Diel


IMPORTANT NOTE: You must have an account with Datawrapper to use the
publish function and post your charts online. Accounts are available free of charge
to students. For more information, visit: http://docs.datawrapper.de/datawrapper-
pro-bono/

A note from the author: Datawrapper is picky when it comes to the cleanliness of
the data it is fed. You are most likely to encounter problems in step No. 7, because
this is the stage at which Datawrapper becomes obstinate, should your data not be
perfectly clean. If data isn’t flowing properly, copying your data into a new Excel file
and formatting it as numbers again may fix the problem.

This exercise demonstrates the most basic use of the software. Students can explore
the chart type options and experiment to learn more.