{
 "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', sizing_mode=\"stretch_width\", template=\"fast\")\n",
    "pn.state.template.param.update(site=\"Panel\", title=\"Altair Choropleth Maps\")"
   ]
  },
  {
   "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']"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "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",
    "    )"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "logo = pn.panel(altair_logo, height=150, align=\"center\", sizing_mode=\"fixed\")\n",
    "centered_logo = pn.Column(pn.layout.HSpacer(), logo, pn.layout.HSpacer()).servable(target=\"sidebar\")\n",
    "variable = pn.widgets.Select(options=variable_list, name='Variable', width=250).servable(target=\"sidebar\")\n",
    "info=pn.panel(\"A simple example demonstrating **how to use a *reactive function* depending on a single widget**, to render Altair plots.\").servable()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def get_map_pane(variable):\n",
    "    return pn.pane.Vega(get_map(variable), sizing_mode=\"stretch_width\", margin=(10,100,10,5))\n",
    "\n",
    "map_pane = pn.panel(pn.bind(get_map_pane, variable=variable)).servable()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Explore the component in the notebook"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.Row(\n",
    "    pn.Column('# Altair Choropleth Maps', logo, variable, sizing_mode=\"fixed\"),\n",
    "    map_pane,\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Serve the App\n",
    "\n",
    "You can serve the app via `panel serve altair_chropleth.ipynb`. Add `--autoreload` for hot reloading while developing."
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}