{
 "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",
    "variable = pn.widgets.Select(options=variable_list, name='Variable')\n",
    "\n",
    "@pn.depends(variable.param.value)\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=500,\n",
    "        height=300\n",
    "    ).project(\n",
    "        type='albersUsa'\n",
    "    ).repeat(\n",
    "        row=[variable]\n",
    "    )\n",
    "\n",
    "pn.Row(\n",
    "    pn.Column('# Altair Choropleth Maps', pn.panel(altair_logo, height=150), variable),\n",
    "    get_map\n",
    ").servable()"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
