To get started, went to https://jupyterlite.readthedocs.io/en/latest/ in Google Chrome and right-clicked on the 'Lab' button and perhaps chose to 'Open Link in Incognito Window'. (Opening in an incognito window usually makes it so that it won't open my old, busy 'session' on Jupyterlite and include all the old stuff I made. Essentially it often results in a 'fresh session'. I find though it isn't always fresh if you been using incognito mode recently. You can also just start it in a browser you don't often use to get a 'fresh sesion'. )
Also will work in JupyterLite started by going to JupyterLite GitHub Pages Deployment Demo/template and clicking on https://jupyterlite.github.io/demo
below 'Try it in your browser'.
Then dragged in this notebook to the file navigation pane on the left and stepped through running the cells.
This is based primarily on the 'First steps 1: Creating a line chart' page in 'First steps' section of the Bokeh documentation. You may also wish to look at the first half of the 'First steps 7: Displaying and exporting' page of the 'First steps' in the Bokeh documentation, which is entitled 'Creating a standalone HTML file' as I feel it adds more context to the initial route the first step uses.
%pip install bokeh
%pip install xyzservices
%pip install pandas
# based on https://docs.bokeh.org/en/latest/docs/first_steps/first_steps_1.html and
# `output_file()` code used under 'Creating Line Plots' at https://www.datacamp.com/tutorial/Introduction-to-bokeh-tutorial
from bokeh.plotting import figure, show
from bokeh.io import output_notebook, output_file, show
# prepare some data
x = [1, 2, 3, 4, 5]
y = [6, 7, 2, 4, 5]
# create a new plot with a title and axis labels
p = figure(title="Simple line example", x_axis_label="x", y_axis_label="y")
# add a line renderer with legend and line thickness
p.line(x, y, legend_label="Temp.", line_width=2)
# save the result
output_file('line_plot.html')
# show the results - THIS WILL THROW AN ERROR IN JUPYTERLITE MAY 2023 BUT IT WILL ALLOW THE `output_file()` function to run. INEXPLICABLY THE THE `output_file()` function WON'T RUN WITHOUT IT!
show(p)
--------------------------------------------------------------------------- ImportError Traceback (most recent call last) Cell In[2], line 21 18 output_file('line_plot.html') 20 # show the results - THIS WILL THROW AN ERROR IN JUPYTERLITE MAY 2023 BUT IT WILL ALLOW THE `output_file()` function to run. INEXPLICABLY THE THE `output_file()` function WON'T RUN WITHOUT IT! ---> 21 show(p) File /lib/python3.11/site-packages/bokeh/io/showing.py:143, in show(obj, browser, new, notebook_handle, notebook_url, **kwargs) 140 state = curstate() 142 if isinstance(obj, UIElement): --> 143 return _show_with_state(obj, state, browser, new, notebook_handle=notebook_handle) 145 def is_application(obj: Any) -> TypeGuard[Application]: 146 return getattr(obj, '_is_a_bokeh_application_class', False) File /lib/python3.11/site-packages/bokeh/io/showing.py:194, in _show_with_state(obj, state, browser, new, notebook_handle) 191 shown = True 193 if state.file or not shown: --> 194 _show_file_with_state(obj, state, new, controller) 196 return comms_handle File /lib/python3.11/site-packages/bokeh/io/showing.py:176, in _show_file_with_state(obj, state, new, controller) 172 ''' 173 174 ''' 175 filename = save(obj, state=state) --> 176 controller.open("file://" + filename, new=NEW_PARAM[new]) File /lib/python311.zip/webbrowser.py:10, in open(url, new, autoraise) 9 def open(url: str, new: int = 0, autoraise: bool = True) -> None: ---> 10 from js import window 12 window.open(url, "_blank") ImportError: cannot import name 'window' from 'js' (unknown location)
Note that the show(p)
is important here even though it throws an error (ImportError: cannot import name 'window' from 'js' (unknown location)
) as of May 2023.
I found that without that show(p)
line attempting to execute itself,the output_file()
function won't execute and save the HTML version of the output.
(You can prove this to yourself easily. Remove show(p)
and change the file name to save to something unique. Run it and you'll never see the new name of the HTML made. Put it back and it will work.
This I suppose is consistent with the text of step number 6 on the 'First steps 1: Creating a line chart' page in 'First steps' section of the Bokeh documentation, "Finally, use the show() function to generate your graph and open a web browser to display the generated HTML file."
Examine the HTML produced
Now open line_plot1.html
in the file navgiator and toggle to trust the HTML in the upper left of it by clicking on 'Trust HTML', and then it should show the bokeh plot.
Try the tools on the right of the plot. You'll see it is 'interactive' in the sense you can click on the 'Pan' icon (like an intersection of two lines with arrows at the ends) to the upper right side of the plot and click and drag to change the center. Or you can click on the 'Wheel Zoom' icon (like a cartoon eye (?) to the left of a magnifying glass looking) and then use the middle scroll functionality on a mouse to zoom in or out.
pwd
'/drive/pyodide'
We'll use output_notebook()
, covered here in the section of 'Displaying in a Jupyter notebook
' in the second half of the 'First steps 7: Displaying and exporting' page of the 'First steps' in the Bokeh documentation.
# I'm repeating this from above here because those who have used this notebook before may want to skip right to this section and need
# to do the set-up. Having it close by will make it easier.
%pip install bokeh
%pip install xyzservices
%pip install pandas
# based on https://docs.bokeh.org/en/latest/docs/first_steps/first_steps_1.html and
# `output_file()` code used under 'Creating Line Plots' at https://www.datacamp.com/tutorial/Introduction-to-bokeh-tutorial
from bokeh.plotting import figure, show
from bokeh.io import output_notebook, output_file, show
# prepare some data
x = [1, 2, 3, 4, 5]
y = [6, 7, 2, 4, 5]
# create a new plot with a title and axis labels
p = figure(title="Simple line example", x_axis_label="x", y_axis_label="y")
# add a line renderer with legend and line thickness
p.line(x, y, legend_label="Temp.", line_width=2)
# set where to show the result
output_notebook()
# show the results
show(p)
--------------------------------------------------------------------------- ImportError Traceback (most recent call last) Cell In[5], line 21 18 output_notebook() 20 # show the results ---> 21 show(p) File /lib/python3.11/site-packages/bokeh/io/showing.py:143, in show(obj, browser, new, notebook_handle, notebook_url, **kwargs) 140 state = curstate() 142 if isinstance(obj, UIElement): --> 143 return _show_with_state(obj, state, browser, new, notebook_handle=notebook_handle) 145 def is_application(obj: Any) -> TypeGuard[Application]: 146 return getattr(obj, '_is_a_bokeh_application_class', False) File /lib/python3.11/site-packages/bokeh/io/showing.py:194, in _show_with_state(obj, state, browser, new, notebook_handle) 191 shown = True 193 if state.file or not shown: --> 194 _show_file_with_state(obj, state, new, controller) 196 return comms_handle File /lib/python3.11/site-packages/bokeh/io/showing.py:176, in _show_file_with_state(obj, state, new, controller) 172 ''' 173 174 ''' 175 filename = save(obj, state=state) --> 176 controller.open("file://" + filename, new=NEW_PARAM[new]) File /lib/python311.zip/webbrowser.py:10, in open(url, new, autoraise) 9 def open(url: str, new: int = 0, autoraise: bool = True) -> None: ---> 10 from js import window 12 window.open(url, "_blank") ImportError: cannot import name 'window' from 'js' (unknown location)
Note that above code seems to work to show the plot in the notebook output here even though it throws an error (ImportError: cannot import name 'window' from 'js' (unknown location)
) as of May 2023. And it seems to have the typical 'interactive' features covered next.
Use the tools on the right of the plot to explore.
You'll see the plot shown above in this notebook is 'interactive' in the sense you can click on the 'Pan' icon (like an intersection of two lines with arrows at the ends) to the upper right side of the plot and click and drag to change the center. Or you can click on the 'Wheel Zoom' icon (like a cartoon eye (?) to the left of a magnifying glass looking) and then use the middle scroll functionality on a mouse to zoom in or out.
This section is based on above and 'First steps 9: Using widgets' page in the Bokeh documentation.
I'd strongly advise restarting the kernel and running the %pip install
commands in the next cell.
This will set things up fresh. Otherwise, once you issue output_notebook()
it will continue to also show the plots inline in the notebook and that isn't how this section was meant to be begun. And note that if you don't run the %pip install
commands below you'll see errors, like ModuleNotFoundError: No module named 'xyzservices'
.
# I'm repeating this from above here because those who have used this notebook before may want to skip right to this section and need
# to do the set-up. Having it close by will make it easier.
%pip install bokeh
%pip install xyzservices
%pip install pandas
from bokeh.layouts import layout
from bokeh.models import Div, RangeSlider, Spinner
from bokeh.plotting import figure, show
from bokeh.io import output_file
# prepare some data
x = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
y = [4, 5, 5, 7, 2, 6, 4, 9, 1, 3]
# create plot with circle glyphs
p = figure(x_range=(1, 9), width=500, height=250)
points = p.circle(x=x, y=y, size=30, fill_color="#21a7df")
# set up textarea (div)
div = Div(
text="""
<p>Select the circle's size using this control element:</p>
""",
width=200,
height=30,
)
# set up spinner
spinner = Spinner(
title="Circle size",
low=0,
high=60,
step=5,
value=points.glyph.size,
width=200,
)
spinner.js_link("value", points.glyph, "size")
# set up RangeSlider
range_slider = RangeSlider(
title="Adjust x-axis range",
start=0,
end=10,
step=1,
value=(p.x_range.start, p.x_range.end),
)
range_slider.js_link("value", p.x_range, "start", attr_selector=0)
range_slider.js_link("value", p.x_range, "end", attr_selector=1)
# create layout
layout = layout(
[
[div, spinner],
[range_slider],
[p],
]
)
# set where to show the result
output_file('widgets_example.html')
# show the results
show(layout)
--------------------------------------------------------------------------- ImportError Traceback (most recent call last) Cell In[3], line 59 56 output_file('widgets_example.html') 58 # show the results ---> 59 show(layout) File /lib/python3.11/site-packages/bokeh/io/showing.py:143, in show(obj, browser, new, notebook_handle, notebook_url, **kwargs) 140 state = curstate() 142 if isinstance(obj, UIElement): --> 143 return _show_with_state(obj, state, browser, new, notebook_handle=notebook_handle) 145 def is_application(obj: Any) -> TypeGuard[Application]: 146 return getattr(obj, '_is_a_bokeh_application_class', False) File /lib/python3.11/site-packages/bokeh/io/showing.py:194, in _show_with_state(obj, state, browser, new, notebook_handle) 191 shown = True 193 if state.file or not shown: --> 194 _show_file_with_state(obj, state, new, controller) 196 return comms_handle File /lib/python3.11/site-packages/bokeh/io/showing.py:176, in _show_file_with_state(obj, state, new, controller) 172 ''' 173 174 ''' 175 filename = save(obj, state=state) --> 176 controller.open("file://" + filename, new=NEW_PARAM[new]) File /lib/python311.zip/webbrowser.py:10, in open(url, new, autoraise) 9 def open(url: str, new: int = 0, autoraise: bool = True) -> None: ---> 10 from js import window 12 window.open(url, "_blank") ImportError: cannot import name 'window' from 'js' (unknown location)
(As of May 2023: like above ,the caveat about the error that makes no difference is in effect.)
Like the firstion section, you'll open the standalone HTML file from the file navigator and toggle to trust the HTML in the upper left of it by clicking on 'Trust HTML', and then it should show the bokeh plot.
Note there are widgets to control the look of elements of the bokeh plot.
Running the next cell will show the same thing in line in the notebook.
from bokeh.layouts import layout
from bokeh.models import Div, RangeSlider, Spinner
from bokeh.plotting import figure, show
from bokeh.io import output_notebook
# prepare some data
x = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
y = [4, 5, 5, 7, 2, 6, 4, 9, 1, 3]
# create plot with circle glyphs
p = figure(x_range=(1, 9), width=500, height=250)
points = p.circle(x=x, y=y, size=30, fill_color="#21a7df")
# set up textarea (div)
div = Div(
text="""
<p>Select the circle's size using this control element:</p>
""",
width=200,
height=30,
)
# set up spinner
spinner = Spinner(
title="Circle size",
low=0,
high=60,
step=5,
value=points.glyph.size,
width=200,
)
spinner.js_link("value", points.glyph, "size")
# set up RangeSlider
range_slider = RangeSlider(
title="Adjust x-axis range",
start=0,
end=10,
step=1,
value=(p.x_range.start, p.x_range.end),
)
range_slider.js_link("value", p.x_range, "start", attr_selector=0)
range_slider.js_link("value", p.x_range, "end", attr_selector=1)
# create layout
layout = layout(
[
[div, spinner],
[range_slider],
[p],
]
)
# set where to show the result
output_notebook()
# show the results
show(layout)
--------------------------------------------------------------------------- ImportError Traceback (most recent call last) Cell In[4], line 59 56 output_notebook() 58 # show the results ---> 59 show(layout) File /lib/python3.11/site-packages/bokeh/io/showing.py:143, in show(obj, browser, new, notebook_handle, notebook_url, **kwargs) 140 state = curstate() 142 if isinstance(obj, UIElement): --> 143 return _show_with_state(obj, state, browser, new, notebook_handle=notebook_handle) 145 def is_application(obj: Any) -> TypeGuard[Application]: 146 return getattr(obj, '_is_a_bokeh_application_class', False) File /lib/python3.11/site-packages/bokeh/io/showing.py:194, in _show_with_state(obj, state, browser, new, notebook_handle) 191 shown = True 193 if state.file or not shown: --> 194 _show_file_with_state(obj, state, new, controller) 196 return comms_handle File /lib/python3.11/site-packages/bokeh/io/showing.py:176, in _show_file_with_state(obj, state, new, controller) 172 ''' 173 174 ''' 175 filename = save(obj, state=state) --> 176 controller.open("file://" + filename, new=NEW_PARAM[new]) File /lib/python311.zip/webbrowser.py:10, in open(url, new, autoraise) 9 def open(url: str, new: int = 0, autoraise: bool = True) -> None: ---> 10 from js import window 12 window.open(url, "_blank") ImportError: cannot import name 'window' from 'js' (unknown location)
(As of May 2023: like above ,the caveat about the error that makes no difference is in effect.)