How to embed visualizations

Once you hit the big blue "Publish" button in step 4: Publish of the map, table, or chart creation process, you'll see this:

In this article, we will explain these options in detail and answer some questions you might have:

  1. Link to your visualization
  2. Copy embed code

Here you have two options: " Visualization only" and "For sharing." You can use these URLs to share your charts easily or to embed them in specific platforms.

Choose "Visualization only" if you want to share a fullscreen version of your chart, or to embed it certain other platforms. If you view this link directly in your web browser, the chart will probably look stretched. Example: https://datawrapper.dwcdn.net/t4fiQ/3/.

Use this link when embedding charts on platforms like Medium, WordPress, Google Sites, or Microsoft Powerpoint.

Choose "For sharing" if you want to link to a page on which the chart appears in exactly the dimensions you chose for it. That's great for social media or for showing the chart to a co-worker by email. Example: https://www.datawrapper.de/_/t4fiQ/

You will notice that the "Visualization only" links show a trailing number, like the 3 here: https://datawrapper.dwcdn.net/t4fiQ/3/. This is the versioning number. Every time you hit "Republish," this number increases by one.

However, the chart is the same in all versions. The link datawrapper.dwcdn.net/t4fiQ/3/ shows the same chart as datawrapper.dwcdn.net/t4fiQ/2/ or datawrapper.dwcdn.net/t4fiQ/. They all forward eventually to the latest version of the chart, which in our case is datawrapper.dwcdn.net/t4fiQ/3/.

Share or embed the version-numbered chart URL if you want to make sure that users on your website see the latest version of your chart immediately. Why? Because if someone has opened your article before and you haven't updated the chart URL version, they might see an outdated ("cached") version of the chart. Also, it might take a small amount of time on our site to update the chart at all of its URLs.

Copy embed code

Here you have three options: "Embed with script," "Responsive iframe," and "Iframe."

  • Choose "Embed with script (recommended)" if you want readers to see a version of the chart that's adapted to their screen size, with fast performance using the Web Components standard. You can read more about script embeds and their advantages on our blog. Here's an example of how your chart will adapt for different screen sizes:

  • Choose "responsive iframe" for similarly responsive sizing when Web Components are not supported — for example, if your CMS does not allow custom JavaScript tags. If you're embedding many charts on the same page, using iframes may cause the page to load more slowly.
  • Choose "iframe" if your CMS doesn't allow you to embed iframes with any JavaScript scripts attached (but beware that your charts won't be responsive, meaning they might look cut-off or not fit the full width of the screen). The chart will have the width and height you choose in the preview.If you change the size of your chart, paste the updated embed code into your article or CMS.

If you’re embedding multiple visualizations on one page, we recommend that you  publish or republish them all around the same time. This will keep all your charts looking consistent and up-to-date.

If you're interested in the details, this is how the plain iframe looks for our chart:

<iframe title="Presidential Approval Ratings Since Kennedy" aria-label="Interactive line chart" id="datawrapper-chart-t4fiQ" src="https://datawrapper.dwcdn.net/t4fiQ/3/" scrolling="no" frameborder="0" style="border: none;" width="600" height="578"></iframe>

The responsive iframe is like the iframe but has a script attached. Here's what that looks like:

<iframe title="Presidential Approval Ratings Since Kennedy" aria-label="Interactive line chart" id="datawrapper-chart-t4fiQ" src="https://datawrapper.dwcdn.net/t4fiQ/3/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="578"></iframe>

<script type="text/javascript">!function(){"use strict";window.addEventListener("message",(function(e){if(void 0!==e.data["datawrapper-height"]){var t=document.querySelectorAll("iframe");for(var a in e.data["datawrapper-height"])for(var r=0;r<t.length;r++){if(t[r].contentWindow===e.source)t[r].style.height=e.data["datawrapper-height"][a]+"px"}}}))}();
</script>

Each iframe is like its own small self-contained webpage. Script embeds save computing resources by integrating your visualization directly into the page:

<div>
   <script type="text/javascript" defer 
        src="https://datawrapper.dwcdn.net/b3TBj/embed.js?v=14">
   </script>
   <noscript>
      <img src="https://datawrapper.dwcdn.net/b3TBj/full.png" alt="[aria-description]" />
   </noscript>
</div>

Related Articles