content/demo.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "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,
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "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",
    "bqplot</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",
    ".app-subtitle a {\n",
    "    color: #106ba3;\n",
    "}\n",
    "\n",
    ".app-subtitle a:hover {\n",
    "    text-decoration: underline;\n",
    "}\n",
    "\n",
    ".app-sidebar p {\n",
    "    margin-bottom: 1em;\n",
    "    line-height: 1.7;\n",
    "}\n",
    "\n",
    ".app-sidebar a {\n",
    "    color: #106ba3;\n",
    "}\n",
    "\n",
    ".app-sidebar a:hover {\n",
    "    text-decoration: underline;\n",
    "}\n",
    "</style>\n",
    "\"\"\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "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",
    "        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"
   ]
  }
 ],
 "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.11.3"
  },
  "vscode": {
   "interpreter": {
    "hash": "e7370f93d1d0cde622a1f8e1c04877d8463912d04d973331ad4851f04de6915a"
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}