Can I recreate this select event functionality in offline mode and embed it into a website?

📊 Plotly Python
1

Hello, I would like to make a UMAP plot that when markers are selected, the corresponding data for those markers is displayed in a linked table. I can make this work using ipywidgets in Jupyter notebook where I was testing the feature. However I want to recreate this in offline mode, similar to the behaviour of plotly.write_html where I can produce an html file or just a div.

Is this possible? Below is the code that works in my Jupyter notebook (Plotly version 4.11.0).

import plotly.graph_objs as go
import plotly.express as px
import umap.umap_ as umap
from umap import UMAP
from ipywidgets import HBox, VBox


df = px.data.iris()


features = df.loc[:, :'petal_width']

umap = UMAP(n_components=2, init='random', random_state=0)

projection = umap.fit_transform(features)



cs = [[0, '#EF553B'], [0.5, '#636EFA'], [1.0, '#00CC96']]

f = go.FigureWidget([go.Scatter(
    x = projection[:,0],
    y = projection[:,1],
    mode = 'markers', 
    marker=dict(
        size=10,
        color=df['species_id'],
        colorscale=cs,
        line=dict(
            width=1,
            color='Black'
        )
    )
)])
scatter = f.data[0]


t = go.FigureWidget([go.Table(
    header=dict(values=['sepal_length', 'sepal_width', 'petal_length', 'petal_width', 'species', 'species_id'],
                fill = dict(color='#C2D4FF'),
                align = ['left'] * 5),
    cells=dict(values=[df[col] for col in ['sepal_length', 'sepal_width', 'petal_length', 'petal_width', 'species', 'species_id']],
               fill = dict(color='#F5F8FF'),
               align = ['left'] * 5))])

def selection_fn(trace,points,selector):
    t.data[0].cells.values = [df.loc[points.point_inds][col] for col in ['sepal_length', 'sepal_width', 'petal_length', 'petal_width', 'species', 'species_id']]

scatter.on_selection(selection_fn)


VBox((HBox(),f,t))

Thank you in advance for any help.

Scott