8000 Merge pull request #8 from anaconda/update_examples · rmyers/pyscript@b245e5a · GitHub
[go: up one dir, main page]
Skip to content

Commit b245e5a

Browse files
fpligerfpliger
authored
Merge pull request pyscript#8 from anaconda/update_examples
Add Panel KMeans clustering example
2 parents b7dc5e4 + dff11a8 commit b245e5a

File tree

3 files changed

+177
-25
lines changed

3 files changed

+177
-25
lines changed

‎pyscriptjs/public/bokeh_interactive.html

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ <h1>Bokeh Example</h1>
6565
version = __version__,
6666
))
6767

68-
def link_docs(pydoc, jsdoc):
68+
def _link_docs(pydoc, jsdoc):
6969
def jssync(event):
7070
if (event.setter_id is not None):
7171
return
@@ -76,9 +76,11 @@ <h1>Bokeh Example</h1>
7676
jsdoc.on_change(pyodide.create_proxy(jssync), pyodide.to_js(False))
7777

7878
def pysync(event):
79-
json_patch = process_document_events([event], use_buffers=False)[0]
80-
81-
jsdoc.apply_json_patch(JSON.parse(json_patch), {}, setter_id='js')
79+
json_patch, buffers = process_document_events([event], use_buffers=True)
80+
buffer_map = {}
81+
for (ref, buffer) in buffers:
82+
buffer_map[ref['id']] = buffer
83+
jsdoc.apply_json_patch(JSON.parse(json_patch), pyodide.to_js(buffer_map), setter_id='js')
8284

8385
pydoc.on_change(pysync)
8486

@@ -87,7 +89,7 @@ <h1>Bokeh Example</h1>
8789
views = await Bokeh.embed.embed_item(JSON.parse(model_json))
8890
print("Done embedding...")
8991
jsdoc = views[0].model.document
90-
link_docs(pydoc, jsdoc)
92+
_link_docs(pydoc, jsdoc)
9193

9294
await show(row, 'myplot')
9395
</py-script>

‎pyscriptjs/public/panel.html

Lines changed: 13 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
<html><head>
1+
<html>
2+
<head>
23
<title>Panel Example</title>
34
<meta charset="iso-8859-1">
45
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.js"></script>
@@ -7,28 +8,21 @@
78
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js"></script>
89
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-2.4.2.min.js"></script>
910
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@holoviz/panel@0.13.0-rc.5/dist/panel.min.js"></script>
10-
11-
<script type="text/javascript">
12-
Bokeh.set_log_level("info");
13-
</script>
1411
<link rel="stylesheet" href="build/pyscript.css" />
15-
1612
<script defer src="build/pyscript.js"></script>
17-
18-
</head>
19-
<body>
20-
<py-env>
21-
- bokeh
22-
- numpy
23-
</py-env>
24-
<h1>Panel Example</h1>
25-
<div id="myplot"></div>
26-
<py-script>
13+
</head>
14+
<body>
15+
<py-env>
16+
- bokeh
17+
- numpy
18+
</py-env>
19+
<h1>Panel Example</h1>
20+
<div id="myplot"></div>
21+
<py-script>
2722
import asyncio
2823
import micropip
29-
import pyodide
3024

31-
await micropip.install(['panel==0.13.0rc8'])
25+
await micropip.install(['panel==0.13.0rc9'])
3226

3327
import panel as pn
3428

@@ -40,7 +34,6 @@ <h1>Panel Example</h1>
4034
row = pn.Row(slider, pn.bind(callback, slider))
4135

4236
await pn.io.pyodide.show(row, 'myplot')
43-
</py-script>
44-
37+
</py-script>
4538
</body>
4639
</html>

‎pyscriptjs/public/panel_kmeans.html

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Pyscript/Panel KMeans Demo</title>
6+
7+
<link rel="icon" href="https://unpkg.com/@holoviz/panel@0.13.0-rc.8/dist/icons/favicon.ico" type="">
8+
<meta name="name" content="PyScript/Panel KMeans Demo">
9+
10+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" type="text/css" />
11+
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0-rc.8/dist/css/widgets.css" type="text/css" />
12+
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0-rc.8/dist/css/markdown.css" type="text/css" />
13+
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0-rc.8/dist/css/loading.css" type="text/css" />
14+
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0-rc.8/dist/css/dataframe.css" type="text/css" />
15+
16+
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega@5"></script>
17+
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
18+
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
19+
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.js"></script>
20+
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.js"></script>
21+
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script>
22+
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js"></script>
23+
<script type="text/javascript" src="https://unpkg.com/@holoviz/panel@0.13.0-rc.8/dist/panel.min.js"></script>
24+
<script type="text/javascript">
25+
Bokeh.set_log_level("info");
26+
</script>
27+
28+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
29+
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0-rc.8/dist/bundled/bootstraptemplate/bootstrap.css">
30+
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0-rc.8/dist/bundled/defaulttheme/default.css">
31+
32+
<style>
33+
#sidebar {
34+
width: 350px;
35+
}
36+
</style>
37+
38+
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
39+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
40+
41+
<link rel="stylesheet" href="build/pyscript.css" />
42+
<script defer src="build/pyscript.js"></script>
43+
</head>
44+
<body>
45+
<py-env>
46+
- bokeh
47+
- numpy
48+
- pandas
49+
- scikit-learn
50+
</py-env>
51+
52+
<div class="container-fluid d-flex flex-column vh-100 overflow-hidden" id="container">
53+
<nav class="navbar navbar-expand-md navbar-dark sticky-top shadow" style="" id="header">
54+
<button type="button" class="navbar-toggle collapsed" id="sidebarCollapse">
55+
<span class="navbar-toggler-icon"></span>
56+
</button>
57+
<div class="app-header">
58+
<a class="title" href="/" >&nbsp;Panel</a>
59+
<span class="title">&nbsp;-</span>
60+
<a class="title" href="" >&nbsp;Pyscript KMeans Clustering Demo</a>
61+
</div>
62+
</nav>
63+
64+
<div class="row overflow-hidden" id="content">
65+
<div class="sidenav" id="sidebar">
66+
<ul class="nav flex-column">
67+
<div class="bk-root" id="x-widget" data-root-id="1021"></div>
68+
<div class="bk-root" id="y-widget" data-root-id="1026"></div>
69+
<div class="bk-root" id="n-widget" data-root-id="1031"></div>
70+
</ul>
71+
</div>
72+
<div class="col mh-100 float-left" id="main">
73+
<div class="bk-root" id="intro" data-root-id="1008"></div>
74+
<div class="bk-root" id="cluster-plot" data-root-id="1009"></div>
75+
<div class="bk-root" id="table" data-root-id="1009"></div>
76+
</div>
77+
</div>
78+
</div>
79+
<py-script>
80+
import asyncio
81+
import micropip
82+
83+
from io import StringIO
84+
from js import fetch
85+
86+
await micropip.install(['panel==0.13.0rc9', 'altair'])
87+
88+
import altair as alt
89+
import panel as pn
90+
import pandas as pd
91+
92+
from panel.io.pyodide import show
93+
from sklearn.cluster import KMeans
94+
95+
pn.config.sizing_mode = 'stretch_width'
96+
97+
data = await fetch('https://raw.githubusercontent.com/rfordatascience/tidytuesday/master/data/2020/2020-07-28/penguins.csv')
98+
penguins = pd.read_csv(StringIO(await data.text())).dropna()
99+
cols = list(penguins.columns)[2:6]
100+
101+
x = pn.widgets.Select(name='x', options=cols, value='bill_depth_mm')
102+
y = pn.widgets.Select(name='y', options=cols, value='bill_length_mm')
103+
n_clusters = pn.widgets.IntSlider(name='n_clusters', start=1, end=5, value=3)
104+
105+
@pn.depends(x.param.value, y.param.value, n_clusters.param.value)
106+
def get_clusters(x, y, n_clusters):
107+
kmeans = KMeans(n_clusters=n_clusters)
108+
est = kmeans.fit(penguins[cols].values)
109+
df = penguins.copy()
110+
df['labels'] = est.labels_.astype('str')
111+
centers = df.groupby('labels').mean()
112+
table.value = df
113+
return (
114+
alt.Chart(df)
115+
.mark_point(size=100)
116+
.encode(
117+
x=alt.X(x, scale=alt.Scale(zero=False)),
118+
y=alt.Y(y, scale=alt.Scale(zero=False)),
119+
shape='labels',
120+
color='species'
121+
).properties(width=800) +
122+
alt.Chart(centers)
123+
.mark_point(size=200, shape='cross', color='black')
124+
.encode(x=x+':Q', y=y+':Q')
125+
)
126+
127+
table = pn.widgets.Tabulator(penguins, pagination='remote', page_size=10)
128+
129+
intro = """
130+
This app provides an example of **building a simple dashboard using
131+
Panel**.\n\nIt demonstrates how to take the output of **k-means
132+
clustering on the Penguins dataset** using scikit-learn, parameterizing
133+
the number of clusters and the variables to plot.\n\nThe entire
134+
clustering and plotting pipeline is expressed as a **single reactive
135+
function** that responsively returns an updated plot when one of the
136+
widgets changes.\n\n The **`x` marks the center** of the cluster.
137+
"""
138+
139+
await show(x, 'x-widget')
140+
await show(y, 'y-widget')
141+
await show(n_clusters, 'n-widget')
142+
await show(intro, 'intro')
143+
await show(get_clusters, 'cluster-plot')
144+
await show(table, 'table')
145+
</py-script>
146+
<script>
147+
$(document).ready(function () {
148+
$('#sidebarCollapse').on('click', function () {
149+
$('#sidebar').toggleClass('active')
150+
$(this).toggleClass('active')
151+
var interval = setInterval(function () { window.dispatchEvent(new Event('resize')); }, 10);
152+
setTimeout(function () { clearInterval(interval) }, 210)
153+
});
154+
});
155+
</script>
156+
</body>
157+
</html>

0 commit comments

Comments
 (0)
0