From dff11a8b517a12f4b00e3a35c0e2ce276a77b7fc Mon Sep 17 00:00:00 2001 From: Philipp Rudiger Date: Sat, 9 Apr 2022 17:15:03 +0200 Subject: [PATCH] Add Panel KMeans clustering example --- pyscriptjs/public/bokeh_interactive.html | 12 +- pyscriptjs/public/panel.html | 33 ++--- pyscriptjs/public/panel_kmeans.html | 157 +++++++++++++++++++++++ 3 files changed, 177 insertions(+), 25 deletions(-) create mode 100644 pyscriptjs/public/panel_kmeans.html diff --git a/pyscriptjs/public/bokeh_interactive.html b/pyscriptjs/public/bokeh_interactive.html index 822eaea..1cb1b8b 100644 --- a/pyscriptjs/public/bokeh_interactive.html +++ b/pyscriptjs/public/bokeh_interactive.html @@ -65,7 +65,7 @@ def doc_json(model, target): version = __version__, )) -def link_docs(pydoc, jsdoc): +def _link_docs(pydoc, jsdoc): def jssync(event): if (event.setter_id is not None): return @@ -76,9 +76,11 @@ def link_docs(pydoc, jsdoc): jsdoc.on_change(pyodide.create_proxy(jssync), pyodide.to_js(False)) def pysync(event): - json_patch = process_document_events([event], use_buffers=False)[0] - - jsdoc.apply_json_patch(JSON.parse(json_patch), {}, setter_id='js') + 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) @@ -87,7 +89,7 @@ async def show(plot, target): views = await Bokeh.embed.embed_item(JSON.parse(model_json)) print("Done embedding...") jsdoc = views[0].model.document - link_docs(pydoc, jsdoc) + _link_docs(pydoc, jsdoc) await show(row, 'myplot') diff --git a/pyscriptjs/public/panel.html b/pyscriptjs/public/panel.html index f81075d..6319144 100644 --- a/pyscriptjs/public/panel.html +++ b/pyscriptjs/public/panel.html @@ -1,4 +1,5 @@ - + + Panel Example @@ -7,28 +8,21 @@ - - - - - - - -- bokeh -- numpy - -

Panel Example

-
- + + + + - bokeh + - numpy + +

Panel Example

+
+ import asyncio import micropip -import pyodide -await micropip.install(['panel==0.13.0rc8']) +await micropip.install(['panel==0.13.0rc9']) import panel as pn @@ -40,7 +34,6 @@ def callback(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') + + + +