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.
Also, you capture a static image of any web page on your computer by taking a screenshot with these built-in commands:
- Chromebook: Press key combination Ctrl + Shift + F5 for rectangular select tool.
- Macintosh: Press key combination Shift + Command + 4 then click-and-drag the cross-hair capture tool.
- Windows: Press key combination Windows key + Shift + S to call up the Snip & Sketch tool.
An animated GIF file is a series of static images that captures motion on the screen. You can insert an animated GIF 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 10.2.
Sometimes embed codes or their iframe tags are much longer than the simple example above. For example, an iframe tag might include other attributes, such as
height, measured in pixels (
px) or a percentage of its dimensions on the secondary site. Also, you may see other iframe tag elements, such as
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.
TODO above: confirm the screenshot commands for non-Mac platforms and if they are the simplest versions, and if older Windows commands are still needed