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 see this:
In this article, we will explain these options in detail and answer some questions you might have:
Link to your visualization
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 in another platform. If you view this link directly in your web browser, the chart will probably look stretched. Example: https://datawrapper.dwcdn.net/t4fiQ/3/.
Choose "For sharing" if you want to link to a page on which the chart appears with your chosen height and width. That's great for social media or for showing the chart to a co-worker before embedding it. 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 "Re-publish," 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 the link datawrapper.dwcdn.net/t4fiQ/2/ or the link 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 had opened your article before and you did not update the chart URL, 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 two options, "responsive iframe" and "iframe."
- Choose "responsive iframe" (recommended), if you want readers to see a version of the chart that is adapted to their screen size. The chart will take up the width of its parent container where it's embedded.
Here's an example: On a mobile phone, the headline normally breaks into two or more lines, taking up more space within the iframe. The responsive iframe will become taller to avoid squeezing or cutting off the rest of your chart. - Choose "iframe" if your CMS doesn't allow you to embed iframes with 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 from the preview. If you change the size of your chart, paste the updated embed code into your article or CMS.
If you're interested in the details: The responsive iframe is like the iframe but has a script attached. 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>
And here's what the responsive iframe 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>
- For more details on responsive iframes, visit "Responsive iframe" in our developer docs.
- You can also customize your own embed code template. To learn how to do this, visit "Custom embed code" in our developer docs.
- Is your chart getting cut off? For troubleshooting iframes, read our academy article "My embedded charts are cut off or have too much space underneath."