lecture-14.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Week 14: Dashboarding with Panel and the Holoviz Ecosystem\n",
    "\n",
    "December 5, 2019"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Last class!\n",
    "\n",
    "- Interactive dashboards with the Holoviz ecosystem\n",
    "- Combine all the tools: Altair, Hvplot, Holoviews, GeoViews, Datashader, Folium\n",
    "- We'll walk through two example dashboards\n",
    "- Review final project and dashboarding options\n",
    "- Time to work on final project, ask questions, etc."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Housekeeping\n",
    "\n",
    "- Still finishing reading through final project proposals\n",
    "    - Feedback via email in the next few days\n",
    "- Remainings homework solutions have been posted, grades back next week   \n",
    "- Final project due: **5pm on Monday, December 16th**\n",
    "\n",
    "**Final project details:** https://github.com/MUSA-620-Fall-2019/final-project"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "## Office Hours Next Week\n",
    "\n",
    "I'll hold office hours next week during the regular class slot: **Thursday Dec 12 from 5 to 8pm**"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Last time\n",
    "\n",
    "- Example: Github Pages\n",
    "- Introduction to web servers\n",
    "- Dashboards with Dash"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Recap: Two key elements of Dash apps\n",
    "\n",
    "- You must define the \"app.layout\" — this is your HTML layout\n",
    "- You must define your *callback* functions and the input/output that they take.\n",
    "    - You *mark* certain functions as callbacks so Dash knows they interact with your HTML code."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## More information: Dash user guide\n",
    "\n",
    "- https://dash.plot.ly/getting-started\n",
    "- Very good series of chapters illustrating different aspects of Dash\n",
    "- Relies on Plotly visualizations but idea is the same for IFrame elements"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Let's re-visit our shootings app in Dash from last week\n",
    "\n",
    "We can run from the Jupyter terminal:\n",
    "\n",
    "```bash\n",
    "cd dash-altair\n",
    "python dash_altair_shootings.py\n",
    "```\n",
    "\n",
    "[Dash app](https://github.com/MUSA-620-Fall-2019/week-14/blob/master/dash-altair/dash_altair_shootings.py)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Two important notes\n",
    "\n",
    "### 1. Windows Users\n",
    "\n",
    "You will likely need to navigate to localhost:5000 instead of http://0.0.0.0:5000\n",
    "\n",
    "Note: the web address http://0.0.0.0 is an alias for \"localhost\" — this means the web server is running locally on your computer.\n",
    "\n",
    "### 2. The \"python\" command\n",
    "\n",
    "Last week I was using the \"python3.7\" command to launch our Dash apps. This isn't available on all Windows machines. The more general (and better) command to use is the \"python\" command."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Exercise: modifying your Dash shootings apps\n",
    "\n",
    "Let's modify the Altair-based Dash app for the shootings data in Philadelphia to include a dropdown that allows the user to specify which race to show data for.\n",
    "\n",
    "**Steps**\n",
    "- First, take a look at the documentation for the `Dropdown` object in Dash's [core component library](https://dash.plot.ly/dash-core-components): https://dash.plot.ly/dash-core-components/dropdown\n",
    "- Modify the layout of the app to include a new `Div` element that contains the Dropdown element\n",
    "- Modify your `render()` function to accept the value of the race dropdown as an input to the function — then, you can use that value to select the appropriate subset of your data frame to plot!"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## One more Dash example: Dash + Folium\n",
    "\n",
    "- Since Folium plots can be converted to HTML, they can be displayed in Dash apps as HTML IFrame elements\n",
    "- We can use Dash widgets to control what gets displayed on the map\n",
    "\n",
    "[Dash app](https://github.com/MUSA-620-Fall-2019/week-14/blob/master/dash-folium/app.py)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "From the base repository folder, run\n",
    "\n",
    "```bash\n",
    "cd dash-folium\n",
    "python app.py\n",
    "```\n",
    "\n",
    "to start the example"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Deploying a Dash app\n",
    "\n",
    "- By default, Dash apps run on \"localhost\" - you can only access them on your own machine. \n",
    "- To share a Dash app, you need to \"deploy\" your Dash app to a server \n",
    "- Plotly has an \"enterprise\" (commercial) solution for this but it costs $$$"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Recommended solution: Heroku\n",
    "\n",
    "- Heroku makes deployment of arbitrary apps and dashboards very easy\n",
    "- **Key:** Provides a free tier to get you started \n",
    "\n",
    "### Getting started\n",
    "\n",
    "- First, signup for a Heroku free [account](https://signup.heroku.com)\n",
    "- Download and [install the command line interface (CLI)](https://devcenter.heroku.com/articles/getting-started-with-python#set-up). \n",
    "- Once you are set up follow the instructions to log into the CLI."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Launching your app on Heroku\n",
    "\n",
    "- The Dash docs contain a complete example of launching a simple Dash app to Heroku\n",
    "- See the \"Heroku Example\" section of https://dash.plot.ly/deployment\n",
    "- Make sure you've signed up for an account and downloaded the CLI first! (see the previous slide)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Summary: web-based visualizations so far\n",
    "\n",
    "- Github Pages via [MUSA-620-Fall-2019/github-pages-starter](https://github.com/MUSA-620-Fall-2019/github-pages-starter)\n",
    "    - Supports: Folium, Altair, Hvplot/Holoviews, HTML files via IFrames\n",
    "    - User cannot use the interactive features of the charts, but cannot change the content dynamically\n",
    "- Flask/Dash \n",
    "    - Supports: Folium, Altair, Hvplot/Holoviews, HTML files via IFrames\n",
    "    - Allows for more complex user interactions via a set of dynamic widgets\n",
    "    \n",
    "**Right now: [Panel](https://panel.pyviz.org/)**\n",
    "\n",
    "- Example gallery: https://panel.pyviz.org/gallery/index.html\n",
    "- Other demos from a Panel developer: https://jsignell.github.io/"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "## The downside of these options\n",
    "\n",
    "- Github Pages is static — only user interaction comes from what is built in to the chart\n",
    "- Flask/Dash has server support, but IFrame based visualizations still can't talk to each other\n",
    "\n",
    "**Goal:** a Python-based solution with server support where visualizations from different libraries can interact with each other"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Saving the best for last: 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": "subslide"
    }
   },
   "source": [
    "## A high-level dashboarding solution in Python\n",
    "\n",
    "- Relatively new, but the most promising dashboard library so far\n",
    "- Supports nearly all plotting libraries\n",
    "- Works just as well in a Jupyter notebook as on a standalone secure web server\n",
    "- Large set of interactive widgets"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "## Very general too...\n",
    "\n",
    "- Multi-page layouts via tabs [See this page](https://panel.pyviz.org/user_guide/Components.html)\n",
    "- Can include custom CSS / Javascript as well"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "**Crucial feature: supports live dashboarding code in a Jupyter notebook and deploying same code to a server**\n",
    "\n",
    "Only library to support entire data wrangling workflow in a Jupyter notebook"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "<img src=\"imgs/panel_comparison.png\" width=800>\n",
    "\n",
    "See [Panel FAQ](https://panel.pyviz.org/FAQ.html)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Built on top of the PyViz ecosystem\n",
    "\n",
    "<img src=\"imgs/pyviz.png\" width=600>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "**Also important: Panel provides only support for Datashader and visualizing large datasets**"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Today's Plan\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-620-Spring-2019/philadelphia-shootings-app)\n",
    "1. [Visualizing NYC taxi trips with Datashader and Altair](https://github.com/MUSA-620-Spring-2019/datashader-nyc-taxi-app)"
   ]
  },
  {
   "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](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",
    "We'll define our app as 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": [
    "## 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",
    "- Also let's you specify \n",
    "- Many many examples: https://panel.pyviz.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.pyviz.org)\n",
    "- [User Guide](https://panel.pyviz.org/user_guide/index.html)\n",
    "    - an overview of the concepts powering Panel dashboards\n",
    "- [Reference Gallery](https://panel.pyviz.org/reference/index.html)\n",
    "    - examples (code snippets) for the many different kinds of components possible in Panel dashboards"
   ]
  },
  {
   "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-620-Fall-2019/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-620-Fall-2019/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",
    "In this week's repositories there are notes for:\n",
    "\n",
    "- [Web visualizations options](./WebVisualizationOptions.md)\n",
    "- [Deployment options](./DeploymentOptions.md)"
   ]
  },
  {
   "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.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}