#StandWithUkraine - Stop the Russian invasion

Join us and donate. We are contributing all book royalties from 2022 to present to:
Save Life in Ukraine and Ukraine Humanitarian Appeal.

Static Image vs Interactive iframe

First, let’s clarify the difference between static versus interactive visualizations. A static picture of a chart or map is a frozen image. Many visualization tools allow you to download static images of your charts or maps in .JPG or .PNG or .PDF format. Static images are useful when that’s all that you want to insert in a document, a presentation slide, or even a web page. Another option is to paste a static image, and add a link or custom shortlink with the web address to an interactive chart or map, and invite audiences to explore it online.

If you need to capture a static image of any web page on your computer, take a screenshot with these built-in commands:

  • Chromebook: Shift + Ctrl + F5 (the show windows button), then click-and-drag the cross-hair cursor.
  • Macintosh: Shift + Command + 4, then click-and-drag the cross-hair cursor to capture screenshot.
  • Windows: Windows logo key + Shift + S to call up the Snip & Sketch tool.

A related strategy is an animated GIF, which is a series of static images that captures motion on the screen. You can insert an animated GIF file on a web page to illustrate a short sequence of steps while using an interactive visualization, but audiences cannot interact with it, other than to play the animated loop over again. Paid software tools such as Snagit allow you to create screenshots including drop-down menus and cursors, animated GIFs, and more.

By contrast, interactive visualizations allow audiences to directly engage with your data story through their web browsers. Visitors usually can float their cursor over a chart to view tooltips or underlying information, or zoom into a map and pan around, or search terms or sort columns in an interactive table. Interactive visualizations are usually hosted online, such as a chart or map tool platform, and are primarily designed to be viewed online, though in some cases it’s possible for you to download and interact with them on your local computer.

Now let’s turn to the central question: how can we make an interactive visualization, which resides on its online host (the primary site), appear seamlessly on a different website that we control (the secondary site)?. While it’s possible to insert a link on our secondary site to the charts or maps on the primary site, that’s inconvenient for our audiences because it requires them to click away from the web page they were reading. A better solution is to insert an embed code that usually contains an iframe tag, written in Hypertext Markup Language (HTML), the code that displays content inside our web browsers. While you don’t need any coding experience, you’ll benefit in the long run by learning how to recognize the core features of an embed code and how it works.

In its simplest form, an iframe instructs the secondary site to display a web page address from the primary site, known as the source, as if it were a seamless picture frame on the wall of a room. The sample iframe code below begins with a start tag <iframe ... >, which contains the source src='https://...' with either single- or double-quotes around the primary site URL, then concludes with an end tag </iframe>. This sample iframe refers to an interactive US income inequality chart on the Datawrapper platform, which first appeared in the Introduction to this book, as shown in Figure 9.2.

<iframe src='https://datawrapper.dwcdn.net/LtRbj/'></iframe>

Figure 9.2: Depending on the format of your book, if a static chart appears above, you can also view the interactive version.

When you copy an embed code from some of the visualization tools featured in this book, their iframe tags may be much longer than the simple example above. For example, an iframe tag might include other attributes, such as width or height, measured in pixels (px) or a percentage of its dimensions on the secondary site. Also, you may see other iframe tag attributes, such as frameborder="0" or scrolling="no", which create a seamless appearance between the iframe content and its surroundings. Finally, you may see really long embed codes that contain a dozen or more lines of code that even we don’t fully understand. That’s okay, because all of these are optional add-ons to improve the appearance of the iframe in the secondary site. The most essential ingredient of an embed code is the iframe and its three core parts: the iframe start tag, source web address, and end tag. When in doubt, look for those key ingredients.

Now that you have a clearer definition of an interactive visualization, embed codes, and iframe tags, in the next section we’ll learn how to copy the embed code from different visualization platforms.