diff --git a/pyscriptjs/public/bokeh_interactive.html b/pyscriptjs/public/bokeh_interactive.html
new file mode 100644
index 0000000..1cb1b8b
--- /dev/null
+++ b/pyscriptjs/public/bokeh_interactive.html
@@ -0,0 +1,98 @@
+
+ Bokeh Example
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- bokeh
+- numpy
+
+ Bokeh Example
+
+
+
+import asyncio
+import json
+import pyodide
+
+from js import Bokeh, console, JSON
+
+from bokeh import __version__
+from bokeh.document import Document
+from bokeh.embed.util import OutputDocumentFor, standalone_docs_json
+from bokeh.models import Slider, Div
+from bokeh.layouts import Row
+from bokeh.protocol.messages.patch_doc import process_document_events
+
+# create a new plot with default tools, using figure
+p = Slider(start=0.1, end=10, value=1, step=.1, title="Amplitude")
+div = Div(text=f'Amplitude is: {p.value}')
+
+def callback(attr, old, new):
+ div.text = f'Amplitude is: {new}'
+
+p.on_change('value', callback)
+
+row = Row(children=[p, div])
+
+print("about to embed")
+
+def doc_json(model, target):
+ with OutputDocumentFor([model]) as doc:
+ doc.title = ""
+ docs_json = standalone_docs_json([model])
+
+ doc_json = list(docs_json.values())[0]
+ root_id = doc_json['roots']['root_ids'][0]
+
+ return doc, json.dumps(dict(
+ target_id = target,
+ root_id = root_id,
+ doc = doc_json,
+ version = __version__,
+ ))
+
+def _link_docs(pydoc, jsdoc):
+ def jssync(event):
+ if (event.setter_id is not None):
+ return
+ events = [event]
+ json_patch = jsdoc.create_json_patch_string(pyodide.to_js(events))
+ pydoc.apply_json_patch(json.loads(json_patch))
+
+ jsdoc.on_change(pyodide.create_proxy(jssync), pyodide.to_js(False))
+
+ def pysync(event):
+ json_patch, buffers = process_document_events([event], use_buffers=True)
+ buffer_map = {}
+ for (ref, buffer) in buffers:
+ buffer_map[ref['id']] = buffer
+ jsdoc.apply_json_patch(JSON.parse(json_patch), pyodide.to_js(buffer_map), setter_id='js')
+
+ pydoc.on_change(pysync)
+
+async def show(plot, target):
+ pydoc, model_json = doc_json(plot, target)
+ views = await Bokeh.embed.embed_item(JSON.parse(model_json))
+ print("Done embedding...")
+ jsdoc = views[0].model.document
+ _link_docs(pydoc, jsdoc)
+
+await show(row, 'myplot')
+
+
+
+
diff --git a/pyscriptjs/public/panel.html b/pyscriptjs/public/panel.html
new file mode 100644
index 0000000..6319144
--- /dev/null
+++ b/pyscriptjs/public/panel.html
@@ -0,0 +1,39 @@
+
+
+ Panel Example
+
+
+
+
+
+
+
+
+
+
+
+
+ - bokeh
+ - numpy
+
+ Panel Example
+
+
+import asyncio
+import micropip
+
+await micropip.install(['panel==0.13.0rc9'])
+
+import panel as pn
+
+slider = pn.widgets.FloatSlider(start=0, end=10, name='Amplitude')
+
+def callback(new):
+ return f'Amplitude is: {new}'
+
+row = pn.Row(slider, pn.bind(callback, slider))
+
+await pn.io.pyodide.show(row, 'myplot')
+
+
+
diff --git a/pyscriptjs/public/panel_kmeans.html b/pyscriptjs/public/panel_kmeans.html
new file mode 100644
index 0000000..ee8e902
--- /dev/null
+++ b/pyscriptjs/public/panel_kmeans.html
@@ -0,0 +1,157 @@
+
+
+
+
+ Pyscript/Panel KMeans Demo
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - bokeh
+ - numpy
+ - pandas
+ - scikit-learn
+
+
+
+
+import asyncio
+import micropip
+
+from io import StringIO
+from js import fetch
+
+await micropip.install(['panel==0.13.0rc9', 'altair'])
+
+import altair as alt
+import panel as pn
+import pandas as pd
+
+from panel.io.pyodide import show
+from sklearn.cluster import KMeans
+
+pn.config.sizing_mode = 'stretch_width'
+
+data = await fetch('https://raw.githubusercontent.com/rfordatascience/tidytuesday/master/data/2020/2020-07-28/penguins.csv')
+penguins = pd.read_csv(StringIO(await data.text())).dropna()
+cols = list(penguins.columns)[2:6]
+
+x = pn.widgets.Select(name='x', options=cols, value='bill_depth_mm')
+y = pn.widgets.Select(name='y', options=cols, value='bill_length_mm')
+n_clusters = pn.widgets.IntSlider(name='n_clusters', start=1, end=5, value=3)
+
+@pn.depends(x.param.value, y.param.value, n_clusters.param.value)
+def get_clusters(x, y, n_clusters):
+ kmeans = KMeans(n_clusters=n_clusters)
+ est = kmeans.fit(penguins[cols].values)
+ df = penguins.copy()
+ df['labels'] = est.labels_.astype('str')
+ centers = df.groupby('labels').mean()
+ table.value = df
+ return (
+ alt.Chart(df)
+ .mark_point(size=100)
+ .encode(
+ x=alt.X(x, scale=alt.Scale(zero=False)),
+ y=alt.Y(y, scale=alt.Scale(zero=False)),
+ shape='labels',
+ color='species'
+ ).properties(width=800) +
+ alt.Chart(centers)
+ .mark_point(size=200, shape='cross', color='black')
+ .encode(x=x+':Q', y=y+':Q')
+)
+
+table = pn.widgets.Tabulator(penguins, pagination='remote', page_size=10)
+
+intro = """
+This app provides an example of **building a simple dashboard using
+Panel**.\n\nIt demonstrates how to take the output of **k-means
+clustering on the Penguins dataset** using scikit-learn, parameterizing
+the number of clusters and the variables to plot.\n\nThe entire
+clustering and plotting pipeline is expressed as a **single reactive
+function** that responsively returns an updated plot when one of the
+widgets changes.\n\n The **`x` marks the center** of the cluster.
+"""
+
+await show(x, 'x-widget')
+await show(y, 'y-widget')
+await show(n_clusters, 'n-widget')
+await show(intro, 'intro')
+await show(get_clusters, 'cluster-plot')
+await show(table, 'table')
+
+
+
+