Get the Embed Code or iframe Tag

In this section, you’ll learn how to copy the embed code or iframe tag that is automatically generated when you publish a chart or map on different visualization platforms featured in this book. Remember that embed codes contain the essential iframe tag, along with other bits of code to display the chart or map from the primary site and make it appear seamlessly on the secondary site.

We’ll break this down into three steps for each visualization platform. First, we will demonstrate how to copy your embed code or iframe tag from Google Sheets, Datawrapper, Tableau Public, and other platforms listed below. Second, we’ll show you how to practice paste the embed code or iframe tag into the W3Schools TryIt iframe page, as shown in Figure 10.3, to help you understand what’s happening behind-the-scenes and to modify the code if needed. Third, we’ll point you to the next section to learn how to properly paste the embed code in your preferred website, such as WordPress [and others TODO].

For each embed code below, you will practice paste it in place of the selected text of the W3Schools TryIt iframe page to see how it works.

Figure 10.3: For each embed code below, you will practice paste it in place of the selected text of the W3Schools TryIt iframe page to see how it works.

from Google Sheets

  1. After you create a Google Sheets chart in Chapter 7, click the 3-dot kebab menu in the upper-right corner of the chart to publish it, as shown in Figure 10.4.
In your chart, click the three-dot kebab menu to publish it.

Figure 10.4: In your chart, click the three-dot kebab menu to publish it.

  1. In the next screen, select the Embed tab and Interactive chart, and click the Publish button to share it online. Select and copy the embed code, as shown in Figure 10.5.
Click Embed and Interactive and Publish, then select and copy the embed code.

Figure 10.5: Click Embed and Interactive and Publish, then select and copy the embed code.

  1. To better understand how the embed code works, open the W3Schools TryIt iframe page. Select the current iframe tag, paste in your embed code to replace it, and press the green Run button. The result should be similar to Figure 10.6, but instead will display your embed code and interactive visualization.
Paste your Google Sheets embed code to place of the current iframe tag in the TryIt page and click Run.

Figure 10.6: Paste your Google Sheets embed code to place of the current iframe tag in the TryIt page and click Run.

At first glance, the Google Sheets embed code may appear long, but it’s actually a straightforward iframe tag with a long source link. Look closely and you’ll see iframe settings such as width and height (measured here in pixels), and seamless and frameborder='0' and scrolling='no' to improve its appearance.

  1. Now jump to the paste code to website section of this chapter to learn how to properly insert your embed code into your preferred platform.

from Datawrapper

  1. After you create a Datawrapper chart in Chapter 7 or map in Chapter 8 or interactive table in Chapter 9, proceed to the final screen and click the Publish button, as shown in Figure 10.7. This publishes the interactive version of your chart or map online. Further down on the same screen you can also export a static image, if desired.
Proceed to the final screen and click the Publish button.

Figure 10.7: Proceed to the final screen and click the Publish button.

  1. On the next screen, click copy to get the Datawrapper embed code, as shown in Figure 10.8. The default responsive iframe version of the embed code contains additional instructions to improve its appearance on both small and large device screens.
Copy the responsive iframe version of the Datawrapper embed code.

Figure 10.8: Copy the responsive iframe version of the Datawrapper embed code.

  1. To better understand how the embed code works, open the W3Schools TryIt iframe page. Select the current iframe tag, paste in your embed code to replace it, and press the green Run button. The result should be similar to Figure 10.9, but instead will display your embed code and interactive visualization.
Paste your Datawrapper embed code in place of the current iframe tag in the TryIt page and click Run.

Figure 10.9: Paste your Datawrapper embed code in place of the current iframe tag in the TryIt page and click Run.

The Datawrapper embed code is long, but if you look closely, the first half contains a relatively straightforward iframe tag that includes familiar-looking attributes such src,scrolling, and frameborder, and width and height inside a style tag. The second half of the embed code contains JavaScript instructions to make the iframe appear responsive depending on the size of the device screen.

  1. Always try to paste the full embed code in your desired web platform. Jump to the paste code to website section of this chapter to learn how to properly insert your embed code into common websites.

  2. But if it doesn’t work, go back to step 3 and experiment. Try to edit the embed code down to a simple iframe, and run it again to see how it looks, as shown in Figure 10.10. Sometimes a simple iframe works better on your website than a complex embed code.

If a complex embed code does not work in your website, go back and try to edit it down into a simple iframe.

Figure 10.10: If a complex embed code does not work in your website, go back and try to edit it down into a simple iframe.

Hint: The Datawrapper iframe tag source follows this general format: https://datawrapper.dwcdn.net/abcdef/1/, where the 1 refers to the first version of the chart or map you published. If you make edits and re-publish your visualization, Datawrapper will increase the last digit (to 2 and so forth), and automatically redirect older links to the current version, which keeps your work up-to-date for your audience.

from Tableau Public

  1. After you create a Tableau Public chart in Chapter 7 or map in Chapter 8, publish your worksheet, dashboard, or story online by selecting File > Save to Tableau Public in the desktop application menu, as shown in Figure 10.11.
In the Tableau Public desktop application, select File–Save to Tableau Public to publish to the online server.

Figure 10.11: In the Tableau Public desktop application, select File–Save to Tableau Public to publish to the online server.

  1. In your online Tableau Public account profile page, click to View the details of any of your published visualizations, as shown in Figure 10.12.
In your Tableau Public online profile page, click to View the details of a published visualization.

Figure 10.12: In your Tableau Public online profile page, click to View the details of a published visualization.

Tip: All of your published visualizations appear under your username account profile on the Tableau Public server. If you don’t recall your username, search the Tableau Public server for your first and last name that you entered when creating your online account.

  1. When viewing details for a published visualization in your Tableau Public online account, scroll down and click on the Share symbol in the lower-right corner. Select and copy its embed code, as shown in Figure 10.13.
Scroll down in the online published visualization details, click the Share button, and copy the embed code.

Figure 10.13: Scroll down in the online published visualization details, click the Share button, and copy the embed code.

  1. To better understand how the embed code works, open the W3Schools TryIt iframe page. Select the current iframe tag, paste in your embed code to replace it, and press the green Run button. The result should be similar to Figure 10.14, but instead will display your embed code and interactive visualization.
Paste your Tableau public embed code in place of the current iframe tag in the TryIt page and click Run.

Figure 10.14: Paste your Tableau public embed code in place of the current iframe tag in the TryIt page and click Run.

The Tableau Public embed code is very long and does not fit in one image. Even we don’t fully understand what’s happening in this complex batch of code.

  1. Always try to paste the full embed code in your desired web platform. Jump to the paste code to website section of this chapter to learn how to properly insert on different common websites.

  2. But if it doesn’t work, go back to step 3 and 4 and experiment. For example, you can copy the Tableau Public link to your visualization, instead of the embed code, try to convert it into a simple iframe tag, and run it again to see how it looks.

Here’s some hints from the Tableau Public support page when trying to create iframes from links like this example:

https://public.tableau.com/views/CTSchoolDistrictsbyIncomeandGradeLevels2009-13/Sheet1?:language=en&:display_count=y&:origin=viz_share_link

  1. Paste the link into the W3Schools TryIt page, and delete all of the code that appears after the question mark (?), so that it looks like this:

https://public.tableau.com/views/CTSchoolDistrictsbyIncomeandGradeLevels2009-13/Sheet1?

  1. At the end, attach this code snippet to replace what you deleted above:

:showVizHome=no&:embed=true

  1. Now your edited link should look like this:

https://public.tableau.com/views/CTSchoolDistrictsbyIncomeandGradeLevels2009-13/Sheet1?:showVizHome=no&:embed=true

  1. Enclose your edit link inside an iframe source tag src= with quotes, to make it look similar to this:

src="https://public.tableau.com/views/CTSchoolDistrictsbyIncomeandGradeLevels2009-13/Sheet1?:showVizHome=no&:embed=true"

  1. Add iframe start and end tags, and also attributes for width, height, seamless, frameborder="0", and scrolling="no", to make it look similar to this:

<iframe src="https://public.tableau.com/views/CTSchoolDistrictsbyIncomeandGradeLevels2009-13/Sheet1?:showVizHome=no&:embed=true" width="90%" height="500" seamless frameborder="0" scrolling="no"></iframe>

Hint: Insert width="90%", rather than 100%, to help readers to scroll more easily down your web page with a margin.

  1. Press Run to see how it looks, as shown in Figure 10.15. Sometimes a simple iframe works better on your website than a complex embed code.
If a complex embed code does not work in your website, go back and copy the link to the visualization, and try to convert it into a simple iframe.

Figure 10.15: If a complex embed code does not work in your website, go back and copy the link to the visualization, and try to convert it into a simple iframe.

Now that you have a better sense of how to copy embed codes, and edit them down to simple iframes if needed, in the next section you’ll learn how to paste them into common websites such as WordPress.