By Gregor Aisch, visualization architect and interactive news developer, based on his workshop, Data visualisation, maps and timelines on a shoestring. The workshop is part of the School of Data Journalism 2013 at the International Journalism Festival.

This tutorial goes through the basic process of creating simple, embeddable charts using Datawrapper.

Preparing the Dataset

1. Go to the Eurostat website and download the dataset Unemployment rate by sex and age groups – monthly average as Excel spreadsheet. You can also directly download the file from here.
2. We now need to clean the spreadsheet. Make a copy the active sheet to keep the original sheet for reference. Now remove the header and footer rows so that GEO/TIME is stored in the first cell (A1).
3. It's a good idea to limit the number of shown entries to something around ten or fiveteen, since otherwise the chart would be cluttered up too much. Our story will be about how Europe is divided according to the unemployment rate, so I decided to remove anything but the top-3 and bottom-3 countries plus some reference countries of interest in between. The final dataset contains the countries: Greece, Spain, Croatia, Portugal, Italy, Cyprus, France, United Kingdom, Norway, Austria, Germany.
4. Let's also try to keep the labels short. For Germany we can remove the appendix "(until 1990 former territory of the FRG)", since it wouldn't fit in out chart.
5. This is how the final dataset looks like in OpenOffice Calc

Loading the Data into Datawrapper

1. Now, to load the dataset into Datawrapper you can simply copy and paste it. In your spreadsheet software look for the Select All function (e.g. Edit > Select All in OpenOffice).
2. Copy the data into the clipboard by either selecting Edit > Copy from the menu or pressing Ctrl + C (for Copy) on your keyboard.
3. Go to datawrapper.de and click the link Create A New Chart. You can do this either being logged in or as guest. If you create the chart as guest, you can add it to your collection later by signing up for free.
4. Now paste the data into the big text area in Datawrapper. Click Upload and continue to proceed to the next step.

Check and Describe the Data

1. Check if the data has been recognized correctly. Things to check for are the number format (in our example the decimal separator , has been replaced with .). Also check wether the row and column headers have been recognized.
2. Change number format to one decimals after point to ensure the data is formatted according to your selected language (e.g. decimal comma for France).
3. Now provide information about the data source. The data has been published by Eurostat. Provide the link to the dataset as well. This information will be displayed along with the published charts, so readers can trace back the path to the source themselves.

4. Click Visualize to proceed to the next step.

Selecting a Visualization

1. Time series are best represented using line charts, so click on the icon for line chart to select this visualization.
2. Give the chart a title that explains both what the readers are seeing in the chart and why they should care about it. A title like "Youth unemployment rates in Europe" only answers half of the question. A better title would be"Youth unemployment divides Europe" or "Youth unemployment on record high in Greece and Spain"
3. In the introduction line we should clarify what exactly is shown in the chart. Click Introduction and type "Seasonally adjusted unemployment rates of under 25 aged". Of course you can also provide more details about the story.
4. Now highlight the data series that are most important for telling the story. The idea is to let one or two countries really pop out of the chart, and attract the readers attention immediately. Click Highlight and select Greece and Spain from the list. You might also want to include your own country for reference.
5. Activate direct labeling to make it easier to read the chart. Also, since our data is already widely distributed, we can force the extension of the vertical axis to the zero-baseline.
6. We can let the colors support the story by choosing appropriate colors. First, click on the orange field to select it as base color. Then click on define custom colors and pick red for high unemployment countries Greece and Spain. For countries with low youth unemployment such as Germany, Norway and Austria we can pick a green, or even better, a blue tone (to respect the color blind). Now the resulting chart should look like this:

7. Click Publish to proceed to the last step.

Publishing the Visualization

1. Now a copy of the chart is being pushed to the content delivery network Amazon S3, which ensures that it loads fast under high traffic.
2. Meanwhile you can already copy the embed code and paste it into your newsrooms CMS to include it in the related news article – just like you would do with a Youtube video.

Further tutorials can be found on the Datawrapper website. 

Enjoyed this? Want to stay in touch? Join the School of Data Announce Mailing List for updates on more training activities from the School of Data or the Data Driven Journalism list for discussions and news from the world of Data Journalism.

The following tips are from Gregor Aisch, visualization architect and interactive news developer. We’re delighted he could join us to lead the workshop: “Making Data Visualisations, A survival Guide” here at the International Journalism Festival in Perugia.

Watch the Video

See the slides

Charts

• Avoid 3d-charts at all costs. The perspective distorts the data, what is displayed ‘in front’ is perceived as more important than what is shown in the background.
• Use pie charts with care, and only to show part of whole relationships. Two is the ideal number of slices, but never show more than five. Don’t use pie charts if you want to compare values (use bar charts instead).
• Always extend bar charts to zero baseline. Order bars by value to make comparison easier.
• Use line charts to show time series data. That’s simply the best way to show how a variable changes over time.
• Avoid stacked area charts, they are easily mis-interpreted.
• Prefer direct labeling wherever possible. You can safe your readers a lot time by placing labels directly onto the visual elements instead of collecting them in a separate legend. Also remind that we cannot differentiate that much colors.
• Label your axes! You might think that’s kind of obvious, but still it happens quite often that designers and journalists simply forget to label the axes.
• Tell readers why they should care about your graphic. Don’t waste the title line by just saying what data is shown.

Color

Colors are difficult. They might make a boring graphic look pretty, but they really need to be handled with care.

• Use colors sparingly. If possible, use only one or two colors in your visualization.
• Double-check your colors for the color blind. You can use tools such as ColorOracle to simulate the effect of different types of color blindness.
• Say good-bye to red-green color scales. A significant fraction of the male population is color blind and have problems differentiating between red and green tones. Use red-blue or purple-green are common alternatives.
• In doubt, use color scales from colorbrewer2.com

Maps

• Don’t use the Mercator projection for world maps. The distortion of area is not acceptable. Use equal-area projections instead.
• Size symbols by area, not diameter. A common mistake is to map data values to the radius of circles. However, our visual system compares symbols by area. Use square root to compute radii from data.

Recommended reading

• Dona Wong: Wallstreet Journal Guide to Information Graphics
• News Apps Style Guide by ProPublica
• Jean-Luc DuMont: Trees, maps, theorems – effective communication for rational minds
• Darrel Huff: How to lie with statistics