How can you embed interactive charts, tables & maps into Medium?

To learn how to embed charts, maps and tables into your Medium articles, scroll down to the second part of the article.

1 Examples of embedded charts and maps

This article shows how Datawrapper charts and maps behave in a Medium article. Try to hover over the graphics to see the underlying data points. Also check out this article on your mobile phone, too, to understand how Datawrapper graphics are responsive.

Scatterplots are great to show the correlation between two (or more!) variables. Like between ice cream consumption and happiness. Or between Datawrapper usage and beautiful charts. Hans Rosling from Gapminder became famous with this kind of chart (watch this 2007 TED talk to get convinced!), showing long-term global developments.

Line charts are great to show developments over time. They’re especially helpful when labeled directly, like the country labels on the chart to the right.

Locator maps are great to show where something is located or happened, e.g. events within a city. These responsive maps are perfect for putting the places you mention in a story in context. Simply set markers, style them and define a text.

Choropleth maps color regions according to values in your dataset. They’re great to show clear regional patterns. The map to the right is a choropleth cartogram: The squares are sized according to a country’s population.

2 How to embed Datawrapper charts

In this second part of the article, you’ll learn how to embed interactive, responsive Datawrapper charts into Medium articles.

Datawrapper is an online charting & mapping tool. It’s simple to use – all you need is data. You can create & embed graphics for free on datawrapper.de

After creating your chart or map, publish it in Datawrapper step 4: Publish & Embed. To publish, click the big blue button here that says “Publish chart”. Once the graphic is published, you get some Share & Embed options.

To embed a chart into our Medium article, we need the “fullscreen” link. Click on it, and the chart will open in a new tab.

Then, copy the URL, like so:

Now, go to your Medium article. Every time you hit Enter in Medium, a little plus sign appears to the left. Now that you see the plus sign, paste the link you just got from Datawrapper and hit enter, and voila:

You got a chart in your Medium article!

If your chart, map or table doesn’t seem to be interactive yet, this is just because the article is still in edit mode. Get a Draft link from Medium (in the top right of the page) and open this in an incognito window, and you’ll see what the article & the chart will look like in the final version.

This article was first published in the Datawrapper Academy.