How to embed interactive COVID-19 charts in your articles

This post explains how you can embed any interactive chart or map from Our World in Data in your writing – you find all COVID-19 charts and maps on one single page here.

It’s simple to embed any of our charts in your article – just as easy as embedding a YouTube video or Tweet in your article.

Before we tell you how to embed any of our many thousands of chart, we want to speak about why we provide this service.

Our goal at Our World in Data is to bring together the best data and build the visualization tools that allows you to understand the spread of the pandemic. Our focus is global – we provide data for all countries in the world.

We are a non-profit: we don’t have ads on our site, and make no money from clicks, views or embeds of our charts. Our goal is to make sure that good data is readily available for everyone in the world. We do our work so that others can build on it, use it and benefit from it. All of this work is free, open-source and provided as a public good.

For everyone who wants to write about the pandemic we provide free interactive visualizations. These are maps and charts that allow users to explore the data. You can customize your own charts and compare any countries you are interested in.

This means you can – and in fact we hope you do – use any of the interactive charts from Our World In Data in your articles. Many are using these tools already and we get a lot of questions regarding permissions, you don’t need to ask permission (here is more info).

How others already use our work

Much of our time is spent verifying data sources and studying the research literature to ensure the information we provide is the best that is available. This makes us a key trusted source for journalists, policymakers and researchers across the world.

Three examples of this:

– The journal The Lancet Infectious Diseases called our site as the “new go-to COVID-19 resource”.

– Our work on COVID-19 is used in academic research publications.

– New York Times journalist Nick Kristof lists us as one of the top-five best resources on COVID-19.

How media outlets embed our COVID-19 visualizations

Journalists from high-quality outlets across the world use our work in reporting on the COVID-19 pandemic. This means we are conscious of keeping these charts online and running. We are careful about broken links too: we make sure that once you embed a chart in your article, it will not disappear.

Here we keep a list of many of the articles that feature our work. Below are three examples of articles that embed OWID visualizations:

– Vox using our charts to compare death rates across countries.

– The Washington Post using our charts to comparing testing rates across countries.

– World Economic Forum using our charts to compare which countries are being successful in ‘flattening the curve’.

Below we provide a short explainer of how you can embed our charts. We hope you find them useful!

Let’s assume you want to write about the latest data on the Coronavirus outbreak and on our COVID-19 page you find this map of confirmed cases that you want to embed in your own article.

Here is how to embed it in your article.

At the bottom of the chart you click on the little share symbol – one dot that connects to two dots. A little menu pops up. There you chose the  </>Embed option and you will see a box (try it!) with the following bit of text:

<iframe src="https://nightingale-owid.netlify.app/grapher/total-cases-covid-19?tab=map" width="100%" height="600px"></iframe>

To embed this map in your article you just take this bit of html code and copy-paste it in your own article.

More information: An iframe is used to display a website within another website – w3schools has more info on iframes.

You can compare any countries you want on line charts

Our World in Data charts can be used to compare any combination of countries you want.

Let’s say you want to embed a chart that compares the confirmed deaths in Spain, Italy, and the US over time.

The first step is to find the chart that shows the data that you are interested in (here is the page with all COVID-19 charts) – there you find the chart that we embedded for you here.

Then you simply adjust the countries you want to show – using the Add country button. Click on it and take away World and add Spain, Italy, and the United States.

Now when you click on </> Embed you get the code to embed this particular line chart you created showing those three countries you want to show to your readers.

<iframe src="https://nightingale-owid.netlify.app/grapher/total-deaths-covid-19?country=ITA+ESP+USA" style="width: 100%; height: 600px; border: 0px none;"></iframe>

You have millions of opportunities to chose other metrics and different combinations of countries – whatever you chose the embed code we give you is the right one to show the reader exactly the chart you want to show them.

You can highlight specific countries on trajectory charts

Are the number of confirmed rising faster in Italy, Spain, South Korea, the UK or the US?

This question can be difficult to answer with line charts because the outbreak started at different times in different countries.

A useful way to look at this data is to use ‘trajectory’ charts – as shown here for confirmed cases. The starting point for each country is the day that particular country had reached 100 total confirmed cases of COVID-19.

With so many countries shown, these charts can get busy, making it difficult to see particular countries. You can pick and highlight any selection you want by using the ‘Select countries’ button on the bottom left of the chart (or clicking on the line).

Here we have selected a range to compare. Now when you click on </> Embed you get this bit of code:

<iframe src="https://nightingale-owid.netlify.app/grapher/covid-confirmed-cases-since-100th-case?country=USA+ESP+ITA+KOR+TWN+GBR+NOR" style="width: 100%; height: 600px; border: 0px none;"></iframe>

This will allow you to embed the chart with these countries highlighted.

As with all charts, you can add and remove any country you like. Chose the ones you want to show to your reader and you can embed exactly that view.

You can zoom into any world region on maps

Many of our charts are shown by default at the latest date or year; with the full world map.

But this is just a starting point; you can customize and make your own maps too.

For example, if you want to focus on Africa you can zoom into the map above (as shown) by clicking on ‘World’ and then selecting a particular world region. Now when you click on </> Embed you get the following bit of code:

<iframe src="https://nightingale-owid.netlify.app/grapher/total-cases-covid-19?tab=map&region=Africa" width="100%" height="600px"></iframe>

If you copy-paste this code your article will embed the map with a focus on Africa.

You can chose the date or year shown on the map

Let’s say you wanted to show the map above for Africa, but on a specific date: 20th March, for example. To do this you can adjust the blue slider at the bottom of the map until you find the correct date.

Now when you click on </> Embed you get the following bit of code:

<iframe src="https://nightingale-owid.netlify.app/grapher/total-cases-covid-19?tab=map&year=59&region=Africa" width="100%" height="600px"></iframe>

You will see that there is now a numeric ‘year’ figure which has been added to the code. This makes sure the interactive chart is shown in your article for that specific date.

Embedding charts on testing for COVID-19

Let’s say you want to show to your readers how countries across the world are comparing on

We think that data on testing for COVID-19 is particularly important. Data on confirmed cases and deaths should be interpreted in light of how much testing a country does. Because a low case count can mean that there are actually few cases, but it can also mean that few cases have been detected, because testing is very limited in that country. We focus much of our current effort on this section on testing for COVID-19.

The charts on testing can be added just in the way we showed above (here is the Washington Post embedding this chart if you want to see an example).

<iframe src="https://nightingale-owid.netlify.app/grapher/full-list-cumulative-total-tests-per-thousand" style="width: 100%; height: 600px; border: 0px none;"></iframe>

We hope this is helpful for you to do the best work you can on this very important topic!

Explore all of our COVID-19 charts