mirror of
https://github.com/pyscript/pyscript.git
synced 2025-12-19 10:17:23 -05:00
08f34f748b
* Apply prettier to css, js, html, md, ts, and yml As a followup I will add prettier to the .pre-commit config. This patch is 100% generated by prettier. I used a forked version of prettier that understands the py-script tag. See https://github.com/hoodmane/pyscript-prettier-precommit for more info. * Apply old pre-commit * Revert some problems * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Revert some changes * More changes * Fix pre-commit * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
227 lines
7.7 KiB
HTML
227 lines
7.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
|
|
<meta name="theme-color" content="#000000" />
|
|
<meta name="name" content="PyScript/Panel KMeans Demo" />
|
|
|
|
<title>Pyscript/Panel KMeans Demo</title>
|
|
<link rel="icon" type="image/x-icon" href="./favicon.png" />
|
|
|
|
<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.1/dist/css/widgets.css"
|
|
type="text/css"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://unpkg.com/@holoviz/panel@0.13.1/dist/css/markdown.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.3.js"
|
|
></script>
|
|
<script
|
|
type="text/javascript"
|
|
src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.3.min.js"
|
|
></script>
|
|
<script
|
|
type="text/javascript"
|
|
src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.3.min.js"
|
|
></script>
|
|
<script
|
|
type="text/javascript"
|
|
src="https://unpkg.com/@holoviz/panel@0.13.1/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.1/dist/bundled/bootstraptemplate/bootstrap.css"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://unpkg.com/@holoviz/panel@0.13.1/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="https://pyscript.net/latest/pyscript.css" />
|
|
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
|
|
<link rel="stylesheet" href="./assets/css/examples.css" />
|
|
</head>
|
|
|
|
<body>
|
|
<nav class="navbar" style="background-color: #000000">
|
|
<div class="app-header">
|
|
<a href="/">
|
|
<img src="./logo.png" class="logo" />
|
|
</a>
|
|
<a class="title" href="" style="color: #f0ab3c"
|
|
>Panel KMeans Clustering Demo</a
|
|
>
|
|
</div>
|
|
</nav>
|
|
<section class="pyscript">
|
|
<div class="row overflow-hidden" id="content">
|
|
<div class="sidenav" id="sidebar">
|
|
<ul class="nav flex-column">
|
|
<div class="bk-root" id="x-widget"></div>
|
|
<div class="bk-root" id="y-widget"></div>
|
|
<div class="bk-root" id="n-widget"></div>
|
|
</ul>
|
|
</div>
|
|
<div class="col mh-100 float-left" id="main">
|
|
<div class="bk-root" id="intro"></div>
|
|
<div class="bk-root" id="cluster-plot"></div>
|
|
<div class="bk-root" id="table"></div>
|
|
</div>
|
|
</div>
|
|
<py-tutor>
|
|
<py-config>
|
|
packages = [
|
|
"https://cdn.holoviz.org/panel/0.14.3/dist/wheels/bokeh-2.4.3-py3-none-any.whl",
|
|
"altair",
|
|
"numpy",
|
|
"pandas",
|
|
"scikit-learn",
|
|
"panel==0.13.1"
|
|
]
|
|
plugins = [
|
|
"../build/plugins/python/py_tutor.py"
|
|
]
|
|
</py-config>
|
|
|
|
<py-script>
|
|
import altair as alt
|
|
import panel as pn
|
|
import pandas as pd
|
|
|
|
from sklearn.cluster import KMeans
|
|
from pyodide.http import open_url
|
|
|
|
pn.config.sizing_mode = 'stretch_width'
|
|
|
|
url = 'https://raw.githubusercontent.com/rfordatascience/tidytuesday/master/data/2020/2020-07-28/penguins.csv'
|
|
penguins = pd.read_csv(open_url(url)).dropna()
|
|
cols = list(penguins.columns)[2:6]
|
|
|
|
x = pn.widgets.Select(name='x', options=cols, value='bill_depth_mm').servable(target='x-widget')
|
|
y = pn.widgets.Select(name='y', options=cols, value='bill_length_mm').servable(target='y-widget')
|
|
n_clusters = pn.widgets.IntSlider(name='n_clusters', start=1, end=5, value=3).servable(target='n-widget')
|
|
|
|
brush = alt.selection_interval(name='brush') # selection of type "interval"
|
|
|
|
def get_clusters(n_clusters):
|
|
kmeans = KMeans(n_clusters=n_clusters)
|
|
est = kmeans.fit(penguins[cols].values)
|
|
df = penguins.copy()
|
|
df['labels'] = est.labels_.astype('str')
|
|
return df
|
|
|
|
def get_chart(x, y, df):
|
|
centers = df.groupby('labels').mean()
|
|
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'
|
|
).add_selection(brush).properties(width=800) +
|
|
alt.Chart(centers)
|
|
.mark_point(size=250, shape='cross', color='black')
|
|
.encode(x=x+':Q', y=y+':Q')
|
|
)
|
|
|
|
intro = pn.pane.Markdown("""
|
|
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 plot and the table are linked, i.e. selecting on the plot
|
|
will filter the data in the table.\n\n The **`x` marks the center** of
|
|
the cluster.
|
|
""").servable(target='intro')
|
|
|
|
chart = pn.pane.Vega().servable(target='cluster-plot')
|
|
table = pn.widgets.Tabulator(pagination='remote', page_size=10).servable(target='table')
|
|
|
|
def update_table(event=None):
|
|
table.value = get_clusters(n_clusters.value)
|
|
|
|
n_clusters.param.watch(update_table, 'value')
|
|
|
|
@pn.depends(x, y, n_clusters, watch=True)
|
|
def update_chart(*events):
|
|
chart.object = get_chart(x.value, y.value, table.value)
|
|
chart.selection.param.watch(update_filters, 'brush')
|
|
|
|
def update_filters(event=None):
|
|
filters = []
|
|
for k, v in (getattr(event, 'new') or {}).items():
|
|
filters.append(dict(field=k, type='>=', value=v[0]))
|
|
filters.append(dict(field=k, type='<=', value=v[1]))
|
|
table.filters = filters
|
|
|
|
update_table()
|
|
update_chart()
|
|
</py-script>
|
|
</py-tutor>
|
|
</section>
|
|
<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>
|