Interactive HTML figures direct bokeh div directly

[syntonym]

Hey LaurentRDC!

I'm trying out the new feature to include bokeh interactive plots and run into the problem that the dimensions of the embedded figure are hardcoded to 600x600 px. If I understand correctly the main reason is the usage of the embed tag to embed the entire HTML document created by bokeh. For bokeh this is not necessary, it can generate a script and a div tag that can be embedded in any html file (documentation). This way no embed tag needs to be used, no dimensions need to be hardcoded and the resulting html file is standalone (currently plots are stored in plots/).

I'm not sure how the situation looks for plotly. I couldn't find a solution with a quick google search, but I'm pretty sure it should be possible. Alternatively one could only use the embed tag for plotly but use the div tag for bokeh.

I would provide and example implementation, but unfortunately I'm not well versed in haskell.

Best,
syntonym

[LaurentRDC]

Hello,

I hardcoded the dimensions to 600x600 because in my testing, my bokeh plots were super small. This is a temporary measure that should be fixed before release 1.0.0.

Currently, bokeh plots are saved as HTML using the following scheme:

# Plotting happens here (...)

from bokeh.io import export_png, export_svgs, save
from bokeh.models import Plot
from bokeh.resources import INLINE

__current_plot = next(obj for obj in globals().values() if isinstance(obj, Plot))
save(__current_plot, filename=(...), resources=INLINE)

I can try to remove the size restriction, and follow the documentation that you have linked.

[LaurentRDC]

I have been looking at solutions that are not bokeh-specific, such as:

• Detecting content size of an <iframe> tag via javascript and resizing to remove the scrollbar;
• Embedding HTML directly;
• CSS tricks;

All of the above solutions are unsatisfactory at this moment. Most frustratingly, one cannot use javascript to change the size of an iframe based on its internal content, for security reasons.

I will keep thinking about it, and I welcome suggestions.

[LaurentRDC]

After some thought, I think that the best way forward is to create a separate html file per plot (that's what we're doing now), and parse this html to embed directly in the main html file. Most of the complexity will be that parsing requires to separate html files into head-content and body-content.

[LaurentRDC]

Done :) You can take a look at the result on the demo page

While your suggestion would have worked well for Bokeh and Plotly-Python, it was not possible to do this for the Plotly-R toolkit. That toolkit only generates full, self-contained HTML pages. Therefore, I've opted for a more general approach of parsing HTML files and embedding the content.

I'll try to release a new version soon so you can try it out and let me know what you think. Then we can iron out the kinks if there are any.

[LaurentRDC]

pandoc-plot 0.8.1.0 is live with this change.

[syntonym]

I've tested version 0.8.1.0 with bokeh and it works great! Thanks for the super quick changes!

By the way I have put a PKGBUILD for pandoc-plot on the archlinux user repository to make it easier installable on arch linuxhttps://aur.archlinux.org/packages/pandoc-plot-bin/ .

[LaurentRDC]

Thank you for making a package!

I'm not familiar with Arch Linux. What are the installation instructions? Is it something like sudo pacman -S pandoc-plot-bin?

[syntonym]

pacman is only for the official repository, but not for the user repository. As that is inofficial there is no offical way to install packages from it, but most people use yay:

yay -S pandoc-plot-bin

Most people should know how to install it when you write that it's available in the AUR as pandoc-plot-bin.