day1/03_Dashboards.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "5d6b9105-c48a-477f-a73d-3dd3bbb6746b",
   "metadata": {
    "editable": true,
    "slideshow": {
     "slide_type": ""
    },
    "tags": []
   },
   "outputs": [],
   "source": [
    "# !pip install panel hvplot pandas"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "1b21517b-e87d-487b-82ec-94c7e264efbe",
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "pn.extension()\n",
    "\n",
    "import pandas as pd\n",
    "import hvplot.pandas\n",
    "import panel.widgets as pnw"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "eaeedf0b-5f74-4a46-a8b1-e49620a2ef9f",
   "metadata": {
    "panel-layout": {
     "height": 174.134,
     "visible": false,
     "width": 100
    }
   },
   "source": [
    "# Interactive Dashboards in Jupyter Notebooks\n",
    "\n",
    "As researchers, we often need to visualize and present our findings in an engaging way. \n",
    "While code is important for analysis, we do not always want to show it all the time as our results are often data-centric and not code-centric. \n",
    "Dashboards can help us interact with and explore data in real-time, highlighting important insights. \n",
    "In this notebook, we will explore the process of designing interactive layouts and integrating widgets in Jupyter notebooks using Panel.\n",
    "\n",
    "**Run the below code to get access to datasets used in this notebook**"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "81633e0a-96e1-4be9-bef6-527485164e0c",
   "metadata": {
    "editable": true,
    "panel-layout": {
     "height": 0,
     "visible": false,
     "width": 100
    },
    "slideshow": {
     "slide_type": ""
    },
    "tags": []
   },
   "outputs": [],
   "source": [
    "import sys\n",
    "sys.path.append('src')\n",
    "import sciebo\n",
    "\n",
    "sciebo.download_file('https://uni-bonn.sciebo.de/s/G5rdvTsoESXolF4', 'data/steinmetz_winter2017.csv')\n",
    "sciebo.download_file('https://uni-bonn.sciebo.de/s/xKAG9nqHyWmXBBI', 'data/steinmetz_winter2016.csv')\n",
    "sciebo.download_file('https://uni-bonn.sciebo.de/s/XLDoTQQoDdFLhlz', 'data/steinmetz_summer2017.csv')"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ba8b4a37-7afa-4599-b4d1-82dc2f36b3c3",
   "metadata": {
    "panel-layout": {
     "height": 50.8239,
     "visible": false,
     "width": 100
    }
   },
   "source": [
    "## Explorer For Quick-Look Of Data\n",
    "\n",
    "Many Python plotting libraries that support interactive dashboard building are built to work with Jupyter notebooks because notebooks render dynamic visualizations directly within the notebook interface. \n",
    "It allows for real-time interaction with the data through widgets and sliders, enabling users to explore and analyze data.\n",
    "These interactive visualization update when parameters are tweaked.\n",
    "\n",
    "We first explore capabilities of notebook to render interactive elements by making use of `hvplot`'s `explorer` method.\n",
    "\n",
    "\n",
    "| **Code Syntax**                          | **What it Does**                                                                 |\n",
    "|------------------------------------------|----------------------------------------------------------------------------------|\n",
    "| `df1 = pd.read_csv(file)` | Reads a CSV file into a Pandas DataFrame and assigns it to `df1`.                  |\n",
    "| `df1[[column1]].hvplot.explorer()` | Plots an explorer view (interactive visualization) for column1 |\n",
    "| `df1[[column1, column2]].hvplot.explorer()` | Plots an explorer view (interactive visualization) for column1 and column2 |\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f9daef1a-01b7-4938-8ada-99453a69754c",
   "metadata": {
    "panel-layout": {
     "height": 51.1222,
     "visible": false,
     "width": 100
    }
   },
   "source": [
    "**Example** Plot a histogram of feedback times from Winter 2016 dataset using explorer's interactive feature."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "97c96789-8cb3-42cc-8183-0ed0b5ebc87f",
   "metadata": {
    "editable": true,
    "panel-layout": {
     "height": 600,
     "visible": false,
     "width": 100
    },
    "slideshow": {
     "slide_type": ""
    },
    "tags": []
   },
   "outputs": [],
   "source": [
    "df1 = pd.read_csv('data/steinmetz_winter2016.csv')\n",
    "df1[[\"feedback_time\"]].hvplot.explorer()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a6708ecb-1068-450c-bb06-6bd320abad07",
   "metadata": {
    "panel-layout": {
     "height": 10,
     "visible": true,
     "width": 100
    }
   },
   "source": [
    "Plot a histogram of feedback times from Winter 2017 dataset using explorer's interactive feature."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "126e4330-721b-4fb8-9f73-97759b9b5ddf",
   "metadata": {
    "panel-layout": {
     "height": 600,
     "visible": false,
     "width": 100
    }
   },
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "id": "1d32ddaa-f67a-406b-9c12-6bf9a894efe2",
   "metadata": {
    "panel-layout": {
     "height": 10,
     "visible": true,
     "width": 100
    }
   },
   "source": [
    "Plot a histogram of feebdack times of Summer 2017 dataset using explorer's interactive feature."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "fe282dca-ffcc-40be-bf92-744336f184c7",
   "metadata": {
    "panel-layout": {
     "height": 600,
     "visible": false,
     "width": 100
    },
    "scrolled": true
   },
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "id": "325e0acc-4e67-4c81-a8b3-78d4458d9314",
   "metadata": {
    "panel-layout": {
     "height": 51.1222,
     "visible": false,
     "width": 100
    }
   },
   "source": [
    "**Example** Plot a scatter plot of feedback time with response time of Winter 2016. Add a suitable title"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "5ab38df2-6689-4d46-a25b-83de0696f831",
   "metadata": {
    "panel-layout": {
     "height": 600,
     "visible": false,
     "width": 100
    }
   },
   "outputs": [],
   "source": [
    "df1 = pd.read_csv('data/steinmetz_winter2016.csv')\n",
    "df1[[\"response_time\", \"feedback_time\"]].hvplot.explorer()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "83e93bf2-896a-496b-aec1-e572a489c554",
   "metadata": {
    "panel-layout": {
     "height": 51.1222,
     "visible": false,
     "width": 100
    }
   },
   "source": [
    "Plot a scatter plot of feedback time with response time of Winter 2017. Change X and Y labels."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "eb261ff5-b50b-4055-96d6-5131b444fedc",
   "metadata": {
    "panel-layout": {
     "height": 600,
     "visible": false,
     "width": 100
    }
   },
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "id": "ae805988-a4dc-4f2d-b5a4-3183b865ec95",
   "metadata": {
    "panel-layout": {
     "height": 52.0312,
     "visible": false,
     "width": 100
    }
   },
   "source": [
    "Plot a scatter plot of feedback time with response time of Summer 2017. See what is in the `Code` tab."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "45aa2082-a8a0-4bb9-b874-6e0a2c733293",
   "metadata": {
    "panel-layout": {
     "height": 600,
     "visible": false,
     "width": 100
    }
   },
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "id": "f3a4405f-9348-47f8-93e8-47bdd1b90812",
   "metadata": {
    "panel-layout": {
     "height": 81.1648,
     "visible": false,
     "width": 100
    }
   },
   "source": [
    "**Example** Plot a box plot of response times of Winter 2016 data split by `response_type`. \n",
    "\n",
    "Select `response_type` in the `By` section "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "118f9827-7227-4653-a4e0-645f2f5d5af8",
   "metadata": {
    "panel-layout": {
     "height": 600,
     "visible": false,
     "width": 100
    }
   },
   "outputs": [],
   "source": [
    "df1 = pd.read_csv('data/steinmetz_winter2016.csv')\n",
    "df1[[\"response_type\", \"response_time\", \"feedback_time\"]].hvplot.explorer()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "0a0c91e3-b79f-4ff2-b0ee-86a2325da44f",
   "metadata": {
    "panel-layout": {
     "height": 51.1222,
     "visible": false,
     "width": 100
    }
   },
   "source": [
    "Plot a box plot of feedback times of Winter 2017 data split by response_type. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "c892b56a-22a6-43f2-8e4b-2e383644574c",
   "metadata": {
    "panel-layout": {
     "height": 600,
     "visible": false,
     "width": 100
    }
   },
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "id": "36838af1-f2e7-4bbb-82b5-05ee486f468d",
   "metadata": {
    "panel-layout": {
     "height": 51.1222,
     "visible": false,
     "width": 100
    }
   },
   "source": [
    "Plot a box plot of feedback times of Summer 2017 data split by feedback_type. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "adcf0eb3-0ca6-450b-80ad-4899f3fe70e7",
   "metadata": {
    "panel-layout": {
     "height": 600,
     "visible": false,
     "width": 100
    }
   },
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "id": "a002e249-a366-4516-ac0d-b8c27c9d6768",
   "metadata": {
    "panel-layout": {
     "height": 51.1222,
     "visible": false,
     "width": 100
    }
   },
   "source": [
    "**Example** Plot a box plot of response times of a response types selected from slider of Winter 2016 data.\n",
    "\n",
    "Use `Groupby` "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "f29c9717-51dc-4108-9ae9-a162a6f79df3",
   "metadata": {
    "panel-layout": {
     "height": 600,
     "visible": false,
     "width": 100
    }
   },
   "outputs": [],
   "source": [
    "df1 = pd.read_csv('data/steinmetz_winter2016.csv')\n",
    "df1[[\"mouse\", \"response_type\", \"response_time\", \"feedback_time\"]].hvplot.explorer()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e708fca2-75b9-4299-a860-e700cf6596df",
   "metadata": {
    "panel-layout": {
     "height": 51.1222,
     "visible": false,
     "width": 100
    }
   },
   "source": [
    "Plot a box plot of feedback times of a mouse selected from drop down menu of Winter 2017 data."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "3b4461d0-cf9f-4498-bde7-4799788d6867",
   "metadata": {
    "panel-layout": {
     "height": 600,
     "visible": true,
     "width": 100
    }
   },
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "id": "4abe4dac-44ee-4024-a6c3-1a95ed1f12a1",
   "metadata": {
    "panel-layout": {
     "height": 51.1222,
     "visible": true,
     "width": 100
    }
   },
   "source": [
    "Plot a box plot of feedback times of a mouse selected from drop down menu of Winter 2017 data and split by feedback types."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "472fdd23-6f30-43ff-9e52-5be564e0f900",
   "metadata": {
    "panel-layout": {
     "height": 600,
     "visible": true,
     "width": 100
    }
   },
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "id": "276a24bb-5516-485c-8744-2cb6a284b6e2",
   "metadata": {},
   "source": [
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "7ecdcc16-9770-4ccd-9d4a-0caff82954ac",
   "metadata": {
    "panel-layout": {
     "height": 10,
     "visible": true,
     "width": 100
    }
   },
   "source": [
    "## Dashboard Building Process in Notebook\n",
    "\n",
    "While building dashboards, components like tables and plots are arranged in a layout in rows or columns. Let's get some practice building dashboards in notebooks using `panel`.\n",
    "\n",
    "| **Code Syntax**                          | **What it Does**                                                                 |\n",
    "|------------------------------------------|----------------------------------------------------------------------------------|\n",
    "| `df1[cols].head(5)`           | Selects the first 5 rows of the specified columns from `df1`|\n",
    "| `pn.Row(element1, element2, element3)`   | Creates a Panel layout displaying the three elements (`element1`, `element2`, and `element3`) in a horizontal row. |\n",
    "| `pn.Column(element1, element2, element3)` | Creates a Panel layout displaying the three elements (`element1`, `element2`, and `element3`) in a vertical column. |\n",
    "| `row1 = df1[\"response_time\"].hvplot.hist() + df2[\"response_time\"].hvplot.hist() + df3[\"response_time\"].hvplot.hist()` | Combines histograms for `response_time` from `df1`, `df2`, and `df3` into one row layout using hvPlot. |\n",
    "| `dashboard_1.servable()`                 | Makes `dashboard_1` dashboard interactive and ready to be served in a Panel app.  |\n",
    "| `dashboard_1.clear()`                    | Clears the layout or any cached data from `dashboard_1`.                          |"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d2092583-1e70-44f9-aea4-9db7df1f05a5",
   "metadata": {},
   "outputs": [],
   "source": [
    "df1 = pd.read_csv('data/steinmetz_winter2016.csv')\n",
    "df2 = pd.read_csv('data/steinmetz_winter2017.csv')\n",
    "df3 = pd.read_csv('data/steinmetz_summer2017.csv')"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "7a0ebf1b-e31e-4120-8dfa-21bc9e0cd09b",
   "metadata": {
    "editable": true,
    "panel-layout": {
     "height": 10,
     "visible": true,
     "width": 100
    },
    "slideshow": {
     "slide_type": ""
    },
    "tags": []
   },
   "source": [
    "**Example** Show top 5 rows of mouse, feedback and response times, and response type columns of all three datasets in a row."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "61ae68a0-98d9-469a-8151-f2e735b0390a",
   "metadata": {
    "editable": true,
    "slideshow": {
     "slide_type": ""
    },
    "tags": []
   },
   "outputs": [],
   "source": [
    "cols = [\"mouse\", \"feedback_time\", \"response_time\", \"response_type\"]\n",
    "element1 = df1[cols].head(5)\n",
    "element2 = df2[cols].head(5)\n",
    "element3 = df3[cols].head(5)\n",
    "pn.Row(element1, element2, element3)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "bdea4ba6-c748-4212-8ae3-b4ff08bdd4b4",
   "metadata": {},
   "source": [
    "Show top 3 rows of mouse, feedback and response times, and response type columns of all three datasets in a row."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "9cfd637e-2653-4b62-ab59-546d1604ca09",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "id": "eb266489-5808-44c5-95ba-cb0c37635881",
   "metadata": {},
   "source": [
    "Show top 3 rows of mouse, feedback and response times, and response type columns of all three datasets in a column."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "16e3ae72-d608-4b1c-909f-c6a448a0f354",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "id": "5b0399ba-4a92-4137-85ef-0c399d65667a",
   "metadata": {
    "panel-layout": {
     "height": 10,
     "visible": true,
     "width": 100
    }
   },
   "source": [
    "**Example** Plot histogram of response_times of all three datasets in a row."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "07683b27-6315-47a5-bfff-1b6b9fab3649",
   "metadata": {},
   "outputs": [],
   "source": [
    "element1 = df1[\"response_time\"].hvplot.hist()\n",
    "element2 = df2[\"response_time\"].hvplot.hist()\n",
    "element3 = df3[\"response_time\"].hvplot.hist()\n",
    "pn.Row(element1, element2, element3)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a9606ba2-91ef-4c53-b45a-441325c52b62",
   "metadata": {},
   "source": [
    "Plot histogram of feedback_times of all three datasets in a row."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "46625cb0-1dc6-4a1a-ba9b-dfa25654aae3",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "id": "9dd769a8-4ab4-4a78-a10c-3d77dfee4b75",
   "metadata": {},
   "source": [
    "Plot histogram of response_times of all three datasets in a Column."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "776f066d-ebca-424e-9009-1f5e9501ecb7",
   "metadata": {
    "scrolled": true
   },
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "id": "f271b0f8-155f-448f-b527-82620fc2ca70",
   "metadata": {},
   "source": [
    "**Demo** Arrange histograms of Winter 2016, 2017, Summer 2017 response_times in rows. In another row, arrange feedback time histograms."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "520a39a4-a72f-4f2d-aa05-827221bee0ec",
   "metadata": {
    "editable": true,
    "slideshow": {
     "slide_type": ""
    },
    "tags": []
   },
   "outputs": [],
   "source": [
    "row1 = df1[\"response_time\"].hvplot.hist() + df2[\"response_time\"].hvplot.hist() + df3[\"response_time\"].hvplot.hist()\n",
    "row2 = df1[\"feedback_time\"].hvplot.hist() + df2[\"feedback_time\"].hvplot.hist() + df3[\"feedback_time\"].hvplot.hist()\n",
    "pn.Column(row1, row2)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5bd3bdf2-47fb-4587-934f-bafe33546d41",
   "metadata": {},
   "source": [
    "**Example** Plot histogram of response_times of all three datasets in a row and Preview with Panel.\n",
    "\n",
    "![Preview](img/panel.png)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a20d6756-c408-4b91-9839-8fdf5209201c",
   "metadata": {
    "editable": true,
    "slideshow": {
     "slide_type": ""
    },
    "tags": []
   },
   "outputs": [],
   "source": [
    "element1 = df1[\"response_time\"].hvplot.hist()\n",
    "element2 = df2[\"response_time\"].hvplot.hist()\n",
    "element3 = df3[\"response_time\"].hvplot.hist()\n",
    "dashboard_1 = pn.Row(element1, element2, element3)\n",
    "dashboard_1.servable()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "877d68da-8983-44f8-a18a-b32cf03b6a15",
   "metadata": {
    "editable": true,
    "slideshow": {
     "slide_type": ""
    },
    "tags": []
   },
   "outputs": [],
   "source": [
    "dashboard_1.clear();"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "007e139f-4c4d-48a3-ad02-c52d98f0cb91",
   "metadata": {
    "editable": true,
    "slideshow": {
     "slide_type": ""
    },
    "tags": []
   },
   "source": [
    "Plot histogram of response_time of all three datasets in a column and Preview with Panel."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "72b952e6-ac97-459e-b805-19ba06800e0f",
   "metadata": {
    "editable": true,
    "slideshow": {
     "slide_type": ""
    },
    "tags": []
   },
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "c83dfdea-444f-4b3a-9163-9e4cd0f8535f",
   "metadata": {},
   "outputs": [],
   "source": [
    "dashboard_1.clear();"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "9749e62d-41df-4213-a50b-6eef808b5ed6",
   "metadata": {},
   "source": [
    "Plot histogram of feedback_time of all three datasets in a column and Preview with Panel."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "8c90948d-e2c1-4617-b2a2-915a807337ae",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "742da5db-ee15-4d5f-aae1-7076d2cee005",
   "metadata": {},
   "outputs": [],
   "source": [
    "dashboard_1.clear();"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "fd2c2b16-4db9-4ab4-b9de-ee781cb68d87",
   "metadata": {},
   "source": [
    "**Demo** Arrange histograms of Winter 2016, 2017, Summer 2017 response_times in rows. In another row, arrange feedback time histograms. Preview with Panel."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "76edfb36-8055-4d40-917c-9423227424d3",
   "metadata": {
    "editable": true,
    "slideshow": {
     "slide_type": ""
    },
    "tags": []
   },
   "outputs": [],
   "source": [
    "row1 = df1[\"response_time\"].hvplot.hist() + df2[\"response_time\"].hvplot.hist() + df3[\"response_time\"].hvplot.hist()\n",
    "row2 = df1[\"feedback_time\"].hvplot.hist() + df2[\"feedback_time\"].hvplot.hist() + df3[\"feedback_time\"].hvplot.hist()\n",
    "dashboard_3 = pn.Column(row1, row2)\n",
    "dashboard_3.servable();"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "602d355b-f109-48d3-94c3-c9d04f5a3403",
   "metadata": {
    "editable": true,
    "slideshow": {
     "slide_type": ""
    },
    "tags": []
   },
   "outputs": [],
   "source": [
    "dashboard_3.clear();"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "b6ff512f-d57f-44de-aa63-e3ea9cb50129",
   "metadata": {
    "panel-layout": {
     "height": 10,
     "visible": true,
     "width": 100
    }
   },
   "source": [
    "## Adding Interactivity with Dashboard\n",
    "\n",
    "`panel` and `hvplot` have enabled creating and testing interactive features in the notebook directly. In this section, let's see how to do that.\n",
    "\n",
    "\n",
    "| **Code Syntax**                          | **What it Does**                                                                 |\n",
    "|------------------------------------------|----------------------------------------------------------------------------------|\n",
    "| `dashboard.servable()`               | Makes `dashboard` dashboard interactive and ready to be served in a Panel app.|\n",
    "| `dashboard.clear()`                  | Clears the layout or any cached data from `dashboard`.                        |\n",
    "| `select = pnw.Select(name='Select', options=['response_time', 'feedback_time'])` | Creates a dropdown select widget with `response_time` and `feedback_time` as options. |\n",
    "| `interactive_stat_df1 = df1.interactive()` | Makes `df1` an interactive DataFrame for real-time updates.                       |\n",
    "| `stats_1 = interactive_stat_df1[select].describe()` | Generates descriptive statistics for the selected column in `df1`.                |\n",
    "| `slider = pnw.IntSlider(name='Num Rows', start=0, end=10)` | Creates an integer slider widget with a range of 0 to 10 to control the number of rows displayed. |\n",
    "| `table_1 = interactive_df1.head(slider)` | Displays the first `slider` number of rows from `df1` interactively.              |"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2b703d99-8ad8-4bbc-b35e-5f75ffce03df",
   "metadata": {
    "editable": true,
    "panel-layout": {
     "height": 10,
     "visible": true,
     "width": 100
    },
    "slideshow": {
     "slide_type": ""
    },
    "tags": []
   },
   "source": [
    "**Example** Plot a row of histograms of `response_time` and `feedback_time` grouped by `mouse` of `df1`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "2f30ab77-88e4-4135-91ca-623c275f8d3f",
   "metadata": {},
   "outputs": [],
   "source": [
    "cols = [\"response_time\", \"feedback_time\", \"mouse\"]\n",
    "plot_1 = df1.hvplot.hist('response_time', groupby='mouse')\n",
    "plot_2 = df1.hvplot.hist('feedback_time', groupby='mouse')\n",
    "i_dashboard_1 = pn.Row(plot_1, plot_2)\n",
    "i_dashboard_1.servable();"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "b3ce456c-858b-41fd-a587-df56697993f7",
   "metadata": {
    "editable": true,
    "slideshow": {
     "slide_type": ""
    },
    "tags": []
   },
   "outputs": [],
   "source": [
    "i_dashboard_1.clear();"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "6a9e1d37-3c09-4bfe-aefa-09f3a95c0dc6",
   "metadata": {},
   "source": [
    "Plot a row of histograms of `response_time` grouped by `mouse` of `df1` and `df2`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "6a011ab8-7296-47df-a3df-d946b8f11b2e",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "9b89469e-b87b-4a21-bf31-9f9faabbb0a0",
   "metadata": {
    "editable": true,
    "slideshow": {
     "slide_type": ""
    },
    "tags": []
   },
   "outputs": [],
   "source": [
    "i_dashboard_2.clear();"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f919858b-e071-4078-8bab-99ce05e9bfdf",
   "metadata": {},
   "source": [
    "Plot columns of scatter plots of (response time, feedback time) grouped by `mouse` for `df1`, `df2`, and `df3`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "dce9274a-9e2b-4ebe-9b1f-22039c08213d",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "c717c88e-015a-4639-aec2-78da2d929a1c",
   "metadata": {
    "editable": true,
    "slideshow": {
     "slide_type": ""
    },
    "tags": []
   },
   "outputs": [],
   "source": [
    "i_dashboard_3.clear();"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "6f2e0147-25cf-43e2-9083-81a11689c086",
   "metadata": {
    "panel-layout": {
     "height": 10,
     "visible": true,
     "width": 100
    }
   },
   "source": [
    "**Example** Create an interactive Panel dashboard that allows users to select either the `response_time` or `feedback_time` column from two DataFrames (`df1` and `df2`) via a dropdown, and displays the corresponding descriptive statistics for both DataFrames side by side."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "b967e8d3-8bd7-4d9d-8c18-f1764eca3dd4",
   "metadata": {
    "editable": true,
    "slideshow": {
     "slide_type": ""
    },
    "tags": []
   },
   "outputs": [],
   "source": [
    "select = pnw.Select(name='Select', options=['response_time','feedback_time'])\n",
    "\n",
    "interactive_stat_df1 = df1.interactive()\n",
    "interactive_stat_df2 = df2.interactive()\n",
    "\n",
    "stats_1 = interactive_stat_df1[select].describe()\n",
    "stats_2 = interactive_stat_df2[select].describe()\n",
    "ip_stats_dashboard_1 = pn.Row(stats_1, stats_2)\n",
    "ip_stats_dashboard_1.servable();"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "6e1a34fd-e5c7-4e08-9621-4860ab39083c",
   "metadata": {
    "editable": true,
    "slideshow": {
     "slide_type": ""
    },
    "tags": []
   },
   "outputs": [],
   "source": [
    "ip_stats_dashboard_1.clear();"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "771fa33c-f4de-417e-9a19-d1cc9736154e",
   "metadata": {},
   "source": [
    "Create an interactive Panel dashboard that allows users to select either the `response_time` or `feedback_time` column from two DataFrames (`df1` and `df3`) via a dropdown, and display the corresponding descriptive statistics for both DataFrames in a column layout."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "39e56219-b28e-445d-a868-1202db4e28cd",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "2a5e8002-38be-4174-be55-5e19db03421c",
   "metadata": {
    "editable": true,
    "slideshow": {
     "slide_type": ""
    },
    "tags": []
   },
   "outputs": [],
   "source": [
    "ip_stats_dashboard_2.clear();"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5490ef4b-0177-4d95-b0dd-8433094aadd9",
   "metadata": {},
   "source": [
    "Create an interactive Panel dashboard that allows users to select either the `response_time` or `feedback_time` column from three DataFrames (`df1`, `df2`, and `df3`) via a dropdown, and display the corresponding descriptive statistics for all three DataFrames side by side."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "cf98260a-fc07-46c6-bc5f-e48e3420f72a",
   "metadata": {
    "editable": true,
    "slideshow": {
     "slide_type": ""
    },
    "tags": []
   },
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "6d24727a-d54b-420d-9c7a-429412d2c9f6",
   "metadata": {
    "editable": true,
    "slideshow": {
     "slide_type": ""
    },
    "tags": []
   },
   "outputs": [],
   "source": [
    "ip_stats_dashboard_3.clear();"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "68054258-3417-4651-83f4-46bb767e95dc",
   "metadata": {
    "panel-layout": {
     "height": 10,
     "visible": true,
     "width": 100
    }
   },
   "source": [
    "**Example** Create an interactive Panel dashboard with an integer slider that allows users to select the number of rows (between 0 and 10) to display from two DataFrames (`df1` and `df2`), and show the selected rows side by side."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d10d4c96-a317-4326-9ef4-f678062a7ddd",
   "metadata": {
    "editable": true,
    "slideshow": {
     "slide_type": ""
    },
    "tags": []
   },
   "outputs": [],
   "source": [
    "slider = pnw.IntSlider(name='Num Rows', start=0, end=10)\n",
    "\n",
    "interactive_df1 = df1.interactive()\n",
    "interactive_df2 = df2.interactive()\n",
    "\n",
    "table_1 = interactive_df1.head(slider)\n",
    "table_2 = interactive_df2.head(slider)\n",
    "ip_data_dashboard_1 = pn.Row(table_1, table_2)\n",
    "ip_data_dashboard_1.servable();"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "897e414d-81be-4322-8bff-04bd7ebf36e9",
   "metadata": {},
   "outputs": [],
   "source": [
    "ip_data_dashboard_1.clear();"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "c47070ec-6379-489c-bdd2-ecd0292e9ce5",
   "metadata": {},
   "source": [
    "Create an interactive Panel dashboard with an integer slider that allows users to select the number of rows (between 0 and 3) to display from two DataFrames (`df1` and `df2`), and display the selected rows from both DataFrames in a column layout."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "0e45400e-ff11-4d80-b8d2-8906e56ffd26",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "4ece08db-f86c-43f9-a4e9-17b35511f0b5",
   "metadata": {
    "editable": true,
    "slideshow": {
     "slide_type": ""
    },
    "tags": []
   },
   "outputs": [],
   "source": [
    "ip_data_dashboard_2.clear();"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "b40d17a1-6b48-4add-90d1-67bd847dcde6",
   "metadata": {},
   "source": [
    "Create an interactive Panel dashboard with an integer slider that allows users to select the number of rows (between 1 and 10) to display from three DataFrames (`df1`, `df2`, and `df3`), and display the selected rows from all three DataFrames in a column layout."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "7754bdcc-65de-4472-a493-4efac7625de7",
   "metadata": {
    "editable": true,
    "slideshow": {
     "slide_type": ""
    },
    "tags": []
   },
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "ea9d7452-430f-459f-aa0f-315ef98c4cbd",
   "metadata": {
    "editable": true,
    "slideshow": {
     "slide_type": ""
    },
    "tags": []
   },
   "outputs": [],
   "source": [
    "ip_data_dashboard_3.clear();"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e5b16bd0-5f93-4e85-aa31-0eaff8a63c0f",
   "metadata": {
    "panel-layout": {
     "height": 10,
     "visible": true,
     "width": 100
    }
   },
   "source": [
    "## (**Demo**) Serving Dashboard from Terminal\n",
    "\n",
    "In the terminal type\n",
    "\n",
    "1. Navigate to the notebook directory e.g. `cd Day1/`\n",
    "2. Serve the app \n",
    "```bash\n",
    "panel serve 03_Dashboards.ipynb\n",
    "```\n",
    "3. In the terminal, you will see a link next to `Bokeh app running at`. If you click on it, you can see the app on your browser."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "5ffd58fa-2ce7-4a28-914a-d1475c522642",
   "metadata": {},
   "outputs": [],
   "source": [
    "df1 = pd.read_csv('data/steinmetz_winter2016.csv')\n",
    "\n",
    "select = pnw.Select(name='Select', options=['response_time','feedback_time'])\n",
    "\n",
    "interactive_stat_df1 = df1.interactive()\n",
    "\n",
    "stats_1 = interactive_stat_df1[select].describe()\n",
    "ip_stats_dashboard = pn.Column(\"Winter 2016 - Response Time\", stats_1)\n",
    "ip_stats_dashboard.servable();"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "add555c1-2cf9-49ae-9f5d-05696d14b5d7",
   "metadata": {},
   "outputs": [],
   "source": [
    "ip_stats_dashboard.clear();"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "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.12.7"
  },
  "panel-cell-order": [
   "eaeedf0b-5f74-4a46-a8b1-e49620a2ef9f",
   "81633e0a-96e1-4be9-bef6-527485164e0c",
   "f9daef1a-01b7-4938-8ada-99453a69754c",
   "ba8b4a37-7afa-4599-b4d1-82dc2f36b3c3",
   "97c96789-8cb3-42cc-8183-0ed0b5ebc87f",
   "a6708ecb-1068-450c-bb06-6bd320abad07",
   "1d32ddaa-f67a-406b-9c12-6bf9a894efe2",
   "7ecdcc16-9770-4ccd-9d4a-0caff82954ac",
   "7a0ebf1b-e31e-4120-8dfa-21bc9e0cd09b",
   "7edaf704-685b-4243-a5a2-49431ebcc5cd",
   "5b0399ba-4a92-4137-85ef-0c399d65667a",
   "b6ff512f-d57f-44de-aa63-e3ea9cb50129",
   "68054258-3417-4651-83f4-46bb767e95dc",
   "2b703d99-8ad8-4bbc-b35e-5f75ffce03df",
   "6f2e0147-25cf-43e2-9083-81a11689c086",
   "adba1b10-9b0f-4587-9ff0-6eb9b7580b1c",
   "e5b16bd0-5f93-4e85-aa31-0eaff8a63c0f",
   "c53a4b20-03fb-4c56-bb3a-c4cbc89d88d2",
   "126e4330-721b-4fb8-9f73-97759b9b5ddf",
   "fe282dca-ffcc-40be-bf92-744336f184c7",
   "325e0acc-4e67-4c81-a8b3-78d4458d9314",
   "5ab38df2-6689-4d46-a25b-83de0696f831",
   "83e93bf2-896a-496b-aec1-e572a489c554",
   "eb261ff5-b50b-4055-96d6-5131b444fedc",
   "ae805988-a4dc-4f2d-b5a4-3183b865ec95",
   "45aa2082-a8a0-4bb9-b874-6e0a2c733293",
   "f3a4405f-9348-47f8-93e8-47bdd1b90812",
   "118f9827-7227-4653-a4e0-645f2f5d5af8",
   "0a0c91e3-b79f-4ff2-b0ee-86a2325da44f",
   "c892b56a-22a6-43f2-8e4b-2e383644574c",
   "36838af1-f2e7-4bbb-82b5-05ee486f468d",
   "adcf0eb3-0ca6-450b-80ad-4899f3fe70e7",
   "a002e249-a366-4516-ac0d-b8c27c9d6768",
   "f29c9717-51dc-4108-9ae9-a162a6f79df3",
   "e708fca2-75b9-4299-a860-e700cf6596df",
   "3b4461d0-cf9f-4498-bde7-4799788d6867",
   "4abe4dac-44ee-4024-a6c3-1a95ed1f12a1",
   "472fdd23-6f30-43ff-9e52-5be564e0f900"
  ],
  "toc": {
   "base_numbering": 0
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}