starcore-explorer-bad/content/pyodide/interactive-widgets.ipynb
2023-06-24 01:19:43 +08:00

269 lines
5.8 KiB
Plaintext

{
"cells": [
{
"cell_type": "markdown",
"id": "9ca234f7-84b7-4107-9bcd-74f5a4ffd07d",
"metadata": {},
"source": [
"# `ipywidgets` Interactive Demo\n",
"\n",
"Simple demonstration of rendering Interactive widgets in a `jupyterlite` notebook.\n",
"\n",
"`ipywidgets` can be installed in this deployment (it provides the @jupyter-widgets/jupyterlab-manager federated extension), but you will need to make your own deployment to have access to other interactive widgets libraries."
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "d62fba6e",
"metadata": {},
"outputs": [],
"source": [
"%pip install -q ipywidgets"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "3bab23f8-de91-43c9-9cec-84f4924425fc",
"metadata": {},
"outputs": [],
"source": [
"from ipywidgets import IntSlider"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "a15c5acb-ee72-4005-8761-5693db853f22",
"metadata": {},
"outputs": [],
"source": [
"slider = IntSlider()"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "8ba89682-e0d7-4bd2-961a-f9956850fd5a",
"metadata": {},
"outputs": [],
"source": [
"slider"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "50510ade-668f-4477-8cb2-41574609ac73",
"metadata": {},
"outputs": [],
"source": [
"slider"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "7bac1ed8-8c77-426b-a781-1c1a6cfad829",
"metadata": {},
"outputs": [],
"source": [
"slider.value"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "976a70a0-e99d-4c20-b005-f59bbba10f85",
"metadata": {},
"outputs": [],
"source": [
"slider.value = 5"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "3134c76e-cffb-4701-8230-e6c4bfbbfdb9",
"metadata": {},
"outputs": [],
"source": [
"from ipywidgets import IntText, link"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "f7b3fe0a-5695-4ef2-a573-40785e68fbae",
"metadata": {},
"outputs": [],
"source": [
"text = IntText()"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "5e2fd50e-19e0-4e20-a1f7-ad65400ec636",
"metadata": {},
"outputs": [],
"source": [
"text"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "bb3bedce-7311-48c0-aeab-8fe3aa554b92",
"metadata": {},
"outputs": [],
"source": [
"link((slider, 'value'), (text, 'value'));"
]
},
{
"cell_type": "markdown",
"id": "71b68c3e-184e-4320-9513-d0bc72800a85",
"metadata": {},
"source": [
"# `bqplot` Interactive Demo\n",
"\n",
"Plotting in JupyterLite\n",
"\n",
"`bqplot` can be installed in this deployment (it provides the bqplot federated extension), but you will need to make your own deployment to have access to other interactive widgets libraries."
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "119eb9a3-ac98-42c3-98d4-1ac460eb75d3",
"metadata": {},
"outputs": [],
"source": [
"%pip install -q bqplot"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "23b32857-2958-4083-b16a-ac26cd2408d4",
"metadata": {},
"outputs": [],
"source": [
"from bqplot import *\n",
"\n",
"import numpy as np\n",
"import pandas as pd\n",
"\n",
"np.random.seed(0)\n",
"\n",
"n = 100\n",
"\n",
"x = list(range(n))\n",
"y = np.cumsum(np.random.randn(n)) + 100.\n",
"\n",
"sc_x = LinearScale()\n",
"sc_y = LinearScale()\n",
"\n",
"lines = Lines(\n",
" x=x, y=y,\n",
" scales={'x': sc_x, 'y': sc_y}\n",
")\n",
"ax_x = Axis(scale=sc_x, label='Index')\n",
"ax_y = Axis(scale=sc_y, orientation='vertical', label='lines')\n",
"\n",
"Figure(marks=[lines], axes=[ax_x, ax_y], title='Lines')"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "ddb6b44e-06a0-4049-a79d-33ffc90d5a03",
"metadata": {},
"outputs": [],
"source": [
"lines.colors = ['green']"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "e367e7fb-b403-41aa-9629-224827ec3005",
"metadata": {},
"outputs": [],
"source": [
"lines.fill = 'bottom'"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "d4a167f3-07c4-4880-92f5-7fcdea0c61c6",
"metadata": {},
"outputs": [],
"source": [
"lines.marker = 'circle'"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "1d1342f7-ec08-4f53-84dc-d712226d9e46",
"metadata": {},
"outputs": [],
"source": [
"n = 100\n",
"\n",
"x = list(range(n))\n",
"y = np.cumsum(np.random.randn(n))\n",
"\n",
"sc_x = LinearScale()\n",
"sc_y = LinearScale()\n",
"\n",
"bars = Bars(\n",
" x=x, y=y,\n",
" scales={'x': sc_x, 'y': sc_y}\n",
")\n",
"ax_x = Axis(scale=sc_x, label='Index')\n",
"ax_y = Axis(scale=sc_y, orientation='vertical', label='bars')\n",
"\n",
"Figure(marks=[bars], axes=[ax_x, ax_y], title='Bars', animation_duration=1000)"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "f86bbcfb-5b02-4700-b8d6-f90068893b55",
"metadata": {},
"outputs": [],
"source": [
"bars.y = np.cumsum(np.random.randn(n))"
]
}
],
"metadata": {
"kernelspec": {
"display_name": "Python (Pyodide)",
"language": "python",
"name": "python"
},
"language_info": {
"codemirror_mode": {
"name": "python",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.8"
},
"orig_nbformat": 4,
"toc-showcode": false
},
"nbformat": 4,
"nbformat_minor": 5
}