mirror of
https://github.com/pyscript/pyscript.git
synced 2022-05-01 19:47:48 +03:00
Merge branch 'main' into pys-6/remove-old-code
This commit is contained in:
Fabio Pliger
98
pyscriptjs/public/bokeh_interactive.html
Normal file
98
pyscriptjs/public/bokeh_interactive.html
Normal file
@@ -0,0 +1,98 @@
|
||||
<html><head>
|
||||
<title>Bokeh Example</title>
|
||||
<meta charset="iso-8859-1">
|
||||
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.4.2.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-2.4.2.min.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
Bokeh.set_log_level("info");
|
||||
</script>
|
||||
<link rel="stylesheet" href="build/pyscript.css" />
|
||||
|
||||
<script defer src="build/pyscript.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<py-env>
|
||||
- bokeh
|
||||
- numpy
|
||||
</py-env>
|
||||
<h1>Bokeh Example</h1>
|
||||
<div id="myplot"></div>
|
||||
|
||||
<py-script>
|
||||
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')
|
||||
</py-script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
39
pyscriptjs/public/panel.html
Normal file
39
pyscriptjs/public/panel.html
Normal file
@@ -0,0 +1,39 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Panel Example</title>
|
||||
<meta charset="iso-8859-1">
|
||||
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.4.2.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-2.4.2.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@holoviz/panel@0.13.0-rc.5/dist/panel.min.js"></script>
|
||||
<link rel="stylesheet" href="build/pyscript.css" />
|
||||
<script defer src="build/pyscript.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<py-env>
|
||||
- bokeh
|
||||
- numpy
|
||||
</py-env>
|
||||
<h1>Panel Example</h1>
|
||||
<div id="myplot"></div>
|
||||
<py-script>
|
||||
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')
|
||||
</py-script>
|
||||
</body>
|
||||
</html>
|
||||
157
pyscriptjs/public/panel_kmeans.html
Normal file
157
pyscriptjs/public/panel_kmeans.html
Normal file
@@ -0,0 +1,157 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Pyscript/Panel KMeans Demo</title>
|
||||
|
||||
<link rel="icon" href="https://unpkg.com/@holoviz/panel@0.13.0-rc.8/dist/icons/favicon.ico" type="">
|
||||
<meta name="name" content="PyScript/Panel KMeans Demo">
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" type="text/css" />
|
||||
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0-rc.8/dist/css/widgets.css" type="text/css" />
|
||||
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0-rc.8/dist/css/markdown.css" type="text/css" />
|
||||
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0-rc.8/dist/css/loading.css" type="text/css" />
|
||||
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0-rc.8/dist/css/dataframe.css" type="text/css" />
|
||||
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega@5"></script>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/@holoviz/panel@0.13.0-rc.8/dist/panel.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
Bokeh.set_log_level("info");
|
||||
</script>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0-rc.8/dist/bundled/bootstraptemplate/bootstrap.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0-rc.8/dist/bundled/defaulttheme/default.css">
|
||||
|
||||
<style>
|
||||
#sidebar {
|
||||
width: 350px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="build/pyscript.css" />
|
||||
<script defer src="build/pyscript.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<py-env>
|
||||
- bokeh
|
||||
- numpy
|
||||
- pandas
|
||||
- scikit-learn
|
||||
</py-env>
|
||||
|
||||
<div class="container-fluid d-flex flex-column vh-100 overflow-hidden" id="container">
|
||||
<nav class="navbar navbar-expand-md navbar-dark sticky-top shadow" style="" id="header">
|
||||
<button type="button" class="navbar-toggle collapsed" id="sidebarCollapse">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="app-header">
|
||||
<a class="title" href="/" > Panel</a>
|
||||
<span class="title"> -</span>
|
||||
<a class="title" href="" > Pyscript KMeans Clustering Demo</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="row overflow-hidden" id="content">
|
||||
<div class="sidenav" id="sidebar">
|
||||
<ul class="nav flex-column">
|
||||
<div class="bk-root" id="x-widget" data-root-id="1021"></div>
|
||||
<div class="bk-root" id="y-widget" data-root-id="1026"></div>
|
||||
<div class="bk-root" id="n-widget" data-root-id="1031"></div>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col mh-100 float-left" id="main">
|
||||
<div class="bk-root" id="intro" data-root-id="1008"></div>
|
||||
<div class="bk-root" id="cluster-plot" data-root-id="1009"></div>
|
||||
<div class="bk-root" id="table" data-root-id="1009"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<py-script>
|
||||
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')
|
||||
</py-script>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$('#sidebarCollapse').on('click', function () {
|
||||
$('#sidebar').toggleClass('active')
|
||||
$(this).toggleClass('active')
|
||||
var interval = setInterval(function () { window.dispatchEvent(new Event('resize')); }, 10);
|
||||
setTimeout(function () { clearInterval(interval) }, 210)
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user