lecture-14B.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Week 14B: Dashboarding with Panel and the Holoviz Ecosystem\n",
    "\n",
    "December 8, 2020"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Last class!\n",
    "\n",
    "- Wrapping up feedback on proposals now — should get feedback in the next few days if you haven't yet\n",
    "- Final project due: **5pm on Monday, December 21st**\n",
    "\n",
    "**Final project details:** https://github.com/MUSA-550-Fall-2020/final-project"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Office Hours Next Week\n",
    "\n",
    "I'll hold office hours next week during the regular class slots: \n",
    "\n",
    "- **Tuesday, Dec 15 from 6 to 7:30pm**\n",
    "- **Thursday, Dec 17 from 6 to 7:30pm**\n",
    "\n",
    "**Details**\n",
    "- Zoom link is available on Canvas\n",
    "- No appointments, just drop in and we'll do a breakout room to chat\n",
    "- **If you can't make these times, please email me and we'll find a time to discuss**"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Today: Panel\n",
    "\n",
    "<a href=\"https://panel.pyviz.org/\" ><img src=\"imgs/panel_logo.png\" width=300></a>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Two example apps\n",
    "\n",
    "We'll walk through two examples that can serve as reference/templates for the final project:\n",
    "\n",
    "1. [Visualizing recent shootings in Philadelphia using Altair, Folium, and Holoviews](https://github.com/MUSA-550-Fall-2020/philadelphia-shootings-app)\n",
    "1. [Visualizing NYC taxi trips with Datashader and Altair](https://github.com/MUSA-550-Fall-2020/datashader-nyc-taxi-app)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Recommended Viewing\n",
    "\n",
    "PyData talk in Dec 2019 from the creator of Panel:\n",
    "\n",
    "https://www.youtube.com/watch?v=Ohr29FJjBi0"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## But first: an introduction to Python classes\n",
    "\n",
    "Let's take a quick look at [this nice tutorial](https://web.archive.org/web/20190730093245/http://www.jesshamrick.com/2011/05/18/an-introduction-to-classes-and-inheritance-in-python/)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Back to Panel..."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Dashboard apps in Panel\n",
    "\n",
    "- Panel contains multiple different APIs to create interactive dashboards. \n",
    "- See [the docs](https://panel.holoviz.org/user_guide/APIs.html) for more info\n",
    "\n",
    "\n",
    "We'll define our app in a declarative fashion using a **custom Python class** that defines the various components of our dashboard, which include:\n",
    "\n",
    "- The parameters we want the user to be able to change.\n",
    "- *Reactive* functions to generate the various charts/maps in our dashboard, based on those input parameters.\n",
    "- The dependencies between our chart functions and parameters."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Similar workflow to Dash\n",
    "\n",
    "- User changes some paramters via widgets\n",
    "- The dashboard knows which charts depends on those parameters\n",
    "- The necessary functions are executed to properly update the dashboard \n",
    "\n",
    "This is a *reactive* workflow."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Panel key concepts\n",
    "\n",
    "1. Panes\n",
    "    - A Pane wraps external viewable items like Bokeh, Plotly, Vega/Altair, or HoloViews plots, so they can be embedded in a dashboard. When the wrapped object or any parameter changes, a pane will update the view accordingly.\n",
    "1. Parameters\n",
    "    - A wrapper for the values the user selects, which determines which Panes get updated and which data is shown in the dashboard\n",
    "1. Panels\n",
    "    - Layout objects allow combining plots into a Row, Column, Tabs or a Grid.\n",
    "    \n",
    "**Overall, the concepts are similar to Dash: a layout piece and a reactive parameter/callback piece**"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Default Templates\n",
    "\n",
    "- Panel has recently (a few weeks ago!) added default layout templates to provide a simple, well-designed layout for the dashboard. \n",
    "- **Unfortunately**, they don't work when deploying the apps on Binder (see [this issue](https://github.com/holoviz/panel/issues/1821)) — we won't use them in our examples, but they look very promising!\n",
    "\n",
    "\n",
    "See more: https://panel.holoviz.org/user_guide/Templates.html"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## The Param library\n",
    "\n",
    "- As we will see, the `Param` library allows you to declare the parameters of a dashboard in a declarative manner (similar to Dash).\n",
    "- Declare the type of parameter you need and get the corresponding widget in your dashboard for free!\n",
    "- Many many examples: https://panel.holoviz.org/user_guide/Param.html"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Great examples on their documentation\n",
    "\n",
    "I'd encourage you to spend some time reading through their documentation...\n",
    "\n",
    "- [Documentation homepage](https://panel.holoviz.org)\n",
    "- [User Guide](https://panel.holoviz.org/user_guide/index.html)\n",
    "    - An overview of the concepts powering Panel dashboards\n",
    "- [App Gallery](https://panel.holoviz.org/gallery/index.html)\n",
    "    - Examples of end-to-end apps using Panel\n",
    "- [Reference Gallery](https://panel.holoviz.org/reference/index.html)\n",
    "    - Examples (code snippets) for the many different kinds of components possible in Panel dashboards\n",
    "- [Awesome Panel](https://github.com/MarcSkovMadsen/awesome-panel)\n",
    "    - Github repository of resources and information on Panel"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Two example repositories on the course's Github"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "## Example 1: Philadelphia shootings\n",
    "\n",
    "Tools: Panel, Hvplot/Holoviews, Altair, Folium\n",
    "\n",
    "https://github.com/MUSA-550-Fall-2020/philadelphia-shootings-app"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "## Example 2: NYC Taxi Trips\n",
    "\n",
    "Tools: Panel, Hvplot/Holoviews, Altair, Datashader\n",
    "\n",
    "\n",
    "https://github.com/MUSA-550-Fall-2020/datashader-nyc-taxi-app"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Web-based visualization options for the final project\n",
    "\n",
    "- Github Pages\n",
    "- Flask/Dash\n",
    "- Panel\n",
    "\n",
    "See notes in this week's repository: https://github.com/MUSA-550-Fall-2020/week-14/blob/master/WebVisualizationOptions.md\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Deployment Options\n",
    "\n",
    "See notes in this week's repository: https://github.com/MUSA-550-Fall-2020/week-14/blob/master/DeploymentOptions.md"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## That's it!\n",
    "\n",
    "\n",
    "### Reminder: Office hours next week\n",
    "\n",
    "- Tuesday, Dec 15 from 6 to 7:30pm\n",
    "- Thursday, Dec 17 from 6 to 7:30pm\n",
    "\n",
    "**Details**\n",
    "- Zoom link is available on Canvas\n",
    "- No appointments, just drop in and we'll do a breakout room to chat\n",
    "- **If you can't make these times, please email me and we'll find a time to discuss**"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Thank you for a great semester!!\n",
    "\n",
    "<img src=\"https://media.giphy.com/media/n4oKYFlAcv2AU/giphy.gif\" width=600></img>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "celltoolbar": "Slideshow",
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.8"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}