Executable Books
Bokeh in figures with glue #346
Replies: 4 comments 15 replies
-
|
Hmmm, that is a good question, I think your intuition is right but perhaps @chrisjsewell has a better idea...you might be the first person that has tried this 🙂 |
Beta Was this translation helpful? Give feedback.
-
|
It is possible to do this by directly using the import numpy as np
from bokeh.plotting import figure
from IPython.display import display as ipy_display
from bokeh.embed import components
import xml.etree.ElementTree as ET
np.random.seed(19680801)
N = 10
data = np.linspace(1, 10, 10)
p = figure()
p.circle(data, data)
script, div = components(p)
mime_prefix = "application/papermill.record/"
data = ET.fromstring(script)
htmlbundle = {mime_prefix + "text/html": div}
jsbundle = {mime_prefix + "application/javascript": data.text}
htmlmeta = {"scrapbook": dict(name="bokeh_html", mime_prefix=mime_prefix)}
jsmeta = {"scrapbook": dict(name="bokeh_js", mime_prefix=mime_prefix)}
ipy_display(htmlbundle, raw=True, metadata=htmlmeta)
ipy_display(jsbundle, raw=True, metadata=jsmeta)
# ```{glue:figure} bokeh_html
# :name: bokeh_figure
#
# Caption
# ```
# ```{glue:} bokeh_js
# The hangup is adding the Javascript to load the Bokeh library to the HTML somewhere. I also want to look at the |
Beta Was this translation helpful? Give feedback.
-
|
So Including the Bokeh JS files can be done by putting them in the |
Beta Was this translation helpful? Give feedback.
-
|
Building on the previous approach, I added a This change adds the The Bokeh figure components are returned as strings from the components This approach seems to be fairly robust, insofar as the figure is pasted
|
Beta Was this translation helpful? Give feedback.
-
Thanks @choldgraf! I'm still working on the code, but I'm happy to either raise this as an issue or a real PR over at MyST-NB for further feedback. |
Beta Was this translation helpful? Give feedback.
-
|
I pushed an update to bryanwweber/MyST-NB#1 that moves all the glueing code into the single |
Beta Was this translation helpful? Give feedback.
-
Something interesting from Bokeh itself to manage optional and required dependencies: https://github.com/bokeh/bokeh/blob/main/bokeh/util/dependencies.py Just adding one more point to the discussion 😉 . |
Beta Was this translation helpful? Give feedback.
-
|
Interesting, thanks for sharing @damianavila . I'm curious why there's the import for required modules. Are there many users that do not install bokeh in a standard way? |
Beta Was this translation helpful? Give feedback.
-
|
There are multiple Bokeh examples using some 3rd party libraries and those are required by the examples to run but not required for Bokeh to run: https://github.com/bokeh/bokeh/blob/main/bokeh/sampledata/airports.py#L59 |
Beta Was this translation helpful? Give feedback.
-
|
Another approach here: bryanwweber/MyST-NB#2 In this one, I glued the JSON output from Bokeh and inserted HTML/Javascript nodes by using a specific mimetype for this data. |
Beta Was this translation helpful? Give feedback.
-
|
The advantage of this approach is that it works transparently with figures with no other changes 🎉 |
Beta Was this translation helpful? Give feedback.
-
|
I'm happy with the approach here, so I made a PR to the upstream: executablebooks/MyST-NB#335 |
Beta Was this translation helpful? Give feedback.
-
Hi everyone! I'd like to be able to
glueBokeh graphs into afigureso that I can reference them in the text. Using the recommendation here: https://jupyterbook.org/interactive/interactive.html#bokeh of Bokeh'soutput_notebook()setup function, trying to do:and
just shows the
reprof thefigure()instance, something likeFigure(id='1002', ...).In looking at the implementation of
glueinmyst_nb.nb_glueand the related IPython classes, it seems like the Bokeh figure might have to implement something like__repr_svg__or similar. At the moment, the mimebundle only includestext/plainandtext/html. Is that correct, or is there something that Jupyter Book can do to be able to glue Bokeh plots into figures?Beta Was this translation helpful? Give feedback.
All reactions