03_heat_and_trees.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Panel - Interacting with the visualization\n",
    "\n",
    "In the [heat notebook](01_heat.ipynb) we generated a visual of the thresholded surface temperature over Philadelphia and in the [trees notebook](02_trees.ipynb) we looked at the location of street trees. These plots are rendered with bokeh and use running python kernel to resample the data when zooming in and out. But what if we want to allow the user to set their own threshold. To enable this kind of interactivity we'll use [panel](https://panel.pyviz.org)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import intake\n",
    "import pandas as pd\n",
    "\n",
    "import holoviews as hv\n",
    "from holoviews import opts\n",
    "import hvplot.xarray\n",
    "import hvplot.pandas\n",
    "\n",
    "import panel as pn\n",
    "from geoviews.tile_sources import EsriImagery\n",
    "\n",
    "hv.extension('bokeh', width=90)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Load the data\n",
    "\n",
    "First load in the data that we computed and saved in the previous notebook. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "mtf_source = intake.open_zarr('./data/mean_temp.zarr')\n",
    "mean_temp_f = mtf_source.read()\n",
    "mean_temp_f"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "trees_df = pd.read_parquet('./data/trees.parq')\n",
    "trees_df.head()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Make the same special colormap:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import colorcet as cc\n",
    "special_cmap = cc.fire[::-1][90:]"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Use panel.interact\n",
    "\n",
    "Write a function that generates the thresholded plot and takes the temperature at which to threshold as an argument. Use the `pn.interact` decorator to \"widgetize\" the function. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "@pn.interact(thresh=(70, 100))\n",
    "def threshold(thresh=90):\n",
    "    thresholded_temp_p = (mean_temp_f.where(mean_temp_f.temperature > thresh)\n",
    "        .hvplot(x='x', y='y', z='temperature', title=f'Surface Temp (F) > {thresh}',\n",
    "                cmap=special_cmap, geo=True, rasterize=True, framewise=False,\n",
    "                alpha=0.5, frame_height=450, colorbar=False, legend=False))\n",
    "\n",
    "    return thresholded_temp_p * EsriImagery"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "threshold"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "There are a few limitations to this approach. For instance, on each interaction we: \n",
    "  1. Recompute the data \n",
    "  2. Re-render the whole plot\n",
    "  2. Call out to the python kernel (doesn't work in a static version)\n",
    "  \n",
    "### Using color clipping\n",
    "\n",
    "To combat some of these limitations we can use color clipping and use a different panel API to link interactions using js. \n",
    "\n",
    "We'll start by defining the plot."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "p = mean_temp_f.hvplot(x='x', y='y', title='Surface Temp (F)',\n",
    "                       geo=True, project=True, framewise=False,\n",
    "                       cmap=special_cmap, alpha=.5,\n",
    "                       frame_height=450, legend=False)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Next we'll set up a clipped colormap that only shows values between an upper and lower bound."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "temp_p = p.opts(opts.Image(clipping_colors={'min': 'transparent', 'max': 'transparent'}), clone=True)\n",
    "temp_p.redim.range(temperature=(90, 120)) * EsriImagery"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "So we've solved the problem of the data being recomputed every time. Now we can add in interaction. "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Using JS linking\n",
    "\n",
    "Now we are trying to interact with things that are on the javascript side. So instead of having the interaction happen on the python side, we can have it on the js side. This will make it faster and also allow it to happen *without a python kernel running*."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "start, end = (int(mean_temp_f.temperature.min() - 1), \n",
    "              int(mean_temp_f.temperature.max() + 1))\n",
    "\n",
    "thresh_slider = pn.widgets.RangeSlider(start=start, end=end, value=(start, end), \n",
    "                                       step=1, bar_color='#ff0000',\n",
    "                                       name='Temperature range')\n",
    "\n",
    "thresh_slider.jslink(temp_p, code={'value': \"\"\"\n",
    "color_mapper.low = source.value[0];\n",
    "color_mapper.high = source.value[1];\n",
    "\"\"\"})\n",
    "\n",
    "pn.Row(thresh_slider, temp_p)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Adding in trees\n",
    "\n",
    "It is hypothesized that where there are more trees the land surface temperature will be less extreme. To explore this, we will overlay street trees with the thresholded land surface temperature. Let's make a plot of trees."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "trees_p = trees_df.hvplot.points('Longitude', 'Latitude', title='Street Tree Density',\n",
    "                                 geo=True, project=True, datashade=True, dynspread=True, framewise=False, \n",
    "                                 frame_height=450, legend=False, cmap=cc.kgy[::-1])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "It'd be nice to be able to turn the tree layer on and off using a toggle button."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "trees_toggle = pn.widgets.Toggle(name='Tree Layer', value=True)\n",
    "trees_toggle.jslink(trees_p, value='glyph_renderer.visible')\n",
    "\n",
    "pn.Row(trees_toggle, trees_p)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Base map layer\n",
    "\n",
    "The last layer is a base map layer which will be used to select between different tiling services. For this we will actually need a python kernel running (can't use `jslink`)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from geoviews.tile_sources import tile_sources"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "basemap_selector = pn.widgets.Select(name='Tiling Service', value=EsriImagery, options=tile_sources)\n",
    "\n",
    "@pn.depends(basemap_selector)\n",
    "def set_tile_source(value):\n",
    "    return value\n",
    "\n",
    "basemap_p = hv.DynamicMap(set_tile_source).opts(height=500, width=550)\n",
    "pn.Row(basemap_selector, basemap_p)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Adding some more interaction\n",
    "\n",
    "To round out the dashboard we'll add some alpha sliders and `jslink` them to the temperature plot and the trees plot."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "temp_alpha_slider = pn.widgets.FloatSlider(start=0, end=1, value=.5, name='Temperature alpha')\n",
    "temp_alpha_slider.jslink(temp_p, value='glyph.global_alpha')\n",
    "\n",
    "trees_alpha_slider = pn.widgets.FloatSlider(start=0, end=1, value=.7, name='Trees alpha')\n",
    "trees_alpha_slider.jslink(trees_p, value='glyph.global_alpha');"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Put it all together in a panel object."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "dashboard = pn.Row(\n",
    "    pn.Column(\n",
    "        '# Heat and Trees',\n",
    "        thresh_slider, \n",
    "        temp_alpha_slider,\n",
    "        basemap_selector,\n",
    "        trees_toggle,\n",
    "        trees_alpha_slider\n",
    "    ),\n",
    "    temp_p.opts(data_aspect=None) * trees_p.opts(data_aspect=None) * basemap_p\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Deploy\n",
    "\n",
    "To deploy the dashboard just call the `.servable()` method on the panel object. Then use:\n",
    "\n",
    "```\n",
    "panel serve --show 03_heat_and_trees.ipynb\n",
    "```"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "dashboard.servable()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Embed\n",
    "\n",
    "To embed the image in a static website, we need to run through all the python interactions and save off the possible states. Panel provides a mechanism to do this using `embed`. When you call this method, the plot will run through every combination of the options making some decisions about step to reduce the number of combinations. As an example we can first do a simple save."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# dashboard.save('heat_and_trees.html')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "A lot of the dashboard works in that version. The only part that doesn't is the tile selector. For that we need a python kernel OR embedded output."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# dashboard.save('heat_and_trees_embedded.html', title='Heat and Trees', embed=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**NOTE**: commenting those save commands out so that they don't run when you are serving the panel object from this notebook."
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}