{"id":118,"date":"2018-05-01T18:50:12","date_gmt":"2018-05-01T18:50:12","guid":{"rendered":"https:\/\/integrations.pressbooks.network\/oersourcebook\/chapter\/plot-ly-embed\/"},"modified":"2019-12-03T15:10:42","modified_gmt":"2019-12-03T15:10:42","slug":"plot-ly-embed","status":"publish","type":"chapter","link":"https:\/\/integrations.pressbooks.network\/oersourcebook\/chapter\/plot-ly-embed\/","title":{"raw":"Plot.ly Embed","rendered":"Plot.ly Embed"},"content":{"raw":"

Embed Plot.ly Visualizations<\/h1>\nPlot.ly is an open-source<\/a>\u00a0visualization 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<\/a>\" or \"Getting Started in Plot.ly for Python<\/a>.\"\n\nOnce 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:\n
\n
<iframe width=\"900\" height=\"800\" frameborder=\"0\" scrolling=\"no\" src=\"URL HERE\"><\/iframe><\/pre>\n<\/div>\nTo 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.\n
Change the default width element to allow for dynamic resizing<\/h2>\nOne other thing you can do to improve\u00a0your 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:\n
\n
<iframe width=\"100%\"<\/strong> height=\"800\" frameborder=\"0\" scrolling=\"no\" src=\"URL HERE\"><\/iframe><\/pre>\n<\/div>\n \n
<\/pre>\n