{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The [iris dataset](https://en.wikipedia.org/wiki/Iris_flower_data_set) is a standard example used to illustrate machine-learning and visualization techniques. Here, we show how to use [Panel](http://panel.pyviz.org) to create a dashboard for visualizing the dataset. The Panel dashboard uses [hvPlot](http://hvplot.pyviz.org) to create plots and [Param](https://param.pyviz.org) objects to create options for selecting the `X` and `Y` axis for the plot. First, let's import the packages we are using:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import hvplot.pandas\n",
    "import param\n",
    "import panel as pn\n",
    "\n",
    "from bokeh.sampledata.iris import flowers\n",
    "\n",
    "pn.extension(sizing_mode=\"stretch_width\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The `flowers` dataset we imported from Bokeh has five columns: `sepal_length`, `sepal_width`, `petal_length`, `petal width`, and `species`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "flowers.head(2)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "We will start by using the dataframe with these five features and then create a `Selector` object to develop menu options for different input features. Later we will define the core plotting function in a `plot` method and define the layout in the `panel` method of the `IrisDashboard` class.\n",
    "\n",
    "The `plot` method watches the `X_variable` and `Y_variable` using the `param.depends` [decorator](https://www.google.com/search?q=python+decorator), setting the `watch` option of this decorator to `True`. The `plot` method plots the features selected for `X_variable` and `Y_variable`  and colors them using the `species` column."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "inputs = ['sepal_length', 'sepal_width', 'petal_length', 'petal_width']\n",
    "    \n",
    "class IrisDashboard(param.Parameterized):\n",
    "    X_variable = param.Selector(inputs, default=inputs[0])\n",
    "    Y_variable = param.Selector(inputs, default=inputs[1])\n",
    "    \n",
    "    @param.depends('X_variable', 'Y_variable')\n",
    "    def plot(self):\n",
    "        return flowers.hvplot.scatter(x=self.X_variable, y=self.Y_variable, by='species').opts(height=600)\n",
    "    \n",
    "    def panel(self):\n",
    "        return pn.Row(\n",
    "            pn.Param(self, width=300, name = \"Plot Settings\", sizing_mode=\"fixed\"), \n",
    "            self.plot\n",
    "        )\n",
    "\n",
    "dashboard = IrisDashboard(name='Iris_Dashboard')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "And now you can explore how each of the input columns relate to each other, either here in the notebook or when served as a separate dashboard using `panel serve --show Iris_dataset.ipynb`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "component = dashboard.panel()\n",
    "component"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## App\n",
    "\n",
    "Lets wrap it into nice template that can be served via `panel serve reactive_plots.ipynb`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.template.FastListTemplate(site=\"Panel\", title=\"Machine Learning Data Visualization\", \n",
    "                             main=[\n",
    "                                 \"The [iris dataset](https://en.wikipedia.org/wiki/Iris_flower_data_set) is a standard example used to illustrate **machine-learning and visualization techniques**.\\n\\nHere, we show how to use [Panel](http://panel.pyviz.org) to create a dashboard for visualizing the dataset. The Panel dashboard uses [hvPlot](http://hvplot.pyviz.org) to create plots and [Param](https://param.pyviz.org) objects to create options for selecting the `X` and `Y` axis for the plot.\",\n",
    "                                 component \n",
    "                             ]).servable();"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}