Update the demo to a nicer one

demo/environment.yml

@@ -3,6 +3,6 @@ channels:
   - https://repo.mamba.pm/emscripten-forge
   - https://repo.mamba.pm/conda-forge
 dependencies:
-  - pandas=1.4.3
+  - pandas
   - bqplot
   - ipycanvas

demo/notebooks/voici.ipynb

@@ -1,50 +1,197 @@
 {
  "cells": [
   {
-   "cell_type": "markdown",
-   "id": "55d0afcb-cc0a-426b-872d-405caf88d955",
-   "metadata": {},
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
    "source": [
-    "# So easy, Voici!"
+    "import pandas as pd\n",
+    "import numpy as np\n",
+    "import ipywidgets as widgets\n",
+    "from IPython.display import HTML"
    ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
-   "id": "55951a9b-3308-4c93-9ee4-cbe51035937d",
    "metadata": {
     "tags": []
    },
    "outputs": [],
    "source": [
-    "import ipywidgets as widgets\n",
+    "from bqplot import Figure, Scatter, Axis, LinearScale"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": [
+    "EXPLANATION = \"\"\"\\\n",
+    "<div class=\"app-sidebar\">\n",
+    "<p><em>Compare different development indicators.</em><p>\n",
+    "\n",
+    "<p>Select what indicators to plot in the dropdowns, and use the slider\n",
+    "to sub-select a fraction of years to include in the plot.</p>\n",
+    "\n",
+    "<p>Data and idea copied from the <a href=\"https://dash.plot.ly/getting-started-part-2\">\n",
+    "Plotly Dash documentation</a>.</p>\n",
+    "\n",
+    "<p>This example demonstrates combining <a href=\"https://bqplot.github.io/bqplot\">\n",
+    "bqlot</a> with Jupyter widgets.</p>\n",
+    "</div>\n",
+    "\"\"\""
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": [
+    "HTML(\"\"\"\\\n",
+    "<style>\n",
+    ".app-subtitle {\n",
+    "    font-size: 1.5em;\n",
+    "}\n",
     "\n",
-    "slider = widgets.FloatSlider(description='$x$')\n",
-    "text = widgets.FloatText(disabled=True, description='$x^2$')\n",
+    ".app-subtitle a {\n",
+    "    color: #106ba3;\n",
+    "}\n",
     "\n",
-    "def compute(*ignore):\n",
-    "    text.value = str(slider.value ** 2)\n",
+    ".app-subtitle a:hover {\n",
+    "    text-decoration: underline;\n",
+    "}\n",
     "\n",
-    "slider.observe(compute, 'value')\n",
+    ".app-sidebar p {\n",
+    "    margin-bottom: 1em;\n",
+    "    line-height: 1.7;\n",
+    "}\n",
     "\n",
-    "slider.value = 4\n",
+    ".app-sidebar a {\n",
+    "    color: #106ba3;\n",
+    "}\n",
     "\n",
-    "widgets.VBox([slider, text])"
+    ".app-sidebar a:hover {\n",
+    "    text-decoration: underline;\n",
+    "}\n",
+    "</style>\n",
+    "\"\"\")"
    ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
-   "id": "19fb897c-1e45-48dc-a0bf-fa62cd5d9669",
    "metadata": {
     "tags": []
    },
    "outputs": [],
    "source": [
-    "import pandas as pd\n",
+    "class App:\n",
+    "    \n",
+    "    def __init__(self, df):\n",
+    "        self._df = df\n",
+    "        available_indicators = self._df['Indicator Name'].unique()\n",
+    "        self._x_dropdown = self._create_indicator_dropdown(available_indicators, 0)\n",
+    "        self._y_dropdown = self._create_indicator_dropdown(available_indicators, 1)        \n",
+    "        \n",
+    "        x_scale = LinearScale()\n",
+    "        y_scale = LinearScale()\n",
+    "\n",
+    "        self._x_axis = Axis(scale=x_scale, label=\"X\")\n",
+    "        self._y_axis = Axis(scale=y_scale, orientation=\"vertical\", label=\"Y\")\n",
+    "\n",
+    "        self._scatter = Scatter(\n",
+    "            x=[], y=[], scales={\"x\": x_scale, \"y\": y_scale}\n",
+    "        )\n",
+    "\n",
+    "        self._figure = Figure(marks=[self._scatter], axes=[self._x_axis, self._y_axis], layout=dict(width=\"99%\"), animation_duration=1000)\n",
     "\n",
-    "df = pd.read_csv('iris.csv')\n",
-    "df"
+    "        self._year_slider, year_slider_box = self._create_year_slider(\n",
+    "            min(df['Year']), max(df['Year'])\n",
+    "        )\n",
+    "        _app_container = widgets.VBox([\n",
+    "            widgets.HBox([self._x_dropdown, self._y_dropdown]),\n",
+    "            self._figure,\n",
+    "            year_slider_box\n",
+    "        ], layout=widgets.Layout(align_items='center', flex='3 0 auto'))\n",
+    "        self.container = widgets.VBox([\n",
+    "            widgets.HTML(\n",
+    "                (\n",
+    "                    '<h1>Development indicators. A Voici dashboard, running entirely in your browser!</h1>'\n",
+    "                    '<h2 class=\"app-subtitle\"><a href=\"https://github.com/pbugnion/voila-gallery/blob/master/country-indicators/index.ipynb\">Link to code</a></h2>'\n",
+    "                ), \n",
+    "                layout=widgets.Layout(margin='0 0 5em 0')\n",
+    "            ),\n",
+    "            widgets.HBox([\n",
+    "                _app_container, \n",
+    "                widgets.HTML(EXPLANATION, layout=widgets.Layout(margin='0 0 0 2em'))\n",
+    "            ])\n",
+    "        ], layout=widgets.Layout(flex='1 1 auto', margin='0 auto 0 auto', max_width='1024px'))\n",
+    "        self._update_app()\n",
+    "        \n",
+    "    @classmethod\n",
+    "    def from_csv(cls, path):\n",
+    "        df = pd.read_csv(path)\n",
+    "        return cls(df)\n",
+    "        \n",
+    "    def _create_indicator_dropdown(self, indicators, initial_index):\n",
+    "        dropdown = widgets.Dropdown(options=indicators, value=indicators[initial_index])\n",
+    "        dropdown.observe(self._on_change, names=['value'])\n",
+    "        return dropdown\n",
+    "    \n",
+    "    def _create_year_slider(self, min_year, max_year):\n",
+    "        year_slider_label = widgets.Label('Year range: ')\n",
+    "        year_slider = widgets.IntRangeSlider(\n",
+    "            min=min_year, max=max_year,\n",
+    "            layout=widgets.Layout(width='500px'),\n",
+    "            continuous_update=False\n",
+    "        )\n",
+    "        year_slider.observe(self._on_change, names=['value'])\n",
+    "        year_slider_box = widgets.HBox([year_slider_label, year_slider])\n",
+    "        return year_slider, year_slider_box\n",
+    "        \n",
+    "    def _on_change(self, _):\n",
+    "        self._update_app()\n",
+    "        \n",
+    "    def _update_app(self):\n",
+    "        x_indicator = self._x_dropdown.value\n",
+    "        y_indicator = self._y_dropdown.value\n",
+    "        year_range = self._year_slider.value\n",
+    "        \n",
+    "        with self._scatter.hold_sync():\n",
+    "            df = self._df[self._df['Year'].between(*year_range)].dropna()\n",
+    "            x = df[df['Indicator Name'] == x_indicator]['Value']\n",
+    "            y = df[df['Indicator Name'] == y_indicator]['Value']\n",
+    "            \n",
+    "            self._x_axis.label = x_indicator\n",
+    "            self._y_axis.label = y_indicator\n",
+    "            \n",
+    "            self._scatter.default_opacities = [0.2]\n",
+    "            \n",
+    "            self._scatter.x = x\n",
+    "            self._scatter.y = y"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": [
+    "app = App.from_csv(\"indicators.csv\")\n",
+    "\n",
+    "app.container"
    ]
   }
  ],
@@ -64,9 +211,14 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.11.0"
+   "version": "3.11.3"
+  },
+  "vscode": {
+   "interpreter": {
+    "hash": "e7370f93d1d0cde622a1f8e1c04877d8463912d04d973331ad4851f04de6915a"
+   }
   }
  },
  "nbformat": 4,
- "nbformat_minor": 5
+ "nbformat_minor": 4
 }