WORKING DRAFT authorea.com/9681
Main Data History
Export
Show Index Toggle 11 comments
  •  Quick Edit
  • 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 simple-plot.py 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 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.