Embed Plot.ly Visualizations

Plot.ly is an open-source visualization tool that allows users who work with R and Python to produce embeddable, interactive graphs to incorporate into web pages. For set-up information, visit “Getting Started in Plot.ly for R” or “Getting Started in Plot.ly for Python.”

Once you have set up your account and produced a visualization, you can use the embed codes that Plot.ly provides. Your source code will include a pair of iframe tags that look like this:

<iframe width="900" height="800" frameborder="0" scrolling="no" src="URL HERE"></iframe>

To put a Plot.ly graph in your book, switch from the ‘Visual’ to the the ‘Text’ editor and paste this embed code wherever you’d like the Plot.ly visualization to appear.

Change the default width element to allow for dynamic resizing

One other thing you can do to improve your viewers’ reading experience is to remove the “width” element in the text. (This will allow the image to adjust to the size of the reader’s screen.) Simply change the [ width=”number” ] element to width=”100%”. Using the example above, your embed code would now read:

<iframe width="100%" height="800" frameborder="0" scrolling="no" src="URL HERE"></iframe>