notebooks/inspection_dashboard.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 0,
        "height": 2,
        "hidden": false,
        "row": 0,
        "width": 12
       },
       "report_default": {}
      }
     }
    }
   },
   "source": [
    "# Health Inspections Dashboard"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 0,
        "height": 13,
        "hidden": true,
        "row": 21,
        "width": 12
       },
       "report_default": {}
      }
     }
    }
   },
   "source": [
    "Welcome to our PyData Carolinas tutorial! During this session, we're going to learn how to use the new Jupyter [declarative widgets](https://github.com/jupyter-incubator/declarativewidgets) and [dashboarding](https://github.com/jupyter-incubator/dashboards/wiki) capabilities. To do so, we will to turn this notebook into an interactive Health Inspection dashboard. \n",
    "\n",
    "We will start with prepped data from the [Durham Open Data](https://opendurham.nc.gov/page/home/) site and code for showing some of it in a table. We'll then progressively add widgets, arrange them in a grid layout, and deploy what we've built as a standalone web app. When we're done, we'll have a notebook-dashboard that:\n",
    "\n",
    "1. Shows a table of information about food-serving establishments\n",
    "2. Shows the location of an establishment when a user clicks a row in the table\n",
    "3. Filters the table by establishment name when the user enters text\n",
    "4. Shows a bar chart of health code violations per year for the filtered and selected establishments\n",
    "5. Shows a sample of inspection comments when the user clicks a bar in the chart\n",
    "\n",
    "All of the libraries you need to build and deploy the dashboard exist in your tutorial environment. We'll walk through the steps you need to take to implement the above features together. If you get stuck, raise your hand or ask a question in the tutorial Slack channel.\n",
    "\n",
    "Let's get started! &#x1f680;"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "import pandas as pd\n",
    "import numpy as np\n",
    "import json\n",
    "import string\n",
    "import io\n",
    "import requests\n",
    "import declarativewidgets"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 0,
        "height": 4,
        "hidden": true,
        "row": 21,
        "width": 4
       },
       "report_default": {}
      }
     }
    }
   },
   "source": [
    "We have to initialize the declarative widgets extension to make sure it's ready to work in this notebook."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {}
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "declarativewidgets.init()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "We preprocessed the health inspection data [in a separate notebook](https://github.com/jupyter-resources/tutorial-dashboards-declarativewidgets/blob/master/notebooks/inspection/inspection_data_prep.ipynb) to keep focus on dashboards and widgets in this tutorial. Here, we only need to load three CSV files as DataFrames.\n",
    "\n",
    "First, we read information about establishments that serve food."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {}
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "est = pd.read_csv('https://raw.githubusercontent.com/jupyter-resources/tutorial-dashboards-declarativewidgets/master/data/establishments_20160617.csv', parse_dates=['opened', 'closed'])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "est.head(1)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 0,
        "height": 4,
        "hidden": true,
        "row": 21,
        "width": 4
       },
       "report_default": {}
      }
     }
    }
   },
   "source": [
    "Second, we read information about inspections and their outcomes."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "ins = pd.read_csv('https://raw.githubusercontent.com/jupyter-resources/tutorial-dashboards-declarativewidgets/master/data/inspections_20160617.csv', parse_dates=['date'])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 0,
        "height": 4,
        "hidden": true,
        "row": 21,
        "width": 6
       },
       "report_default": {}
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "ins.head(1)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 0,
        "height": 4,
        "hidden": true,
        "row": 21,
        "width": 4
       },
       "report_default": {}
      }
     }
    }
   },
   "source": [
    "Finally, we load comments about health code violations identified during inspections."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "vio = pd.read_csv('https://raw.githubusercontent.com/jupyter-resources/tutorial-dashboards-declarativewidgets/master/data/violations_20160617.csv')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 4,
        "height": 5,
        "hidden": true,
        "row": 21,
        "width": 4
       },
       "report_default": {}
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "vio.head(1)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 8,
        "height": 4,
        "hidden": true,
        "row": 21,
        "width": 4
       },
       "report_default": {}
      }
     }
    }
   },
   "source": [
    "We're going add a map, so let's split the latitude/longitude string into lists."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "est['latlon'] = est.latlon.str.split(', ')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 0,
        "height": 4,
        "hidden": true,
        "row": 18,
        "width": 4
       },
       "report_default": {}
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "est.latlon.head(1)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "We're also going to relate establishments to their inspections and inspections to violations in certain cases. We'll perform these joinds on the proper ID columns up-front and use them where applicable below."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "est_ins = pd.merge(est, ins, left_on='id', right_on='est_id', suffixes=('_est', '_ins'))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 0,
        "height": 4,
        "hidden": true,
        "row": 22,
        "width": 12
       },
       "report_default": {}
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "est_ins.head(1)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "est_ins_vio = pd.merge(est_ins, vio, left_on='id_ins', right_on='insp_id', suffixes=('', '_vio'))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 0,
        "height": 6,
        "hidden": true,
        "row": 22,
        "width": 12
       },
       "report_default": {}
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "est_ins_vio.head(1)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "## Table of Establishments\n",
    "\n",
    "Alright! We've got resonably clean data. We know a bit about its structure. Let's make some of it visible in our dashboard. \n",
    "\n",
    "We don't need to write any code in this section. We'll briefly glance at what's here to get a sense of the general steps involved in binding declarative widgets to functions in our notebook. Then we'll position the table widget in dashboard view and deploy the dashboard as a separate web app to get familiar with the workflow."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 0,
        "height": 4,
        "hidden": true,
        "row": 18,
        "width": 4
       },
       "report_default": {}
      }
     }
    }
   },
   "source": [
    "### Import table widget"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "<link rel=\"import\" href=\"urth_components/urth-viz-table/urth-viz-table.html\" is='urth-core-import'>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 4,
        "height": 4,
        "hidden": true,
        "row": 18,
        "width": 4
       },
       "report_default": {}
      }
     }
    }
   },
   "source": [
    "### Write functions"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "def filter_by_pattern(df, pattern):\n",
    "    \"\"\"Filter a DataFrame so that it only includes rows where the name\n",
    "    column contains pattern, case-insensitive.\n",
    "    \"\"\"\n",
    "    return df[df.name.str.contains(pattern, case=False)]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "def est_table(pattern=''):\n",
    "    \"\"\"Build a DataFrame with basic info about establishments and their \n",
    "    latest inspection. Filter by checking if the provided pattern\n",
    "    appears in the establishment name. Clean up the names a bit and \n",
    "    format the dates.     \n",
    "    \"\"\"\n",
    "    df = (est_ins.pipe(filter_by_pattern, pattern)          # match pattern (we'll use this later)\n",
    "                 .dropna(subset=['final_score'])            # keep rows that have an inspection score\n",
    "                 .sort_values(['name', 'date'])             # sort by establishmnet name then date\n",
    "                 .drop_duplicates('id_est', keep='last'))   # keep the most recent inspection score\n",
    "    # truncate names at 25 characters and make them title case\n",
    "    df['name'] = df.name.str.slice(stop=25).apply(lambda s: string.capwords(s, ' '))\n",
    "    # format dates\n",
    "    df['date'] = df.date.dt.strftime('%Y-%m-%d')\n",
    "    # select columns and make their names nicer\n",
    "    return df[['est_id', 'name', 'date', 'grade', 'final_score', 'latlon']].rename(columns={'date': 'latest_inspection'})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 8,
        "height": 4,
        "hidden": true,
        "row": 18,
        "width": 4
       },
       "report_default": {}
      }
     }
    }
   },
   "source": [
    "### Bind widgets to functions"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 0,
        "height": 17,
        "hidden": false,
        "row": 5,
        "width": 6
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    },
    "scrolled": true
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "<template is=\"urth-core-bind\">\n",
    "    <urth-core-function ref=\"est_table\" \n",
    "                        arg-pattern=\"{{pattern}}\" \n",
    "                        result=\"{{est_table}}\" \n",
    "                        limit=\"1600 \"\n",
    "                        delay=\"500\" \n",
    "                        auto>\n",
    "    </urth-core-function>\n",
    "    <urth-viz-table datarows=\"{{ est_table.data }}\" \n",
    "                    rows-visible=\"19\" \n",
    "                    selection=\"{{est_selection}}\" \n",
    "                    columns=\"{{ est_table.columns }}\" \n",
    "                    selection-as-object>\n",
    "    </urth-viz-table>\n",
    "</template>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "## Establishments on a Map\n",
    "\n",
    "The `<urth-viz-table>` above makes the user-selected row available to other widgets. Let's introduce a map widget that shows a marker at the latitude and longitude of the selected establishment. \n",
    "\n",
    "We'll import the Google Map widget, put it in the notebook, and update it to show the selected establishment location. Then we'll position the map alongside the table in our dashboard view, and deploy our improved app. \n",
    "\n",
    "Note: We don't need to write any new Python here."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 0,
        "height": 4,
        "hidden": true,
        "row": 18,
        "width": 4
       },
       "report_default": {}
      }
     }
    }
   },
   "source": [
    "### Import map and marker widgets"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "<h4>TODO: add widget imports</h4>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 4,
        "height": 4,
        "hidden": true,
        "row": 18,
        "width": 4
       },
       "report_default": {}
      }
     }
    }
   },
   "source": [
    "### Bind map to table"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 6,
        "height": 17,
        "hidden": false,
        "row": 5,
        "width": 6
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "<template is=\"urth-core-bind\">\n",
    "    <h4>TODO: bind google map to table selection</h4>\n",
    "</template>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "## Filter By Name\n",
    "\n",
    "Our table shows all 1200+ establishments in the data set. Let's make it possible for the user to filter what's included.\n",
    "\n",
    "Here we'll import a text widget, put it in the notebook, and bind it to a Python function that filters the DataFrame shown in the table. Like before, we'll lay out and deploy our dashboard."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 8,
        "height": 4,
        "hidden": true,
        "row": 18,
        "width": 4
       },
       "report_default": {}
      }
     }
    }
   },
   "source": [
    "### Import paper-input"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "<h4>TODO: add widget imports</h4>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 0,
        "height": 4,
        "hidden": true,
        "row": 18,
        "width": 4
       },
       "report_default": {}
      }
     }
    }
   },
   "source": [
    "### Bind input field to function"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 0,
        "height": 3,
        "hidden": false,
        "row": 2,
        "width": 12
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "<template is=\"urth-core-bind\">\n",
    "    <h4>TODO: bind to filter_by_pattern</h4>\n",
    "</template>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "## Violations Per Year\n",
    "\n",
    "We've now got a table that we can filter and a map showing table selections. Let's do some plotting. Here we'll add a bar chart showing the median number of violations per year for select establishments.\n",
    "\n",
    "To do so, we'll import a bar chart widget, show it in the notebook, and bind it to a Python function that calculates the median number of violations. And (surprise!) we'll add it to our dashboard view."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 4,
        "height": 4,
        "hidden": true,
        "row": 18,
        "width": 4
       },
       "report_default": {}
      }
     }
    }
   },
   "source": [
    "### Import bar chart"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 8,
        "height": 4,
        "hidden": true,
        "row": 18,
        "width": 4
       },
       "report_default": {}
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "<link rel=\"import\" href=\"urth_components/urth-viz-bar/urth-viz-bar.html\" is='urth-core-import'>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 0,
        "height": 4,
        "hidden": true,
        "row": 18,
        "width": 4
       },
       "report_default": {}
      }
     }
    }
   },
   "source": [
    "### Write counting functions"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {}
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "def annual_median_violations(df):\n",
    "    \"\"\"Compute the median number of violations per year.\"\"\"\n",
    "    return (df.groupby('date')\n",
    "                       .count()\n",
    "                       .sort_index()\n",
    "                       .resample('A', how='median')\n",
    "                       .comments)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "def median_violation_counts(pattern='', est_id:int=None):\n",
    "    '''\n",
    "    Build time series of median violation count per year for establishments\n",
    "    matching the pattern and (optionally) for a specific establishment ID.\n",
    "    '''\n",
    "    df = pd.DataFrame()\n",
    "    # median violations for the filtered set of establishments\n",
    "    df['table'] = est_ins_vio.pipe(filter_by_pattern, pattern).pipe(annual_median_violations)\n",
    "    if est_id is not None:\n",
    "        # median violations for the single selected establishment\n",
    "        df['selected'] = est_ins_vio[est_ins_vio.est_id == est_id].pipe(annual_median_violations)\n",
    "    # make the index a column\n",
    "    return df.reset_index()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 4,
        "height": 4,
        "hidden": true,
        "row": 18,
        "width": 4
       },
       "report_default": {}
      }
     }
    }
   },
   "source": [
    "### Bind function to bar chart"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 0,
        "height": 18,
        "hidden": false,
        "row": 22,
        "width": 12
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "<template is=\"urth-core-bind\">\n",
    "    <h4>TODO: show median violations plot</h4>\n",
    "</template>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 0,
        "height": 4,
        "hidden": true,
        "row": 21,
        "width": 4
       },
       "report_default": {}
      }
     }
    }
   },
   "source": [
    "## Sample Violation Comments\n",
    "\n",
    "As a final step, we'll show a sample of comments made by inspectors about health code violations. We'll do this when a user click a bar in the chart above.\n",
    "\n",
    "This time, we'll write a function to draw an appropriate random sample of comments. Then we'll create our own widget to show them in a list view. "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 8,
        "height": 4,
        "hidden": true,
        "row": 18,
        "width": 4
       },
       "report_default": {}
      }
     }
    }
   },
   "source": [
    "### Write sampling function"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {}
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "def sample_comments(dt:str, series:str, pattern='', est_id:int=None):\n",
    "    \"\"\"Draw a random sample of violation comments for a selected year\n",
    "    and series.\n",
    "    \n",
    "    Parameters\n",
    "    ==========\n",
    "    dt: str\n",
    "        Datetime selected\n",
    "    series: str\n",
    "        Series name selected, 'table' or 'selected'\n",
    "    pattern: str\n",
    "        Establishment name filter pattern\n",
    "    est_id: int\n",
    "        Selected establishment\n",
    "    \n",
    "    Return\n",
    "    ======\n",
    "    dict\n",
    "        comments: list\n",
    "            Sample of comments\n",
    "        total: int\n",
    "            Total comments in the population\n",
    "        for_year: int\n",
    "            Year portion of dt\n",
    "        for_series: str\n",
    "            Echo of the series parameter\n",
    "    \"\"\"\n",
    "    pass"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 0,
        "height": 4,
        "hidden": true,
        "row": 18,
        "width": 4
       },
       "report_default": {}
      }
     }
    }
   },
   "source": [
    "### Bind selected bar to function, return value to custom widget"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 0,
        "height": 13,
        "hidden": false,
        "row": 40,
        "width": 12
       },
       "report_default": {}
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "<template is=\"urth-core-bind\">\n",
    "    <h4>TODO: show sample of violation comments within the selected year / series</h4>\n",
    "</template>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {}
      }
     }
    }
   },
   "source": [
    "## Go Further\n",
    "\n",
    "We've completed a rather nifty dashboard. But there's so much more we could do. Let's spend the rest of the session adding something new to the dashboard. Pair up with someone sitting near you or go at it on your own. The instructors will wander around and help where needed.\n",
    "\n",
    "Here are some ideas to get you started, but feel free to come up with something on your own:\n",
    "\n",
    "1. How do inspection scores vary over time?\n",
    "    * Plot them using `<urth-viz-line>`.\n",
    "    * Plot them using matplotlib, bokeh, plot.ly, ... instead.\n",
    "2. What restaurants are near the conference venue? \n",
    "    * Show establishments within the map viewport. Let users click to select one on the map, not just in the table.\n",
    "    * Add addresses to the table. Hook the filter field to addresses as well.\n",
    "3. How do establishments compare?\n",
    "    * Show letter grades for the top and bottom scoring establishments over time.\n",
    "    * Add two drop down boxes to pick two establishments. Plot violation counts for the two over time.\n",
    "    * Add a time series of scores to a plot every time a user clicks a row in the table. Add a reset button to clear out the set.\n",
    "4. How can get more details about a selected establishment?\n",
    "    * Reverse geocode the latlon of an establishment and show its address.\n",
    "    * Pull data from other cloud services (e.g., Twitter, Foursquare, Yelp!) and display it.\n",
    "5. Can you improve the look and feel?\n",
    "    * Add CSS to style the table.\n",
    "    * Change the color palette of the plot.\n",
    "6. *YOUR IDEA HERE* - Do whatever floats your boat!"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 0,
        "height": 8,
        "hidden": true,
        "row": 18,
        "width": 12
       },
       "report_default": {}
      }
     }
    }
   },
   "source": [
    "## For More Information\n",
    "\n",
    "* [Jupyter Declarative Widgets](http://jupyter-incubator.github.io/declarativewidgets/)\n",
    "* [Jupyter Dashboards](https://github.com/jupyter-incubator/dashboards/wiki)\n",
    "* [Adding Declarative Widgets to the Jupyter Notebook](http://blog.ibmjstart.net/2016/04/28/adding-declarative-widgets-to-the-jupyter-notebook/)\n",
    "* [Deploying Dynamic Dashboards](http://blog.ibmjstart.net/2016/04/26/2822/)\n",
    "* [Developing Data Products with Jupyter Notebooks and Spark](http://www.spark.tc/developing-data-products-with-jupyter-notebooks-and-spark/)\n",
    "* [Polymer Element Catalog](https://elements.polymer-project.org/)\n",
    "* [Deploy Your Own Jupyter Notebook and Dashboard Servers](https://github.com/jupyter-incubator/dashboards_setup/tree/master/docker_deploy)"
   ]
  }
 ],
 "metadata": {
  "extensions": {
   "jupyter_dashboards": {
    "activeView": "grid_default",
    "version": 1,
    "views": {
     "grid_default": {
      "cellMargin": 10,
      "defaultCellHeight": 20,
      "maxColumns": 12,
      "name": "grid",
      "type": "grid"
     },
     "report_default": {
      "name": "report",
      "type": "report"
     }
    }
   }
  },
  "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.5.1"
  },
  "widgets": {
   "state": {
    "D80F4289C142420184FD783927DF51BB": {
     "views": []
    },
    "E43457A879BF4FB1B275FDF9D305D976": {
     "views": []
    }
   },
   "version": "1.1.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}