Plotly + Ipywidget to html

Question

I have a sample Python script below that generates a simple plotly graph and widget. Where the widget selector modifies the colour of the line.

This works great in a jupyter notebook or VSCode Interactive Python section. Unfortunately when exporting to HTML I am losing the interactivity.

My script is below

import pandas as pd
import plotly.graph_objects as go
from ipywidgets import widgets

PURPLE = 'rgba(96, 74, 123, 1)'
RED = 'rgba(192, 80, 77, 1)'

df = pd.DataFrame(
    data=[
        [1, 10, 'purple'],
        [2, 20, 'purple'],

        [1, 10, 'red'],
        [2, 20, 'red'],
    ],
    columns=['xcol', 'ycol', 'colourselector']
)

colour_selector = widgets.Dropdown(
    description='colour selector:',
    options=df['colourselector'].unique().tolist(),
    value='red',
)

trace1 = go.Scatter(x=df['xcol'], y=df['ycol'], opacity=0.75, marker={'color': RED})
fig = go.FigureWidget(
    data=[trace1]
)

def select_col(_):
    if colour_selector.value == 'purple':
        return PURPLE
    if colour_selector.value == 'red':
        return RED


def response(_):
    """ overlay callable """
    with fig.batch_update():
        fig.data[0].marker = {'color': select_col(colour_selector.value)}


colour_selector.observe(response)
col_sel = widgets.HBox([colour_selector])
widgets.VBox([col_sel, fig])

This generates the graph below:

Where the dropdown enables me to change the colour of the line.

I then export it to html with the following command:

./env/scripts/jupyter nbconvert --execute ./notebooks/lfs.tsgen.ipynb --to html

Which creates an html output with identical output; however, graph interactivity is no longer supported.

I am new to HTML / plotly and can't track down an error message or any reason interactivity isn't supported so cannot give a more specific question.

Could anyone provide guidance on:

Getting more details from my html doc (developer tools?) or
A way to enable interactivity or
This is simply impossible and I need to try something different.

NOTES:

Any solution must have the option to hide specific input cells.
On further research this may not be possible: How to get ipywidgets interact to work in HTML?

Thank you, Chris

score 0 · Answer 1 · answered Jun 27 '23 at 09:18

0

Do you want to export the whole notebook, or just the graph?

The (self-contained) interactive graph can be exported using plotly:

fig.write_html("myplot.html")

answered Jun 27 '23 at 09:18

StephanT

649
5
12

Thanks for the answer. I would like to export the entire notebook as it will contain markdown cells in addition to the graph – Dodd-learning Jun 27 '23 at 16:42

score 0 · Answer 2 · answered Jul 03 '23 at 13:58

If you export notebook to static HTML you will lost interactivity of widgets. The ipywidgets needs to be connected to Python kernel.

What you can do is to try export notebook to web application, you have two options:

Mercury (GitHub, docs)
Voila (GitHub, docs)

Mercury is simpler than Voila, there are no callbacks, cells are automatically re-executed. The Voila works with ipywidgets. You can self-host both apps, additionally Mercury offers Cloud service.

Plotly + Ipywidget to html

2 Answers2