04_dashboard.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Just the dasboard\n",
    "\n",
    "This notebook contains just the dashboard stuff from the [previous notebook](03_heat_and_trees.ipynb). It might be slightly easier to run since there are no interactions being picked up other than those in the dashboard itself."
   ]
  },
  {
   "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",
    "from holoviews.streams import Params\n",
    "import hvplot.xarray\n",
    "import hvplot.pandas\n",
    "\n",
    "import colorcet as cc\n",
    "import panel as pn\n",
    "\n",
    "from geoviews.tile_sources import EsriImagery, tile_sources\n",
    "\n",
    "hv.extension('bokeh', width=90)\n",
    "\n",
    "description = \"\"\"\n",
    "An interactive dashboard for exploring the relationship between \n",
    "surface temperature and street trees. Based on Ken Steif's work\n",
    "summarized in [this blog post](http://urbanspatialanalysis.com/urban-heat-islands-street-trees-in-philadelphia/).\n",
    "\"\"\"\n",
    "\n",
    "mean_temp_f = intake.open_zarr('./data/mean_temp.zarr').read()\n",
    "trees_df = pd.read_parquet('./data/trees.parq')\n",
    "\n",
    "special_cmap = cc.fire[::-1][90:]\n",
    "\n",
    "temp_p = mean_temp_f\\\n",
    "    .hvplot('x', 'y', title='Surface Temp (F)', \n",
    "            geo=True, project=True, \n",
    "            cmap=special_cmap, alpha=.5, legend=False, \n",
    "            height=500, width=550)\\\n",
    "    .opts(opts.Image(data_aspect=None, clipping_colors={'min': 'transparent', 'max': 'transparent'}))\n",
    "\n",
    "trees_p = trees_df.hvplot.points('Longitude', 'Latitude', title='Street Tree Density',\n",
    "                                 geo=True, project=True, datashade=True, dynspread=True,\n",
    "                                 height=500, width=500, \n",
    "                                 legend=False, cmap=cc.kgy[::-1]).opts(data_aspect=None)\n",
    "\n",
    "start, end = (int(mean_temp_f.temperature.min() - 1), \n",
    "              int(mean_temp_f.temperature.max() + 1))\n",
    "thresh_slider = pn.widgets.RangeSlider(start=start, end=end, value=(start, end), \n",
    "                                       step=1, bar_color='#ff0000',\n",
    "                                       name='Temperature range')\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",
    "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_toggle = pn.widgets.Toggle(name='Tree Layer', value=True)\n",
    "trees_toggle.jslink(trees_p, value='glyph_renderer.visible')\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')\n",
    "\n",
    "basemap_selector = pn.widgets.Select(name='Tiling Service', value=EsriImagery, options=tile_sources)\n",
    "\n",
    "def set_tile_source(value):\n",
    "    return value\n",
    "    \n",
    "basemap_p = hv.DynamicMap(set_tile_source, streams=[Params(basemap_selector, ['value'])])\n",
    "\n",
    "dashboard = pn.Row(\n",
    "    pn.Column(\n",
    "        '# Heat and Trees',\n",
    "        description,\n",
    "        thresh_slider, \n",
    "        temp_alpha_slider,\n",
    "        basemap_selector,\n",
    "        trees_toggle,\n",
    "        trees_alpha_slider),\n",
    "    temp_p.opts(framewise=False) * trees_p.opts(framewise=False) * basemap_p.opts(framewise=False)\n",
    ")\n",
    "\n",
    "dashboard.servable()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}