Bokeh is a Python library for interactive data visualization. It allows you to create interactive plots for the web. For example, one can zoom in, select some of the data points, etc. These plots can then be included directly in Authorea articles.

Let us first create a simple plot with Bokeh. The source code is adapted from Bokeh's documentation and can be found here. Note that we set the size of the plot with p.plot_width = 500 and p.plot_height = 500. This is needed to display the figure properly in Authorea.

The next step is to run the code by entering python simple-plot.py, in a terminal. This creates an HTML file named simple-plot.html.

The figure can then be included with the following steps:

Step 1: From the folder view (folder icon in top sidebar), navigate to the figures folder and create a new folder, e.g., called js, and in it a new file, called e.g. js.html
Step 2: Insert the Javascript code of the Javascript visualization in the file you created. Note: for security reasons, you have to include all your data and CSS in the JS file or load it from URLs on https. Also- please load all d3 and related resources from CDNs on secure sites (https)
Step 3: Click on QuickEdit in the top bar, select layout.md, and add the path to your figure, e.g. figures/js/js.html
Step 4: Go back to your main view. You’re done! Your viz should now magically appear in the document

Although this looks promising, there are a few limitations:

Figures in HTML format do not behave like figures in other formats (PDF, PNG, etc.). They cannot be re-sized, and they don't accept figure captions
The figures are quite large. This is because the HTML file contains the BokehJS library. The file size can be reduced dramatically (12 Kb) by passing the mode = "cdn" to the output_file() function. However, plots created with option do not display properly in Authorea, probably because of security issues
The figure are not correctly exported to e.g. PDF, because LaTeX can't handle HTML files
Was this article helpful?
Thank you!