ipywidgets/01_ipywidgets_intro.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Introduction to ipywidgets"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Import `ipywidgets`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "import ipywidgets as widgets"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Simple Integer Slider"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "f4e9008f5cd04946a76838741ca9f9ac",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "IntSlider(value=0)"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.IntSlider()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [],
   "source": [
    "w = widgets.IntSlider()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [],
   "source": [
    "from IPython.display import display"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "e257b36ba8da43d3b64583c03ffbf9ee",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "IntSlider(value=0)"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "display(w)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Slider Properties"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "0"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "w.value"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "['_dom_classes',\n",
       " '_model_module',\n",
       " '_model_module_version',\n",
       " '_model_name',\n",
       " '_view_count',\n",
       " '_view_module',\n",
       " '_view_module_version',\n",
       " '_view_name',\n",
       " 'continuous_update',\n",
       " 'description',\n",
       " 'description_tooltip',\n",
       " 'disabled',\n",
       " 'layout',\n",
       " 'max',\n",
       " 'min',\n",
       " 'orientation',\n",
       " 'readout',\n",
       " 'readout_format',\n",
       " 'step',\n",
       " 'style',\n",
       " 'value']"
      ]
     },
     "execution_count": 7,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "w.keys"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "1"
      ]
     },
     "execution_count": 8,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "w.step"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "fa690bf2ec2844558bfdc65b6eeb29b8",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "IntSlider(value=0, description='Number: ', step=2)"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.IntSlider(step=2, description='Number: ')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Widget Example"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [],
   "source": [
    "import seaborn as sns\n",
    "from matplotlib import pyplot as plt"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Widget with `interact` function syntax"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [],
   "source": [
    "cars = sns.load_dataset('mpg')\n",
    "\n",
    "def bandwidth_widget(bw=1):\n",
    "    sns.kdeplot(cars.horsepower, lw=3, fill=True, bw_adjust=bw)\n",
    "    plt.xlim(-30, 300)\n",
    "    plt.ylim(0, 0.03);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "746a7fcc0cdc4672b50a760515e55a96",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "interactive(children=(FloatSlider(value=1.0, description='bw', max=3.0, min=0.1), Output()), _dom_classes=('wi…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.interact(bandwidth_widget, bw=(.1, 3));"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Widget with `interact` decorator syntax"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "990fce77c7ce42f799807ac596802ba2",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "interactive(children=(FloatSlider(value=2.0, description='bw', max=3.0, min=0.1), Output()), _dom_classes=('wi…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "@widgets.interact(bw=(.1, 3, .1))\n",
    "def bw_widget(bw=2):\n",
    "    sns.kdeplot(cars.horsepower, lw=3, fill=True, bw_adjust=bw)\n",
    "    plt.xlim(-30, 300)\n",
    "    plt.ylim(0, 0.03);"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Overlays and Thumbnail"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Check Box and Dropdown"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {},
   "outputs": [],
   "source": [
    "def kde_widget(fill=True, color='blue'):\n",
    "    sns.kdeplot(cars.horsepower, color=color, lw=3, fill=fill)\n",
    "    plt.xlim(0, 300)\n",
    "    plt.ylim(0, 0.02)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "8ab69c55aba14007add648b000e0e1f1",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "interactive(children=(Checkbox(value=True, description='fill'), Dropdown(description='color', options=('blue',…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.interact(kde_widget, \n",
    "                 fill=True,\n",
    "                 color=['blue', 'red', 'green', 'orange']\n",
    "                 );"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Date Picker"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 17,
   "metadata": {},
   "outputs": [],
   "source": [
    "import datetime\n",
    "from IPython.display import Image"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {},
   "outputs": [],
   "source": [
    "astro_signs = [\n",
    "    ((1, 1), (1, 19), 'Capricorn'),\n",
    "    ((1, 20), (2, 18), 'Aquarius'),\n",
    "    ((2, 19), (3, 20), 'Pisces'),\n",
    "    ((3, 21), (4, 19), 'Aries'),\n",
    "    ((4, 20), (5, 20), 'Taurus'),\n",
    "    ((5, 21), (6, 20), 'Gemini'),\n",
    "    ((6, 21), (7, 22), 'Cancer'),\n",
    "    ((7, 23), (8, 22), 'Leo'),\n",
    "    ((8, 23), (9, 22), 'Virgo'),\n",
    "    ((9, 23), (10, 22), 'Libra'),\n",
    "    ((10, 23), (11, 21), 'Scorpio'),\n",
    "    ((11, 22), (12, 21), 'Sagittarius'),\n",
    "    ((12, 22), (12, 31), 'Capricorn')\n",
    "]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 19,
   "metadata": {},
   "outputs": [],
   "source": [
    "def find_sign(date=datetime.date(1980, 1, 1)):\n",
    "    year = date.year\n",
    "    for sign in astro_signs:\n",
    "        start_month, start_day = sign[0][0], sign[0][1]\n",
    "        end_month, end_day = sign[1][0], sign[1][1]\n",
    "        if (datetime.date(year, start_month, start_day) <= \n",
    "            date <= \n",
    "            datetime.date(year, end_month, end_day)):\n",
    "            astro = sign[-1]\n",
    "            if astro[0] == 'A': \n",
    "                article = 'an'\n",
    "            else:\n",
    "                article = 'a'\n",
    "            print(f\"You're {article} {astro}!\")\n",
    "            display(Image(filename=f'images/{astro}.png'))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 20,
   "metadata": {},
   "outputs": [],
   "source": [
    "w = widgets.DatePicker(\n",
    "    description='Date of Birth: ',\n",
    "    value=datetime.date(1980, 1, 1)\n",
    "    )"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 21,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "0805bc6e7b3c4885bf06c736e2c05352",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "interactive(children=(DatePicker(value=datetime.date(1980, 1, 1), description='Date of Birth: '), Output()), _…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.interact(find_sign, date=w);"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Animation"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 22,
   "metadata": {},
   "outputs": [],
   "source": [
    "def bandwidth_widget_scaled(bw=1):\n",
    "    sns.kdeplot(cars.horsepower, bw_adjust=bw*.1, lw=3, fill=True)\n",
    "    plt.xlim(-30, 300)\n",
    "    plt.ylim(0, .03)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 23,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "5596b4b27f1649fc8be14e38bbf1ef8d",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "interactive(children=(Play(value=1, description='bw', max=20, min=1), Output()), _dom_classes=('widget-interac…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.interact(bandwidth_widget_scaled, bw=widgets.Play(min=1, max=20));"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}