How To Insert a Bokeh Plot

Authorea Help

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

Let us first create a simple plot with Bokeh. The source code (adapted from Bokeh's documentation) 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 typing python in a terminal. This creates an HTML file named simple-plot.html.

The figure can then be simply 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, e.g. called 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 , 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.