chartpuck

import%20marimo%0A%0A__generated_with%20%3D%20%220.19.4%22%0Aapp%20%3D%20marimo.App(width%3D%22medium%22)%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20import%20marimo%20as%20mo%0A%20%20%20%20import%20matplotlib.pyplot%20as%20plt%0A%20%20%20%20import%20numpy%20as%20np%0A%20%20%20%20from%20wigglystuff%20import%20ChartPuck%0A%20%20%20%20return%20ChartPuck%2C%20mo%2C%20np%2C%20plt%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%22%22%22%0A%20%20%20%20%23%23%20Single%20Puck%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(ChartPuck%2C%20np%2C%20plt)%3A%0A%20%20%20%20%23%20Create%20a%20scatter%20plot%0A%20%20%20%20np.random.seed(42)%0A%20%20%20%20x_data%20%3D%20np.random.randn(50)%0A%20%20%20%20y_data%20%3D%20np.random.randn(50)%0A%0A%20%20%20%20fig%2C%20ax%20%3D%20plt.subplots(figsize%3D(6%2C%206))%0A%20%20%20%20ax.scatter(x_data%2C%20y_data%2C%20alpha%3D0.6)%0A%20%20%20%20ax.set_xlim(-3%2C%203)%0A%20%20%20%20ax.set_ylim(-3%2C%203)%0A%20%20%20%20ax.set_xlabel(%22X%22)%0A%20%20%20%20ax.set_ylabel(%22Y%22)%0A%20%20%20%20ax.set_title(%22Drag%20the%20puck%20to%20select%20coordinates%22)%0A%20%20%20%20ax.grid(True%2C%20alpha%3D0.3)%0A%0A%20%20%20%20puck%20%3D%20ChartPuck(fig%2C%20x%3D0%2C%20y%3D0)%0A%20%20%20%20plt.close(fig)%0A%20%20%20%20return%20(puck%2C)%0A%0A%0A%40app.cell%0Adef%20_(mo%2C%20puck)%3A%0A%20%20%20%20widget%20%3D%20mo.ui.anywidget(puck)%0A%20%20%20%20return%20(widget%2C)%0A%0A%0A%40app.cell%0Adef%20_(widget)%3A%0A%20%20%20%20widget%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(mo%2C%20widget)%3A%0A%20%20%20%20mo.callout(f%22Selected%20position%3A%20x%20%3D%20%7Bwidget.x%5B0%5D%3A.3f%7D%2C%20y%20%3D%20%7Bwidget.y%5B0%5D%3A.3f%7D%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%22%22%22%0A%20%20%20%20%23%23%20Multiple%20Pucks%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(ChartPuck%2C%20np%2C%20plt)%3A%0A%20%20%20%20%23%20Create%20a%20scatter%20plot%20with%20multiple%20pucks%0A%20%20%20%20np.random.seed(123)%0A%20%20%20%20x_multi%20%3D%20np.random.randn(50)%0A%20%20%20%20y_multi%20%3D%20np.random.randn(50)%0A%0A%20%20%20%20fig2%2C%20ax2%20%3D%20plt.subplots(figsize%3D(6%2C%206))%0A%20%20%20%20ax2.scatter(x_multi%2C%20y_multi%2C%20alpha%3D0.6)%0A%20%20%20%20ax2.set_xlim(-3%2C%203)%0A%20%20%20%20ax2.set_ylim(-3%2C%203)%0A%20%20%20%20ax2.set_xlabel(%22X%22)%0A%20%20%20%20ax2.set_ylabel(%22Y%22)%0A%20%20%20%20ax2.set_title(%22Drag%20any%20puck%20-%20closest%20one%20will%20move%22)%0A%20%20%20%20ax2.grid(True%2C%20alpha%3D0.3)%0A%0A%20%20%20%20multi_puck%20%3D%20ChartPuck(%0A%20%20%20%20%20%20%20%20fig2%2C%0A%20%20%20%20%20%20%20%20x%3D%5B-1.5%2C%200%2C%201.5%5D%2C%0A%20%20%20%20%20%20%20%20y%3D%5B-1.5%2C%200%2C%201.5%5D%2C%0A%20%20%20%20%20%20%20%20puck_color%3D%22%232196f3%22%2C%0A%20%20%20%20)%0A%20%20%20%20plt.close(fig2)%0A%20%20%20%20return%20(multi_puck%2C)%0A%0A%0A%40app.cell%0Adef%20_(mo%2C%20multi_puck)%3A%0A%20%20%20%20multi_widget%20%3D%20mo.ui.anywidget(multi_puck)%0A%20%20%20%20return%20(multi_widget%2C)%0A%0A%0A%40app.cell%0Adef%20_(multi_widget)%3A%0A%20%20%20%20multi_widget%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(mo%2C%20multi_widget)%3A%0A%20%20%20%20positions%20%3D%20%5B%0A%20%20%20%20%20%20%20%20f%22Puck%20%7Bi%2B1%7D%3A%20(%7Bx%3A.2f%7D%2C%20%7By%3A.2f%7D)%22%0A%20%20%20%20%20%20%20%20for%20i%2C%20(x%2C%20y)%20in%20enumerate(zip(multi_widget.x%2C%20multi_widget.y))%0A%20%20%20%20%5D%0A%20%20%20%20mo.callout(%22%5Cn%22.join(positions))%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%22%22%22%0A%20%20%20%20%23%23%20Dynamic%20Chart%20Updates%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(np)%3A%0A%20%20%20%20np.random.seed(42)%0A%20%20%20%20dynamic_data_x%20%3D%20np.random.randn(50)%0A%20%20%20%20dynamic_data_y%20%3D%20np.random.randn(50)%0A%20%20%20%20return%20dynamic_data_x%2C%20dynamic_data_y%0A%0A%0A%40app.cell%0Adef%20_(ChartPuck%2C%20dynamic_data_x%2C%20dynamic_data_y)%3A%0A%20%20%20%20def%20draw_with_crosshairs(ax%2C%20x%2C%20y)%3A%0A%20%20%20%20%20%20%20%20ax.scatter(dynamic_data_x%2C%20dynamic_data_y%2C%20alpha%3D0.6)%0A%20%20%20%20%20%20%20%20ax.axvline(x%2C%20color%3D%22red%22%2C%20linestyle%3D%22--%22%2C%20alpha%3D0.7)%0A%20%20%20%20%20%20%20%20ax.axhline(y%2C%20color%3D%22red%22%2C%20linestyle%3D%22--%22%2C%20alpha%3D0.7)%0A%20%20%20%20%20%20%20%20ax.set_title(f%22Position%3A%20(%7Bx%3A.2f%7D%2C%20%7By%3A.2f%7D)%22)%0A%20%20%20%20%20%20%20%20ax.grid(True%2C%20alpha%3D0.3)%0A%0A%0A%20%20%20%20dynamic_puck%20%3D%20ChartPuck.from_callback(%0A%20%20%20%20%20%20%20%20draw_fn%3Ddraw_with_crosshairs%2C%0A%20%20%20%20%20%20%20%20x_bounds%3D(-3%2C%203)%2C%0A%20%20%20%20%20%20%20%20y_bounds%3D(-3%2C%203)%2C%0A%20%20%20%20%20%20%20%20figsize%3D(6%2C%206)%2C%0A%20%20%20%20%20%20%20%20x%3D0%2C%0A%20%20%20%20%20%20%20%20y%3D0%2C%0A%20%20%20%20%20%20%20%20puck_color%3D%22%234caf50%22%2C%0A%20%20%20%20)%0A%20%20%20%20return%20(dynamic_puck%2C)%0A%0A%0A%40app.cell%0Adef%20_(dynamic_puck%2C%20mo)%3A%0A%20%20%20%20dynamic_widget%20%3D%20mo.ui.anywidget(dynamic_puck)%0A%20%20%20%20return%20(dynamic_widget%2C)%0A%0A%0A%40app.cell%0Adef%20_(dynamic_widget)%3A%0A%20%20%20%20dynamic_widget%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(dynamic_widget%2C%20mo)%3A%0A%20%20%20%20mo.callout(f%22Dynamic%20position%3A%20x%20%3D%20%7Bdynamic_widget.x%5B0%5D%3A.3f%7D%2C%20y%20%3D%20%7Bdynamic_widget.y%5B0%5D%3A.3f%7D%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%22%22%22%0A%20%20%20%20%23%23%20Interactive%20K-Means%20Clustering%0A%0A%20%20%20%20Drag%20the%2010%20pucks%20to%20explore%20how%20cluster%20centroids%20affect%20digit%20classification.%0A%20%20%20%20The%20chart%20below%20shows%20the%20nearest%20digit%20images%20to%20each%20puck%20position.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20run_kmeans_button%20%3D%20mo.ui.run_button(label%3D%22Load%20K-Means%20Demo%22)%0A%20%20%20%20run_kmeans_button%0A%20%20%20%20return%20(run_kmeans_button%2C)%0A%0A%0A%40app.cell%0Adef%20_(mo%2C%20run_kmeans_button)%3A%0A%20%20%20%20mo.stop(%0A%20%20%20%20%20%20%20%20not%20run_kmeans_button.value%2C%0A%20%20%20%20%20%20%20%20mo.md(%22*Click%20the%20button%20above%20to%20load%20the%20interactive%20k-means%20demo.*%22)%2C%0A%20%20%20%20)%0A%0A%20%20%20%20from%20sklearn.datasets%20import%20load_digits%0A%20%20%20%20from%20sklearn.decomposition%20import%20PCA%0A%0A%20%20%20%20%23%20Load%20digits%20dataset%20and%20reduce%20to%202D%0A%20%20%20%20digits%20%3D%20load_digits()%0A%20%20%20%20reduced_data%20%3D%20PCA(n_components%3D2).fit_transform(digits.data)%0A%0A%20%20%20%20%23%20Compute%20bounds%20with%20padding%0A%20%20%20%20x_min%2C%20x_max%20%3D%20reduced_data%5B%3A%2C%200%5D.min()%20-%201%2C%20reduced_data%5B%3A%2C%200%5D.max()%20%2B%201%0A%20%20%20%20y_min%2C%20y_max%20%3D%20reduced_data%5B%3A%2C%201%5D.min()%20-%201%2C%20reduced_data%5B%3A%2C%201%5D.max()%20%2B%201%0A%20%20%20%20return%20digits%2C%20reduced_data%2C%20x_max%2C%20x_min%2C%20y_max%2C%20y_min%0A%0A%0A%40app.cell%0Adef%20_(ChartPuck%2C%20np%2C%20plt%2C%20reduced_data%2C%20x_max%2C%20x_min%2C%20y_max%2C%20y_min)%3A%0A%20%20%20%20def%20draw_kmeans_boundaries(ax%2C%20centroids%2C%20reduced_data%2C%20x_min%2C%20x_max%2C%20y_min%2C%20y_max)%3A%0A%20%20%20%20%20%20%20%20from%20sklearn.cluster%20import%20KMeans%0A%0A%20%20%20%20%20%20%20%20h%20%3D%200.3%20%20%23%20mesh%20step%20size%0A%20%20%20%20%20%20%20%20xx%2C%20yy%20%3D%20np.meshgrid(np.arange(x_min%2C%20x_max%2C%20h)%2C%20np.arange(y_min%2C%20y_max%2C%20h))%0A%0A%20%20%20%20%20%20%20%20%23%20Create%20KMeans%20with%20our%20centroids%0A%20%20%20%20%20%20%20%20kmeans%20%3D%20KMeans(%0A%20%20%20%20%20%20%20%20%20%20%20%20n_clusters%3Dlen(centroids)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20init%3Dnp.array(centroids)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20n_init%3D1%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20max_iter%3D1%2C%20%20%23%20Just%20use%20our%20centroids%2C%20don't%20iterate%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20kmeans.fit(reduced_data)%0A%0A%20%20%20%20%20%20%20%20%23%20Predict%20on%20mesh%0A%20%20%20%20%20%20%20%20Z%20%3D%20kmeans.predict(np.c_%5Bxx.ravel()%2C%20yy.ravel()%5D)%0A%20%20%20%20%20%20%20%20Z%20%3D%20Z.reshape(xx.shape)%0A%0A%20%20%20%20%20%20%20%20%23%20Draw%20decision%20boundaries%0A%20%20%20%20%20%20%20%20ax.imshow(%0A%20%20%20%20%20%20%20%20%20%20%20%20Z%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20interpolation%3D%22nearest%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20extent%3D(xx.min()%2C%20xx.max()%2C%20yy.min()%2C%20yy.max())%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20cmap%3Dplt.cm.tab10%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20aspect%3D%22auto%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20origin%3D%22lower%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20alpha%3D0.6%2C%0A%20%20%20%20%20%20%20%20)%0A%0A%20%20%20%20%20%20%20%20%23%20Draw%20data%20points%0A%20%20%20%20%20%20%20%20ax.plot(reduced_data%5B%3A%2C%200%5D%2C%20reduced_data%5B%3A%2C%201%5D%2C%20%22k.%22%2C%20markersize%3D2)%0A%0A%20%20%20%20%20%20%20%20%23%20Draw%20centroids%20with%20cluster%20numbers%0A%20%20%20%20%20%20%20%20centroids_arr%20%3D%20np.array(centroids)%0A%20%20%20%20%20%20%20%20for%20i%2C%20(cx%2C%20cy)%20in%20enumerate(centroids_arr)%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20ax.scatter(cx%2C%20cy%2C%20marker%3D%22o%22%2C%20s%3D200%2C%20c%3D%22white%22%2C%20edgecolors%3D%22black%22%2C%20zorder%3D10)%0A%20%20%20%20%20%20%20%20%20%20%20%20ax.text(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20cx%2C%20cy%2C%20str(i)%2C%20ha%3D%22center%22%2C%20va%3D%22center%22%2C%20fontsize%3D10%2C%20fontweight%3D%22bold%22%2C%20zorder%3D11%0A%20%20%20%20%20%20%20%20%20%20%20%20)%0A%0A%20%20%20%20%20%20%20%20ax.set_title(%22Drag%20pucks%20to%20move%20cluster%20centroids%22)%0A%20%20%20%20%20%20%20%20ax.set_xlim(x_min%2C%20x_max)%0A%20%20%20%20%20%20%20%20ax.set_ylim(y_min%2C%20y_max)%0A%0A%0A%20%20%20%20%23%20Initial%20centroid%20positions%20(spread%20in%20a%20grid%20pattern)%0A%20%20%20%20init_x%20%3D%20%5B-30%2C%20-15%2C%200%2C%2015%2C%2030%2C%20-30%2C%20-15%2C%200%2C%2015%2C%2030%5D%0A%20%20%20%20init_y%20%3D%20%5B-20%2C%20-20%2C%20-20%2C%20-20%2C%20-20%2C%2020%2C%2020%2C%2020%2C%2020%2C%2020%5D%0A%0A%20%20%20%20%23%20Create%20initial%20figure%0A%20%20%20%20fig_km%2C%20ax_km%20%3D%20plt.subplots(figsize%3D(6%2C%205))%0A%20%20%20%20initial_centroids%20%3D%20list(zip(init_x%2C%20init_y))%0A%20%20%20%20draw_kmeans_boundaries(ax_km%2C%20initial_centroids%2C%20reduced_data%2C%20x_min%2C%20x_max%2C%20y_min%2C%20y_max)%0A%0A%20%20%20%20%23%20Create%20widget%20with%2010%20pucks%20(one%20for%20each%20digit)%0A%20%20%20%20kmeans_puck%20%3D%20ChartPuck(%0A%20%20%20%20%20%20%20%20fig_km%2C%0A%20%20%20%20%20%20%20%20x%3Dinit_x%2C%0A%20%20%20%20%20%20%20%20y%3Dinit_y%2C%0A%20%20%20%20%20%20%20%20puck_color%3D%22%23e63946%22%2C%0A%20%20%20%20%20%20%20%20puck_radius%3D8%2C%0A%20%20%20%20)%0A%20%20%20%20plt.close(fig_km)%0A%0A%0A%20%20%20%20%23%20Set%20up%20observer%20to%20redraw%20on%20puck%20movement%0A%20%20%20%20def%20on_kmeans_change(change)%3A%0A%20%20%20%20%20%20%20%20fig_update%2C%20ax_update%20%3D%20plt.subplots(figsize%3D(6%2C%205))%0A%20%20%20%20%20%20%20%20centroids%20%3D%20list(zip(kmeans_puck.x%2C%20kmeans_puck.y))%0A%20%20%20%20%20%20%20%20draw_kmeans_boundaries(ax_update%2C%20centroids%2C%20reduced_data%2C%20x_min%2C%20x_max%2C%20y_min%2C%20y_max)%0A%20%20%20%20%20%20%20%20from%20wigglystuff.chart_puck%20import%20fig_to_base64%0A%0A%20%20%20%20%20%20%20%20kmeans_puck.chart_base64%20%3D%20fig_to_base64(fig_update)%0A%20%20%20%20%20%20%20%20plt.close(fig_update)%0A%0A%0A%20%20%20%20kmeans_puck.observe(on_kmeans_change%2C%20names%3D%5B%22x%22%2C%20%22y%22%5D)%0A%20%20%20%20return%20(kmeans_puck%2C)%0A%0A%0A%40app.cell%0Adef%20_(kmeans_puck%2C%20mo)%3A%0A%20%20%20%20kmeans_widget%20%3D%20mo.ui.anywidget(kmeans_puck)%0A%20%20%20%20return%20(kmeans_widget%2C)%0A%0A%0A%40app.cell%0Adef%20_(digits%2C%20kmeans_widget%2C%20mo%2C%20np%2C%20plt%2C%20reduced_data)%3A%0A%20%20%20%20def%20get_nearest_digits(centroids%2C%20reduced_data%2C%20digits%2C%20n_nearest%3D5)%3A%0A%20%20%20%20%20%20%20%20%22%22%22Find%20the%20n%20nearest%20digit%20images%20to%20each%20centroid.%22%22%22%0A%20%20%20%20%20%20%20%20nearest_per_centroid%20%3D%20%5B%5D%0A%20%20%20%20%20%20%20%20for%20cx%2C%20cy%20in%20centroids%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20distances%20%3D%20np.sqrt((reduced_data%5B%3A%2C%200%5D%20-%20cx)%20**%202%20%2B%20(reduced_data%5B%3A%2C%201%5D%20-%20cy)%20**%202)%0A%20%20%20%20%20%20%20%20%20%20%20%20nearest_indices%20%3D%20np.argsort(distances)%5B%3An_nearest%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20nearest_per_centroid.append(nearest_indices)%0A%20%20%20%20%20%20%20%20return%20nearest_per_centroid%0A%0A%0A%20%20%20%20%23%20Get%20current%20puck%20positions%20as%20centroids%0A%20%20%20%20centroids%20%3D%20list(zip(kmeans_widget.x%2C%20kmeans_widget.y))%0A%20%20%20%20nearest_indices%20%3D%20get_nearest_digits(centroids%2C%20reduced_data%2C%20digits%2C%20n_nearest%3D5)%0A%0A%20%20%20%20%23%20Create%20a%20figure%20showing%20nearest%20digits%20for%20each%20puck%0A%20%20%20%20fig_digits%2C%20axes%20%3D%20plt.subplots(10%2C%205%2C%20figsize%3D(4%2C%208))%0A%20%20%20%20fig_digits.suptitle(%22Nearest%20digits%20to%20each%20puck%22%2C%20fontsize%3D10)%0A%0A%20%20%20%20for%20puck_idx%2C%20indices%20in%20enumerate(nearest_indices)%3A%0A%20%20%20%20%20%20%20%20for%20col_idx%2C%20digit_idx%20in%20enumerate(indices)%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20_ax%20%3D%20axes%5Bpuck_idx%2C%20col_idx%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20_ax.imshow(digits.images%5Bdigit_idx%5D%2C%20cmap%3D%22gray_r%22)%0A%20%20%20%20%20%20%20%20%20%20%20%20_ax.axis(%22off%22)%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20col_idx%20%3D%3D%200%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20_ax.set_title(f%22%7Bpuck_idx%7D%22%2C%20fontsize%3D8%2C%20loc%3D%22left%22)%0A%0A%20%20%20%20plt.tight_layout()%0A%0A%20%20%20%20%23%20Display%20both%20charts%20side%20by%20side%0A%20%20%20%20mo.hstack(%5Bkmeans_widget%2C%20fig_digits%5D%2C%20justify%3D%22center%22%2C%20gap%3D2)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%22%22%22%0A%20%20%20%20%23%23%23%20Export%20to%20scikit-learn%0A%0A%20%20%20%20Use%20%60export_kmeans()%60%20to%20get%20a%20scikit-learn%20KMeans%20instance%20with%20your%20puck%20positions%20as%20initial%20centroids%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(kmeans_widget)%3A%0A%20%20%20%20%23%20Export%20puck%20positions%20as%20a%20KMeans%20estimator%0A%20%20%20%20kmeans_estimator%20%3D%20kmeans_widget.export_kmeans()%0A%20%20%20%20print(f%22KMeans%20with%20%7Bkmeans_estimator.n_clusters%7D%20clusters%22)%0A%20%20%20%20print(f%22Initial%20centroids%3A%5Cn%7Bkmeans_estimator.init%7D%22)%0A%20%20%20%20return%0A%0A%0Aif%20__name__%20%3D%3D%20%22__main__%22%3A%0A%20%20%20%20app.run()%0A