Data Visualization User Guide

Datawrapper is a free website allows users to easily create data visualizations including maps, charts, graphs, and tables. This page provides examples of data visualizations made with Datawrapper, tutorials on how those visualizations were made, and general guides on how to use Datawrapper.

Datawrapper Examples and Tutorials

  • Map Example and Tutorial
  • Chart User Guide
  • Graph User Guide

Datawrapper Map Example and Tutorial

Step 1: Cleaning the data

  1. In Microsoft Excel, i removed all the columns of data i didn’t need only leaving total income and total expenditures
    • Before:
    • After:
  2. I organized the data so that the left column labels the region codes for each data row and the top row holds the labels for the data (total income and total expenditures)
  3. The data was already in Microsoft Excel so no conversion needed

Step 2: Selecting my map

  1. This is what the main screen for the Datawrapper map select looks like
  2. Here I will pick the choropleth map (left option)
  3. I will be using a national map separated by region so I will choose the region map
    • There are also options for a national map separated by province and maps for specific regions/provinces/barangays/municipalities

Step 3: Uploading and matching my data

  1. I uploaded my Excel file through the upload file button on the left
  2. My data was organized by region code, so I need to match the data for each region code to the region name
    • Before:
    • After:
  3. Now all the red cells have been resolved and the visualization is ready to be created

Step 4: Setting up the map layout

  1. Refine visualization: I selected the total income (TOINC) column data to display
    • I kept the default color palette and map features options
  2. Annotate the map: I added a title, data source, data link, and creator name.
  3. Choose display layout: I added an embedded link option for the footer
  4. Publish my map
    • I entered my email so that I can share my visualization
    • I received this email in my inbox
    • Now when I press get my visualization or go to datawrapper.com to see my visualization I have several options to share

Datawrapper Chart Example and Tutorial

Step 1: Cleaning the data

  1. In a spreadsheet organize your data by column
    • Ex: remove all data you don’t need, merge all data for one region/province/city into the same cell, etc.
    • Before:
    • After:
  2. I organized the data so that the left column labels the region codes for each data row and the top row holds the labels for the data (total income and total expenditures)
  3. The data was already in microsoft excel so no conversion needed

Step 2: Selecting my chart

  1. At https://www.datawrapper.de/charts after pressing “build your own chart” I upload my own data using the xls/csv upload button
  2. After pressing “proceed” I edit my labels to clearer names and replace any codes/acronyms
    • Ex: TOINC → Total Income, 1 → Ilocos (Region 1)
    • Fix any red cells: Here I changed column A’s value type from number to text by clicking on the table header for that column
  3. Now that the data is ready, click proceed and pick chart type: I chose grouped bars because that most clearly showed the values for total income and expenditures for each region

Step 3: Refining the chart

  1. Refine: After pressing proceed I refined my chart. The only change I made from the default is to move labels to a separate line.
  2. Annotate: After pressing proceed, I added a title, data source, data link, and creator name.
  3. Adjust layout for sharing: After pressing proceed I added share buttons for social media

Step 4: Publishing my chart

  1. I enter my email here to share my visualization
  2. I received an email like this in my inbox
  3. Now when I press get my visualization I have several share options

Datawrapper Line Graph Example and Tutorial

Step 1: Cleaning my Data

  1. In a spreadsheet organize your data by column
    • Ex: remove all data you don’t need, merge all data for one region/province/city into the same cell, etc.
    • Before:
    • After:
  2. I organized the data so that the left column labels the year of each data row and the top row holds the region labels of the data 

Step 2: Selecting my chart

  1. At https://www.datawrapper.de/charts after pressing “build your own chart” I upload my own data using the xls/csv upload button
  2. After pressing “proceed” I edit my data to only include columns I want to show
    • Ex: My graph is only for the Luzon island regions so I click the header for each column I don’t need and press “hide column from visualization”
    • Fix any red cells: Here I all of my data was compatible so no fixed needed
  3. Now that the data is ready, click proceed and pick chart type: I chose lines because that graph type most clearly showed the changes to average family income over time

Step 3: Refining the graph

  1. Refine: After pressing proceed I refined my chart. The changes I made were to make the line colors more distinct, moving the line labels to the top, and to increase the size of the visualization so that each line was more visible.
    • Before:
    • After:
  2. Annotate: After pressing proceed, I added a title, data source, data link, and creator name.
  3. Adjust layout for sharing: After pressing proceed I added share buttons for social media and an embedded link download option.

Step 4: Publishing the map

  1. I enter my email here to share my visualization
  2. I received an email like this in my inbox
  3. Now when I press get my visualization I have several share options