{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import altair as alt\n",
    "from vega_datasets import data\n",
    "import panel as pn\n",
    "\n",
    "pn.extension('vega')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "A simple example demonstrating how to use a reactive function depending on a single widget, to render Altair/Vega plots. In this case the `Select` widget allows selecting between various quantities that can be plotted on a choropleth map."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "altair_logo = 'https://altair-viz.github.io/_static/altair-logo-light.png'\n",
    "states = alt.topo_feature(data.us_10m.url, 'states')\n",
    "states['url'] = 'https://raw.githubusercontent.com/vega/vega/master/docs/data/us-10m.json'\n",
    "source = 'https://raw.githubusercontent.com/vega/vega/master/docs/data/population_engineers_hurricanes.csv'\n",
    "variable_list = ['population', 'engineers', 'hurricanes']\n",
    "\n",
    "def get_map(variable):\n",
    "    return alt.Chart(states).mark_geoshape().encode(\n",
    "        alt.Color(variable, type='quantitative')\n",
    "    ).transform_lookup(\n",
    "        lookup='id',\n",
    "        from_=alt.LookupData(source, 'id', [variable])\n",
    "    ).properties(\n",
    "        width=\"container\",\n",
    "        height=300,\n",
    "    ).project(\n",
    "        type='albersUsa'\n",
    "    ).repeat(\n",
    "        row=[variable]\n",
    "    )\n",
    "\n",
    "variable = pn.widgets.Select(options=variable_list, name='Variable', width=250)\n",
    "logo = pn.panel(altair_logo, height=150, align=\"center\")\n",
    "vega_panel = pn.pane.Vega(sizing_mode=\"stretch_width\", margin=(10,100,10,5))\n",
    "    \n",
    "@pn.depends(variable.param.value, watch=True)\n",
    "def update_vega_pane(variable):\n",
    "    vega_panel.object = get_map(variable)\n",
    "\n",
    "update_vega_pane(variable.value)\n",
    "    \n",
    "pn.Row(\n",
    "    pn.Column('# Altair Choropleth Maps', logo, variable),\n",
    "    vega_panel\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## App\n",
    "\n",
    "Lets wrap it into nice template that can be served via `panel serve altair_chropleth.ipynb`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.template.FastListTemplate(\n",
    "    site=\"Panel\", \n",
    "    title=\"Altair Choropleth Maps\", \n",
    "    sidebar=[logo, variable], \n",
    "    main=[\"A simple example demonstrating **how to use a *reactive function* depending on a single widget**, to render Altair/Vega plots.\", vega_panel]\n",
    ").servable();"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}