04_widgets.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "f961b01b-e8c5-4ecf-909b-982fe2a494d9",
   "metadata": {},
   "source": [
    "# Dashboard Widgets\n",
    "In this module, we will use ipywidgets to turn our workflow into a data dashboard. To achieve this, we have several substeps to accomplish. Some are the same as the original workflow. New steps are bolded."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "b3026a02-fb27-4620-a6b0-3378e2d37f27",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| default_exp widgets"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "526768ba-e36b-426e-b2e5-35adef69020c",
   "metadata": {},
   "source": [
    "1. Load data from file\n",
    "2. Use a slider widget to select and display selected range of years\n",
    "    - Use the slider value to update the `selected` data\n",
    "    - Update the `selected` data *every time* the range is modified\n",
    "3. Update selected dataframe with new range\n",
    "4. Add column for Savitzky-Golay filter\n",
    "5. Visualizae data with plot\n",
    "\n",
    "\n",
    "We will learn how to...\n",
    "\n",
    "1. Import ipywidgets\n",
    "2. Set trait values\n",
    "3. Observe trait changes\n",
    "4. Unobserve trait changes\n",
    "5. Display things with output widgets\n",
    "6. Use container widgets to create layouts"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "41ed38cf-fc0b-4ef5-8c9b-2619f4ab3058",
   "metadata": {},
   "source": [
    "## Preview the Final Product"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d8a59617-f05b-48fc-afcd-79f534a02e96",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "361e3273c8784ac59db7b491fe95cd56",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "HBox(children=(VBox(children=(HTML(value='\\n<p><b>Curve Smoothing</b>\\nThis tool is for smoothing and selectin…"
      ]
     },
     "execution_count": null,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from key.dashboard.main import main_widget\n",
    "\n",
    "main_widget"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "8ad7eb7b-1a62-494d-82bb-bb457ebbf6b2",
   "metadata": {},
   "source": [
    "### Import ipywidgets\n",
    "Let's add an import statement for ipywidgets. We will use a lot of widgets, so it's good to import ipywidgets as widgets, or something similiarly short. Add an import statement below and then go to [ipywidgets documentation site](https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20List.html) to get a sense of what kind of widgets there are."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "e5c6ecde-5850-4d35-903e-6ed258669fe6",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| export\n",
    "# %answer key/dashboard/widgets.py 6\n",
    "\n",
    "import pandas as pd\n",
    "import os\n",
    "from matplotlib import pyplot as plt\n",
    "from scipy.signal import savgol_filter\n",
    "# add import statement"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "12edac50-71aa-43c8-b94b-4bafc9d5c943",
   "metadata": {},
   "source": [
    "## Load Data from File\n",
    "\n",
    "Now we will load the data, just like last time."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "2754b1af-94db-4775-83fc-f1d178180fd0",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| export\n",
    "DATA_DIR = 'data'\n",
    "DATA_FILE = 'land-ocean-temp-index.csv'\n",
    "\n",
    "original_data = pd.read_csv(os.path.join(DATA_DIR, DATA_FILE), escapechar='#')\n",
    "original_data"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "8dfa4039-7f5d-4e8e-87e0-4a9b86f86c9e",
   "metadata": {},
   "source": [
    "## Goal: Use a slider widget to select and display selected range of years\n",
    "\n",
    "Okay. Now we want to select the data and also update the display of the dataframe. To do this, we will use our first ipywidget. Because we are selecting a range of years, we will use the `IntRangeSlider` widget, which has two click and drag nobs. Let's see what that looks like and play around with the click-and-drag functionality."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "ee19e21f-6159-4e5f-b44c-916c7a036361",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| export\n",
    "year_range = widgets.IntRangeSlider(description = 'Range of Years')\n",
    "year_range"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ce69851a-0cc5-489c-967f-c46663e37350",
   "metadata": {},
   "source": [
    "Okay great! Plat But 0 - 100 isn't the range we want. Instead, we would like the minimum and maximum to be the earliest and latest years in our dataset. So we need to obtain those first. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "b1fa20d9-7431-4117-a9a9-5b66302605d9",
   "metadata": {},
   "outputs": [],
   "source": [
    "(min(original_data['Year']), max(original_data['Year']))"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "dc9e4f88-ee00-4665-9ddf-3c16e71b9de3",
   "metadata": {},
   "source": [
    "### Set Trait Values"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "0464be4a-4d35-4089-8047-d97b87eb7c77",
   "metadata": {},
   "source": [
    "That looks right. Let's use the same syntax to set the min and max of the slider widget."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "60755adb-0aef-488a-8b6c-fdbe21b6af5e",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| export\n",
    "# %answer key/dashboard/widgets.py 15\n",
    "\n",
    "# set the 'max' attribute of the slider to the minimum year of the our data  \n",
    "# and let's do the same for 'min'"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a838e4c9-0ab3-4bd5-abe7-02215b6a4488",
   "metadata": {},
   "source": [
    "Okay that looks a lot better, but how to we actually get the value of the range from the widget? Generally, most widgets have a `value` attribute, but since there are actually two values in a range, I'm not sure what to expect. Let's see what happens when we try and poll the value attribute. What data type is it?"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "76e46257-deee-4736-857b-46e10dbe0946",
   "metadata": {},
   "outputs": [],
   "source": [
    "year_range.value"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "74c336fe-ece1-424c-a712-458aff545fe0",
   "metadata": {},
   "source": [
    "That looks like a tuple. Let's try setting the value programmatically as well."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "50aa5155-63a7-4b4a-9e2c-25011324aba3",
   "metadata": {},
   "outputs": [],
   "source": [
    "year_range.value = (1900, 2000)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "899b89cd-ebc3-4d1d-afd3-104a006b7318",
   "metadata": {},
   "source": [
    "Okay, now that we can get the range from the slider, how do we relect those selections back to the dataframe? \n",
    "\n",
    "## Use the slider value to update the `selected` data\n",
    "Well, we probably want to keep two copies, because if we change the original to have a shorter range, and then we want to expand that range, we're going to have lost data. So let's maintain a dataframe called `selected` that reflects the range specified by the Slider. Let's look at how we did that in workflow.ipynb. \n",
    "\n",
    "```python\n",
    "selected = original_data[(original_data['Year'] >= from_year) & (original_data['Year'] <= to_year)]\n",
    "```\n",
    "\n",
    "The only difference is this time, we need to replace \"from_year\" and \"to_year\" with the value of our slider. Try that on your own in the cells below."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "2af0625b-1774-4895-a335-7522c58bf960",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| export\n",
    "# %answer key/dashboard/widgets.py 21\n",
    "\n",
    "# selected = original_data[(original_data['Year'] >= from_year) & (original_data['Year'] <= to_year)]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "7542d02c-ed8b-409b-a5f7-fddac5b42e06",
   "metadata": {},
   "outputs": [],
   "source": [
    "selected"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e0e99fba-395f-4dc8-80b2-de3d120578da",
   "metadata": {},
   "source": [
    "Okay, that's a start. But now we want to do this dynamically. That is, we want the line above to be called every time the range is modified. \n",
    "\n",
    "## Update the `selected` data *every time* the range is modified\n",
    "\n",
    "How do we track changes to the value of the slider?\n",
    "\n",
    "### Observing trait changes\n",
    "\n",
    "Widgets are built on the `traitlets` library, which we will learn more about later on. Attributes of objects that inherit the `HasTraits` class, such as widgets do, are called traits. Any trait can be \"observed\" for changes. This means we can observe the \"value\" trait of the slider for changes."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "1e4cc6a5-ac6a-488c-8dce-43387e99e032",
   "metadata": {},
   "outputs": [],
   "source": [
    "def on_range_change(change):\n",
    "    print(change)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "4c51896c-d38b-49e0-98a1-09382314ba3f",
   "metadata": {},
   "outputs": [],
   "source": [
    "year_range.observe(on_range_change, 'value')"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "82011a05-8e12-4150-a0f0-fa90fe1fd7bd",
   "metadata": {},
   "source": [
    "So if we change the value of the slider, our observe function will print the `change`. But what type of data is `change`? Let's find out by changing the value of the slider programmatically."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "661de20a-3160-43d9-8b25-5835e8f2e90e",
   "metadata": {},
   "outputs": [],
   "source": [
    "year_range.value = (1880, 2000)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a4ee768e-6d90-4444-a325-1f4276fda768",
   "metadata": {},
   "source": [
    "So there are a lot of things going on here. Now we know that `change` is a dictionary. There are a lot of key/value pairs here, but the most important one's for us right now are the \"old\" and \"new\" keys. We can use them to see what the value trait used to be, and what it was updated to. "
   ]
  },
  {
   "cell_type": "markdown",
   "id": "8263e67d-d239-4477-a1a9-4e5c68a5dd2f",
   "metadata": {},
   "source": [
    "## Update `selected` dataframe with new range\n",
    "Now that we know how to observe changes in the slider value, we want to use that observe function to update the `selected` dataframe. Let's rewrite the `on_range_change` function so that it updates the `selected` dataframe."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "979cf0b4-3164-49db-bc7d-f736ff1ea522",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| export\n",
    "def on_range_change(change):\n",
    "    global selected\n",
    "    selected = original_data[(original_data['Year'] >= change['new'][0]) & (original_data['Year'] <= change['new'][1])]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "bbcdc4ee-003d-486d-a476-48904f9a3212",
   "metadata": {},
   "outputs": [],
   "source": [
    "year_range.observe(on_range_change, 'value')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "dba5dddf-8b7e-4663-a500-34fdf1ec4d76",
   "metadata": {},
   "outputs": [],
   "source": [
    "year_range.value = (1990, 1993)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "bcf1ccfe-704d-44fc-915d-837214bb7053",
   "metadata": {},
   "outputs": [],
   "source": [
    "selected"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "dffd6b33-466c-4759-ac30-c8abd7a5df24",
   "metadata": {},
   "source": [
    "That worked really well! But we are still printing the change. I thought we redefined the function! As it turns out, both versions of the function have copies that are called when there is a change. "
   ]
  },
  {
   "cell_type": "markdown",
   "id": "83c0238e-b1f1-42af-be97-64f10f3734d0",
   "metadata": {},
   "source": [
    "### Unobserve trait changes\n",
    "\n",
    "To get rid of all those observe functions, we use the `unobserve_all` method. Go ahead and try that."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "62cfcbd0-9c9c-446f-810a-e32031f463c4",
   "metadata": {},
   "outputs": [],
   "source": [
    "year_range.unobserve_all()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "f47a2ee8-d763-41ea-a6f7-bec2e6a9ef80",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%exception\n",
    "\n",
    "year_range.observe(on_range_change)\n",
    "year_range.value = (1993, 1996)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "0be7ffd7-09d9-4569-91e3-859ca13eee93",
   "metadata": {},
   "source": [
    "Hmmmm.... it seems that we've gotten an error. Sort of a weird one. I think we are missing something on our observe call. Can you think of what it is? I think it has something to do with the `observe()` parameters. Go ahead and make the changes needed below."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "928b3283-f1bf-4ce0-9697-107cc0ea064a",
   "metadata": {},
   "outputs": [],
   "source": [
    "year_range.unobserve_all()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "75819dae-4645-4273-8e8c-23c6a3855794",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| export\n",
    "# %answer key/dashboard/widgets.py  40\n",
    "\n",
    "year_range.observe(on_range_change)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "f3dee888-fa47-4965-b8c6-5bd40874c247",
   "metadata": {},
   "outputs": [],
   "source": [
    "year_range.value = (1900, 2000)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f82900ec-70fa-4d56-91f0-f8f100ceffe1",
   "metadata": {},
   "source": [
    "Does it run like it's supposed to now? Great! Now that we have that down, the next step is to update the dataframe display every time the range is changed. But how do we achieve that? The dataframe isn't actually a widget yet. It's just being displayed with ipython. But we can turn anything that can be displayed with ipython into a widget with Output."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "95a21862-c3e2-47fa-a435-1cc096728815",
   "metadata": {},
   "source": [
    "## Output widgets\n",
    "\n",
    "First, let's see what output looks like on it's own."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "100c959a-101c-4d89-9545-3f877d74d0c2",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| export\n",
    "selected_data_output = widgets.Output()\n",
    "selected_data_output"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "590c3e5f-2b5e-4897-bebd-9a98eb2cf328",
   "metadata": {},
   "source": [
    "Pretty boring. **Let's right click on the Output widget and \"Create new view for output\"** for now. How do we get it to display our dataframe? We use the Output widget as a context manager. Anything that we can display with ipython.display can be displayed by the Output widget using the following syntax."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "fdd92318-fc39-4a42-8ebb-4255612613fc",
   "metadata": {},
   "outputs": [],
   "source": [
    "with selected_data_output:\n",
    "    display(original_data)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "8a21b7a1-ad8e-41c3-9201-b2fe30103f15",
   "metadata": {},
   "source": [
    "Voila! The selected_data_output widget now displays the dataframe. Now we need to be able to update that display in case someone changes the range. Let's write a function for this."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "3e2660a0-2cad-4033-8e65-16483f6ae543",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| export\n",
    "\n",
    "def display_selected_data(change): \n",
    "    selected_data_output.clear_output(wait=True)\n",
    "    with selected_data_output: \n",
    "        display(selected)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "b1ea50be-0978-431d-a4a0-9f99429f6ac1",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| export\n",
    "display_selected_data(None)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "8f2cc082-3d7f-4c2f-9efd-2537d39a851a",
   "metadata": {},
   "source": [
    "Cool! Now the only thing that is missing is that we want to call this function every time the range is updated. How might we go about that?"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "57866615-000c-4be9-b551-821e9f36829c",
   "metadata": {},
   "source": [
    "Well, we could use another observe function! Let's try it."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "1f83030d-648e-4ad3-99bb-8835fa07c2fb",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| export\n",
    "year_range.observe(display_selected_data, 'value')"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "c47a2de8-6193-40bb-8f26-f33107b5099c",
   "metadata": {},
   "source": [
    "Okay let's create another copy of the slider so we can change the value that way. Then go ahead and move the range around. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "e7647b5d-b4d4-46a9-b1a3-8bd626a1a4d4",
   "metadata": {},
   "outputs": [],
   "source": [
    "year_range"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "eab31b81-150d-4065-add3-e2460bfc63b1",
   "metadata": {},
   "source": [
    "Way cool. Now our dataframe reflects the range of values."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "7c7e7630-f949-4003-81f6-70b94e5108c2",
   "metadata": {},
   "source": [
    "## Add column for Savitzky-Golay filter\n",
    "\n",
    "Now we have data selection down, so the next step is to also add a column to our data for the smoothed curve. Let's review what we had in the workflow. Keep in mind that we will be working with `original_data` instead of `selected` for a while."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "8da0f8a4-dfb2-4f0e-b674-bcb1d9a70f0d",
   "metadata": {},
   "outputs": [],
   "source": [
    "# Set the window size and polynomial order for the Savitzky-Golay filter\n",
    "window_size = 20\n",
    "poly_order = 3"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "b7985289-2be0-4f62-b427-c4d19f5378fc",
   "metadata": {},
   "outputs": [],
   "source": [
    "# Apply Savitzky-Golay smoothing to the Temperature column\n",
    "original_data['Savitzky-Golay'] = savgol_filter(original_data['Temperature'], window_size, poly_order)\n",
    "original_data"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2437578e-7166-4ce9-8f51-a5d6769b048b",
   "metadata": {},
   "source": [
    "Okay. So we have these two variables that we want to turn into sliders. Let's make the Sliders first."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "2f65341b-948f-4c60-8bcd-cd45083610b4",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| export\n",
    "window_size = widgets.IntSlider(description = 'Window Size', min=1, max=100)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "1789aa10-fdbf-4ed1-8f05-f826ba30ef01",
   "metadata": {},
   "outputs": [],
   "source": [
    "window_size"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "f2a89387-5334-4b89-a227-e32ad25290b2",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| export\n",
    "poly_order = widgets.BoundedIntText(description = 'Poly Order', min=0, max=10)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "cbf95d58-0045-4272-9f9f-56430779ff41",
   "metadata": {},
   "outputs": [],
   "source": [
    "poly_order"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f7f1fe98-93c2-4ad2-b69c-6672ff86b4cf",
   "metadata": {},
   "source": [
    "Now when we update window size, we want a few things to happen. \n",
    "\n",
    "1. Update original_data\n",
    "2. Use original_data to update selected\n",
    "3. Update display of selected\n",
    "\n",
    "Let's write a function that takes care of the first two."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "8b7c924b-7e99-488c-b85d-d531e23702be",
   "metadata": {},
   "outputs": [],
   "source": [
    "# %answer key/04/01.py\n",
    "\n",
    "def on_window_size_change(change):\n",
    "     # \n",
    "     # original_data['Savitzky-Golay'] = savgol_filter(original_data['Temperature'], window_size, poly_order)\n",
    "     selected = original_data[(original_data['Year'] >= year_range.value[0]) & (original_data['Year'] <= year_range.value[1])]"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "4b09b2f2-4e82-46b1-b302-ef6e64acd595",
   "metadata": {},
   "source": [
    "Then do you recall what function we used to display the dataframe? It was `display_selected_data`. Let's make sure we add both to the functions observed by window_size."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "c27b144f-733d-4b59-9a9a-f8a883663e9f",
   "metadata": {},
   "outputs": [],
   "source": [
    "window_size.observe(on_window_size_change, 'value')\n",
    "window_size.observe(display_selected_data, 'value')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "bdb93578-bced-43ca-8e27-35f52603e5a2",
   "metadata": {},
   "outputs": [],
   "source": [
    "window_size"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "677f5e26-fe20-4be6-9f66-80954604049c",
   "metadata": {},
   "source": [
    "Sweet! If you still have an Output View of the `selected` dataframe open, and you increase the value of `window_size` you will see that there is now a Savitzky-Golay column. Now I want you to create a Slider widget that is linked to the `poly_order`. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "5621bc33-53da-446b-b90c-ee1cc426e38f",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| export\n",
    "# %answer key/dashboard/widgets.py 70\n",
    "\n",
    "def on_poly_order_change(change):\n",
    "    global original_data, selected\n",
    "    # original_data['Savitzky-Golay'] = savgol_filter(original_data['Temperature'], window_size, poly_order)\n",
    "    selected = original_data[(original_data['Year'] >= year_range.value[0]) & (original_data['Year'] <= year_range.value[1])]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a9367c9d-4235-446d-814a-73c405bda4ce",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| export\n",
    "poly_order.observe(on_poly_order_change, 'value')\n",
    "poly_order.observe(display_selected_data, 'value')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d715861b-8f24-40e5-b699-33404dbadfa5",
   "metadata": {},
   "outputs": [],
   "source": [
    "poly_order"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "01271499-69da-4b2c-8fda-3fdb3f7d10cc",
   "metadata": {},
   "source": [
    "That looks pretty good! Let's try setting both values programmatically."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "00ec288a-d269-4a48-aef6-34c943d03988",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%exception\n",
    "\n",
    "window_size.value = 3\n",
    "poly_order.value = 4"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2e336fbb-9b1a-4eba-bff1-7d8abbc6abba",
   "metadata": {},
   "source": [
    "Uh oh. Why did this happen? Fortunately the error message is pretty clear. We need to ensure that our poly_order Slider doesn't allow a user to select a value greater than `window_length - 1`. But we also don't want to let poly_order be greater than 10 to avoid poor conditioning. Where should we put this validation? Well, we are going to need to update the \"max\" trait of `poly_order` every time `window_length` is updated. So we need to add a line to add a line in the `on_window_length_change` funciton."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "685730e5-9984-4205-bc77-5995548de196",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| export\n",
    "# %answer key/dashboard/widgets.py 76\n",
    "\n",
    "def on_window_size_change(change):\n",
    "    global original_data, selected, poly_order\n",
    "    # change the maximum of the poly_order widget\n",
    "    original_data['Savitzky-Golay'] = savgol_filter(original_data['Temperature'], change['new'], poly_order.value)\n",
    "    selected = original_data[(original_data['Year'] >= year_range.value[0]) & (original_data['Year'] <= year_range.value[1])]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "714f9f17-96af-4540-a8ea-b7a18f03dd8e",
   "metadata": {},
   "outputs": [],
   "source": [
    "window_size.unobserve_all()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "c9fc4c77-d75e-453d-8b4c-ef87acf78e33",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| export\n",
    "window_size.observe(on_window_size_change, 'value')\n",
    "window_size.observe(display_selected_data, 'value')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "f2bffeb5-28d7-499c-88e2-ae3edf973536",
   "metadata": {},
   "outputs": [],
   "source": [
    "window_size"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a307d16e-db12-4560-aff8-6bb854f6b2e9",
   "metadata": {},
   "outputs": [],
   "source": [
    "poly_order"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "9f4c27ce-e686-4dc2-8241-533293bcf83b",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| export\n",
    "window_size.value = 10\n",
    "poly_order.value = 1"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "879447cf-3876-4bda-9b3d-325d732af697",
   "metadata": {},
   "source": [
    "Amazing! We are doone visualizing our selected data. Now we can move on to visualizing our data with a plot.\n",
    "\n",
    "## Visualizing Data\n",
    "\n",
    "We will use matplotlib, because the syntax is so common, but there are more interactive widgets in the ipywidget ecosystem that would work even better, such as bqplot.\n",
    "\n",
    "Before we get started, let's take a look at what we had in the original workflow.\n",
    "\n",
    "```python\n",
    "plt.xlabel('Year')\n",
    "plt.ylabel('Temperature')\n",
    "plt.plot(selected_range['Year'], selected_range['Temperature'])\n",
    "plt.plot(selected_range['Year'], selected_range['Savitzky-Golay']) \n",
    "plt.show()\n",
    "```\n",
    "\n",
    "We are going to want to turn this into an observe function that accepts a \"change\" parameter. Is there anything we need to fix here to make this work? It's very minor. Edit the code chunk below so that it works in our current notebook. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "fd93c412-8834-46f9-9986-6c3a78edc0b2",
   "metadata": {},
   "outputs": [],
   "source": [
    "# %answer key/04/02.py\n",
    "\n",
    "plt.xlabel('Year')\n",
    "plt.ylabel('Temperature')\n",
    "# plt.plot(selected_range['Year'], selected_range['Temperature'])\n",
    "# plt.plot(selected_range['Year'], selected_range['Savitzky-Golay'])\n",
    "plt.show()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "012c1f7c-2cca-4d19-b590-c5f604ebeeb3",
   "metadata": {},
   "source": [
    "Okay that works, but the plot is showing up in the log, and we want to show it in our notebook. What can we do to show and update the plot displayed in the notebook?"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3ced1b75-94e3-462a-b4fd-8697652f63aa",
   "metadata": {},
   "source": [
    "Yeah, we can use an Output widget again, just like we did with the dataframe."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "fa36f751-4904-427e-9ead-1a2471486d0d",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| export\n",
    "# %answer key/dashboard/widgets.py 86\n",
    "\n",
    "# create an output widget called plot_output\n",
    "plot_output"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "53609542-9daf-473e-99c9-381eb9d5a864",
   "metadata": {},
   "source": [
    "Go ahead and create an Output View for this widget also.\n",
    "\n",
    "Okay. Now let's remember what we did to update our display last time. \n",
    "```python\n",
    "def display_selected_data(change): \n",
    "    selected_data_output.clear_output(wait=True)\n",
    "    with selected_data_output: \n",
    "        display(selected)\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "bc519589-77f0-4956-a4c2-fb6602f31f15",
   "metadata": {},
   "source": [
    "Go ahead and adapt this function so that instead of displaying the selected dataframe, it displays an updated plot."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "868bcb6f-9fe3-4370-9a49-6754298a6e4a",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| export\n",
    "\n",
    "def display_plot(change): \n",
    "    plot_output.clear_output(wait=True) \n",
    "    with plot_output: \n",
    "        plt.xlabel('Year') \n",
    "        plt.ylabel('Temperature') \n",
    "        plt.plot(selected['Year'], selected['Temperature']) \n",
    "        plt.plot(selected['Year'], selected['Savitzky-Golay']) \n",
    "        plt.show() "
   ]
  },
  {
   "cell_type": "markdown",
   "id": "bed98f1f-0220-417e-ab19-992e567b49f8",
   "metadata": {},
   "source": [
    "Let's make sure out new callback works when we call it explicitly."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d5f9a436-72d1-4bb6-8334-86cb0eb8f0dc",
   "metadata": {},
   "outputs": [],
   "source": [
    "display_plot(None)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "22829fff-2eec-4a1f-b973-ab5d869dc341",
   "metadata": {},
   "source": [
    "Now let's make sure this function gets called any time there is a change to our selected data or to the Savitzky-Golay parameters. How do we make sure this function runs every time there is a change?"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "06bbdd3b-8478-424c-89bd-9da323b5f50d",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| export\n",
    "year_range.observe(display_plot, 'value')\n",
    "window_size.observe(display_plot, 'value')\n",
    "poly_order.observe(display_plot, 'value')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "cfa742bc-0ee9-46f2-a833-26a66c6d498a",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| export\n",
    "year_range.value = (1900, 2000)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d89ae5e5-3a9d-4dcc-80c3-27442b88ed3d",
   "metadata": {},
   "outputs": [],
   "source": [
    "year_range"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "ad3f37b5-fb34-4edf-8964-a5fc48cd0ce1",
   "metadata": {},
   "outputs": [],
   "source": [
    "window_size"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "cc2dd5c3-02c4-4d5c-89d9-ab7752083600",
   "metadata": {},
   "outputs": [],
   "source": [
    "poly_order"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "fe02ff42-8ade-45ba-bf3f-b22dba762138",
   "metadata": {},
   "source": [
    "Wow that looks amazing! We have a total of five widgets. Three of them control various parameters and they have dependencies on each other. In the next notebook, we will see how this can all come together into one very beautiful interface."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "7e91e724-9497-4571-ab90-9b1652cbd868",
   "metadata": {},
   "outputs": [],
   "source": [
    "from nbdev.export import nb_export\n",
    "nb_export('04_widgets.ipynb', 'dashboard')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "e018f2fb-b93c-4be8-bb4c-63393b648514",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "python3",
   "language": "python",
   "name": "python3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}