Adding interactivity material

notebooks/demo_interact.ipynb → notebooks/interactivity_TP.ipynb

 {
  "cells": [
-  {
-   "cell_type": "code",
-   "execution_count": 1,
-   "id": "a173b63d-52c5-4ce7-8445-9104c5a225d5",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "%matplotlib inline"
-   ]
-  },
   {
    "cell_type": "markdown",
-   "id": "ac77aa2a-ab03-4d18-88dc-8bed1a231d0c",
+   "id": "6066486e-1c4d-4da3-bbdd-d55bff7f64ca",
    "metadata": {},
    "source": [
-    "This demo need ipywidgets module\n",
-    "\n",
-    "```\n",
-    "pip install ipywidgets\n",
-    "```\n",
-    "\n",
-    "And enabling the widget backend (see the first cell of this notbook)."
+    "<center><b>Hands-on</b></center>\n",
+    "<b><p style=\"text-align:center;font-size:50px\">Interactivity</p></b>\n",
+    "<div style=\"text-align:center\">\n",
+    "    <div>\n",
+    "       Etienne Kornobis, François Laurent, Bertrand Néron\n",
+    "       <br />\n",
+    "       <a src=\" https://research.pasteur.fr/en/team/bioinformatics-and-biostatistics-hub/\">Bioinformatics and Biostatistics HUB</a>\n",
+    "       <br />\n",
+    "       © Institut Pasteur, 2022\n",
+    "    </div>    \n",
+    "</div>"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 6,
-   "id": "c4504712-9c32-4198-af1e-6887e4da3acc",
+   "execution_count": 1,
+   "id": "4d12349e-6d72-4fb1-8bd7-775816af97e4",
    "metadata": {},
    "outputs": [],
    "source": [
-    "import numpy as np\n",
-    "import matplotlib.pyplot as plt\n",
-    "import ipywidgets\n",
-    "from ipywidgets import interact"
+    "import pandas as pd\n",
+    "import seaborn as sns\n",
+    "from ipywidgets import interact, widgets"
    ]
   },
   {
    "cell_type": "markdown",
-   "id": "f32dbf0d-8468-4386-ac3b-520a3330c84c",
+   "id": "c4cfe182-0b6d-4325-8d53-459ad69ba161",
    "metadata": {},
    "source": [
-    "## doc\n",
-    "\n",
-    "Link to offical ipywidget interact\n",
+    "Using the `data/city_temperature.csv` dataset, we are going to practice interactivity using ipywidgets. \n",
+    "- Make a decorated function which returns a dataframe with only the data for a country selected by the user (through a dropdown widget for example): \n",
     "\n",
-    "https://ipywidgets.readthedocs.io/en/latest/examples/Using%20Interact.html"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "bb2ec7a4-acc8-46d0-acd5-61db4ef1d85d",
-   "metadata": {},
-   "source": [
-    "## first widget"
+    "There is other ways, but the `unique` method can be of use as well:\n",
+    "> https://pandas.pydata.org/pandas-docs/stable/reference/api/pandas.Series.unique.html#pandas.Series.unique"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 9,
-   "id": "0ca0db23-4ff5-45d6-b7c4-469cfa454013",
+   "execution_count": null,
+   "id": "3eba1eea-b75d-4a85-b1e0-404a89a3f6f2",
    "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "application/vnd.jupyter.widget-view+json": {
-       "model_id": "b47c6742ec6640b58daef1b2bd3a21c3",
-       "version_major": 2,
-       "version_minor": 0
-      },
-      "text/plain": [
-       "IntSlider(value=2, max=10, step=2)"
-      ]
-     },
-     "metadata": {},
-     "output_type": "display_data"
-    }
-   ],
-   "source": [
-    "slider = ipywidgets.IntSlider(2, min=0, max=10, step=2)\n",
-    "display(slider)"
-   ]
+   "outputs": [],
+   "source": []
   },
   {
    "cell_type": "markdown",
-   "id": "03ef9efd-47be-47cb-9f93-4f64ddbf7da4",
+   "id": "3841dd4e-c97d-4df7-b501-6dc385cb38c3",
    "metadata": {},
    "source": [
-    "There are lot mmore widget than sliders"
+    "- Make a decorated function which returns a graph of the temperatures with only the data for a city selected by the user."
    ]
   },
   {
-   "cell_type": "markdown",
-   "id": "b89ba6db-4aa5-4964-8a05-60c0b07c0c93",
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "f8599e2c-3b5d-4c52-a959-372572669253",
    "metadata": {},
-   "source": [
-    "## How to link widget to a figure"
-   ]
+   "outputs": [],
+   "source": []
   },
   {
-   "cell_type": "code",
-   "execution_count": 7,
-   "id": "d01dab50-0b8b-4fcc-a6e8-9d0d47dcd1b6",
+   "cell_type": "markdown",
+   "id": "83c1db00-c52e-4f02-a922-a572329be2b1",
    "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "application/vnd.jupyter.widget-view+json": {
-       "model_id": "105e94fa42384b6ca497981937b34d65",
-       "version_major": 2,
-       "version_minor": 0
-      },
-      "text/plain": [
-       "interactive(children=(FloatSlider(value=0.5, description='c', max=4.0, step=0.5), Output()), _dom_classes=('wi…"
-      ]
-     },
-     "metadata": {},
-     "output_type": "display_data"
-    }
-   ],
    "source": [
-    "def sinewave(c=1):\n",
-    "    x = np.linspace(0, 2 * np.pi, 100)\n",
-    "    y = np.sin(x*c)\n",
+    "These temperatures in Fahrenheit are cumbersome especially in Europe, let's convert them to Celsius. Here is the formula to apply:\n",
+    "\n",
+    "$$°C = \\frac{°F - 32}{1.8}$$\n",
+    "- Create a new column to the dataframe with the temperatures as Celsius and redraw the last graph. We saw in the course that mathematical operations can be directly performed on Series, but it is also a good occasion to practice the `apply` method, using a `farhenheit_to_celsius` function for the conversion).\n",
     "\n",
-    "    plt.plot(x, y)\n",
-    "    plt.ylabel('sin(x)')\n",
-    "    plt.xlabel('x')\n",
-    "    plt.title('Sinwave function')\n",
-    "    plt.show()\n",
-    "slider = ipywidgets.FloatSlider(.5, min=0, max=4, step=.5)\n",
-    "interact(sinewave, c=slider);"
+    "> https://pandas.pydata.org/pandas-docs/stable/reference/api/pandas.DataFrame.apply.html"
    ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
-   "id": "5e6312df-92da-40b9-8321-7b42932570fa",
+   "id": "aa8ec056-256f-4a95-bc9e-8ba3a5e13a15",
    "metadata": {},
    "outputs": [],
    "source": []
   },
   {
    "cell_type": "markdown",
-   "id": "1a02d93a-13dd-4cca-89cd-3d7926662506",
+   "id": "ace3cbd1-95ea-42a8-a763-4e6ecc481c6e",
    "metadata": {},
    "source": [
-    "a tutorial\n",
+    "As a side note `apply` can be usefull to access indices and columns names but `itertuples` is a much faster method to deal with the same kind of operations.\n",
     "\n",
-    "https://towardsdatascience.com/bring-your-jupyter-notebook-to-life-with-interactive-widgets-bc12e03f0916"
+    "> https://pandas.pydata.org/pandas-docs/stable/reference/api/pandas.DataFrame.itertuples.html"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "99e9b153-c168-4192-a18e-0c12fb3a61c4",
+   "metadata": {},
+   "source": [
+    "- Using your interactive plot, you should see something strange checking the 10 first cities. What is happening in Addis Ababa ?"
    ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
-   "id": "411ced85-689d-43a9-9ac5-4f7a69646fd8",
+   "id": "1e1fc7e2-8d86-4ef3-bd77-866b68d6dc48",
    "metadata": {},
    "outputs": [],
    "source": []
@@ -163,9 +116,9 @@
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "Python 3 (ipykernel)",
+   "display_name": "dev",
    "language": "python",
-   "name": "python3"
+   "name": "dev"
   },
   "language_info": {
    "codemirror_mode": {
@@ -177,7 +130,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.8.12"
+   "version": "3.10.4"
   }
  },
  "nbformat": 4,