starcore-explorer-bad/content/pyodide/interactive-widgets.ipynb

{
 "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
}