In science we do many, many plots, and a lot of the time our text just describes the plots we made. So making good plots is essential for us.
In another (ancient) time a plot was just a static image representing numerical data. Time has passed and we humans have evolved, and nowadays plots are usually digital images, for example embedded in PDF documents. This jump in technology from paper to digital images allowed us to produce much more plots for visualizing our data and to share and to store them much easier. However, it is a pity to keep plots as simple static images when we have at our disposal things like this:
As you can see, the previous plot is interactive. You can zoom into the region with the red box where the signal rises, you can pan it, etc. And if you want an image, just take a screenshot. So, a plot can be much more than just an image nowadays.
In this post I share (and keep the record for myself on) how to embed one of these interactive plots made with plotly inside a WordPress site. Amazingly, despite the popularity of both plotly and WordPress, I did not found any “Embed Your Plots for Dummies” tutorial. But after some trial and error I came out with a solution for this.
How to embed the plots
I am using the solution number 3 posted in this website.
- Produce an HTML file with your plot using plotly. (This is not explained in this tutorial.)
- Upload the HTML file (i.e. the plot) to a GitHub repo. In my case I uploaded this file.
- Add a “custom HTML” block in your WordPress post with the following content
<iframe src="https://htmlpreview.github.io/?<LINK TO YOUR PLOT IN GITHUB>" width="100%" height="800"></iframe>As an example for the post shown above, which is hosted here, the code is
<iframe src="https://htmlpreview.github.io/?https://github.com/SengerM/html-github-hosting/blob/main/201120%2037th%20RD50%20Workshop/Signal%2001191-B.html" width="100%" height="800"></iframe>Note that this solution requires no plugin at all and you can customize some stuff like the width and the height for example.
How to embed the plots (old, not working anymore)
As of 22.March.2021 this stopped working. I leave it here just in case.
I combined the Advanced iFrame plugin with GitHub and with this answer. And finally it worked! The steps I followed were
- Produce an HTML file with your plot using plotly. (This is not explained in this tutorial.)
- Upload the HTML file (i.e. the plot) to a GitHub repo. In my case I uploaded this file.
- Install the Advanced iFrame plugin in your WordPress site.
- In your WordPress post insert a “shortcode block” with the following content:
[advanced_iframe src="https://htmlpreview.github.io/?<LINK TO YOUR HTML FILE IN GITHUB>"]where <LINK TO YOUR HTML FILE IN GITHUB> is just that. For example in my case the HTML code inserted in WordPress looks like this:
[advanced_iframe src="https://htmlpreview.github.io/?https://github.com/SengerM/html-github-hosting/blob/main/201120%2037th%20RD50%20Workshop/Signal%2001191-B.html"]Now it is done. Preview your WordPress post and enjoy your interactive plot.