winpython · stonebig · Jun 12, 2022 · Jun 12, 2022
diff --git a/docs/pyscript/panel_kmeans.html b/docs/pyscript/panel_kmeans.html
@@ -0,0 +1,172 @@
+<!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.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.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/alpha/pyscript.css" />
+    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
+  </head>
+
+  <py-env>
+    - altair
+    - numpy
+    - pandas
+    - scikit-learn
+    - panel==0.13.1
+  </py-env>
+
+  <body>
+    <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" id="header" style="background-color: #000000;">
+	<button type="button" class="navbar-toggle collapsed" id="sidebarCollapse">
+	  <span class="navbar-toggler-icon"></span>
+	</button>
+	<div class="app-header">
+	  <a class="navbar-brand app-logo" href="/">
+	    <img src="./logo.png" class="app-logo">
+	  </a>
+	  <a class="title" href="" style="color: #f0ab3c;">Panel 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"></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>
+    </div>
+
+    <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>
+
+    <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>