visu.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Interactive visualization\n",
    "## Data Loading\n",
    "### Statistical GIS Boundary Files dataset\n",
    "In the section, we will use ```geopandas``` to load the [Statistical GIS Boundary Files for London](https://data.london.gov.uk/dataset/statistical-gis-boundary-files-london). Even if this dataset was made avialable in 2011, we should note that the boundaries haven't really changed compared to 2015 (date of Tesco Dataset) and it should not impact our visualisation.\n",
    "\n",
    "For each aggregation level ```LSOA```, ```MSOA```, ```WARD```, ```BOROUGH``` we read the correponding file and retreive the following subset of columns: \n",
    "\n",
    "* ```area_id ```: the id of the area considered\n",
    "* ```name    ```: the name of the area considered\n",
    "* ```geometry```: the geometric shape of the area in the 2D london map (polygon or multipolygon if the area is definied in multiple pieces)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<style scoped>\n",
       "    .dataframe tbody tr th:only-of-type {\n",
       "        vertical-align: middle;\n",
       "    }\n",
       "\n",
       "    .dataframe tbody tr th {\n",
       "        vertical-align: top;\n",
       "    }\n",
       "\n",
       "    .dataframe thead th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>area_id</th>\n",
       "      <th>name</th>\n",
       "      <th>geometry</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>E01000001</td>\n",
       "      <td>City of London 001A</td>\n",
       "      <td>POLYGON ((532105.092 182011.230, 532162.491 18...</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>E01000002</td>\n",
       "      <td>City of London 001B</td>\n",
       "      <td>POLYGON ((532746.813 181786.891, 532671.688 18...</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>E01000003</td>\n",
       "      <td>City of London 001C</td>\n",
       "      <td>POLYGON ((532135.145 182198.119, 532158.250 18...</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3</th>\n",
       "      <td>E01000005</td>\n",
       "      <td>City of London 001E</td>\n",
       "      <td>POLYGON ((533807.946 180767.770, 533649.063 18...</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>4</th>\n",
       "      <td>E01000006</td>\n",
       "      <td>Barking and Dagenham 016A</td>\n",
       "      <td>POLYGON ((545122.049 184314.931, 545271.917 18...</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "</div>"
      ],
      "text/plain": [
       "     area_id                       name  \\\n",
       "0  E01000001        City of London 001A   \n",
       "1  E01000002        City of London 001B   \n",
       "2  E01000003        City of London 001C   \n",
       "3  E01000005        City of London 001E   \n",
       "4  E01000006  Barking and Dagenham 016A   \n",
       "\n",
       "                                            geometry  \n",
       "0  POLYGON ((532105.092 182011.230, 532162.491 18...  \n",
       "1  POLYGON ((532746.813 181786.891, 532671.688 18...  \n",
       "2  POLYGON ((532135.145 182198.119, 532158.250 18...  \n",
       "3  POLYGON ((533807.946 180767.770, 533649.063 18...  \n",
       "4  POLYGON ((545122.049 184314.931, 545271.917 18...  "
      ]
     },
     "execution_count": 5,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "import pandas as pd\n",
    "import geopandas as gpd\n",
    "import numpy as np\n",
    "#data path\n",
    "data_path = 'data/statistical-gis-boundaries-london/ESRI/'\n",
    "#read geopandas df and selected subset of columns\n",
    "gdf_lsoa = gpd.read_file(data_path + 'LSOA_2011_London_gen_MHW.shp' )[['LSOA11CD','LSOA11NM','geometry']]\\\n",
    "                .rename(columns={'LSOA11CD':'area_id','LSOA11NM':'name'})\n",
    "gdf_msoa = gpd.read_file(data_path + 'MSOA_2011_London_gen_MHW.shp' )[['MSOA11CD','MSOA11NM','geometry']]\\\n",
    "                .rename(columns={'MSOA11CD':'area_id','MSOA11NM':'name'})\n",
    "gdf_ward = gpd.read_file(data_path + 'London_Ward_CityMerged.shp')[['GSS_CODE','NAME','geometry']]\\\n",
    "               .rename(columns={'GSS_CODE':'area_id','NAME':'name'})\n",
    "gdf_borough = gpd.read_file(data_path + 'London_Borough_Excluding_MHW.shp' )[['GSS_CODE','NAME','geometry']]\\\n",
    "               .rename(columns={'GSS_CODE':'area_id','NAME':'name'})\n",
    "#store them into a dictionary\n",
    "gdf = {'lsoa':gdf_lsoa,'msoa':gdf_msoa,'osward':gdf_ward,'borough':gdf_borough}\n",
    "gdf_lsoa.head()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Tesco data set\n",
    "\n",
    "We can proceed further by reading the tesco dataset (output of ```cluster.jpnb```). This dataset contains a subset of the orginal tesco dataset containing some of typical product features:\n",
    "\n",
    "> ```fat,saturate,sugar,protein,carb,fibre,energy_tot,h_nutriments_calories```\n",
    "\n",
    "Moreover, it stores these features for each combinaison of \n",
    "\n",
    " * ```aggretation level``` : lsoa, msoa, ward, borough \n",
    " * ```period```            : January, February,..., December as well as the yearly aggregation (Year)\n",
    "\n",
    "The following cell aims at constructing a efficient indexing data structure that allows to easily retrieve the typical product for a given aggregation level and period in order to speed up the refreshing time of the visualization. We used a dictionary for this purpose."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "scrolled": true
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<style scoped>\n",
       "    .dataframe tbody tr th:only-of-type {\n",
       "        vertical-align: middle;\n",
       "    }\n",
       "\n",
       "    .dataframe tbody tr th {\n",
       "        vertical-align: top;\n",
       "    }\n",
       "\n",
       "    .dataframe thead th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>area_id</th>\n",
       "      <th>fat</th>\n",
       "      <th>saturate</th>\n",
       "      <th>sugar</th>\n",
       "      <th>protein</th>\n",
       "      <th>carb</th>\n",
       "      <th>fibre</th>\n",
       "      <th>energy_tot</th>\n",
       "      <th>h_nutrients_calories</th>\n",
       "      <th>month</th>\n",
       "      <th>agg_level</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>E09000001</td>\n",
       "      <td>8.472985</td>\n",
       "      <td>3.361599</td>\n",
       "      <td>9.278065</td>\n",
       "      <td>5.253333</td>\n",
       "      <td>15.779639</td>\n",
       "      <td>1.619850</td>\n",
       "      <td>165.851751</td>\n",
       "      <td>1.618208</td>\n",
       "      <td>yea</td>\n",
       "      <td>borough</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>E09000002</td>\n",
       "      <td>9.209959</td>\n",
       "      <td>3.596834</td>\n",
       "      <td>10.793244</td>\n",
       "      <td>5.193872</td>\n",
       "      <td>19.784988</td>\n",
       "      <td>1.590335</td>\n",
       "      <td>187.174390</td>\n",
       "      <td>1.545272</td>\n",
       "      <td>yea</td>\n",
       "      <td>borough</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>E09000003</td>\n",
       "      <td>8.594464</td>\n",
       "      <td>3.407353</td>\n",
       "      <td>9.530548</td>\n",
       "      <td>5.129627</td>\n",
       "      <td>17.025950</td>\n",
       "      <td>1.638639</td>\n",
       "      <td>170.655504</td>\n",
       "      <td>1.581507</td>\n",
       "      <td>yea</td>\n",
       "      <td>borough</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3</th>\n",
       "      <td>E09000004</td>\n",
       "      <td>9.119180</td>\n",
       "      <td>3.466346</td>\n",
       "      <td>10.941085</td>\n",
       "      <td>5.304496</td>\n",
       "      <td>19.997105</td>\n",
       "      <td>1.657118</td>\n",
       "      <td>187.754791</td>\n",
       "      <td>1.551703</td>\n",
       "      <td>yea</td>\n",
       "      <td>borough</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>4</th>\n",
       "      <td>E09000005</td>\n",
       "      <td>8.962466</td>\n",
       "      <td>3.559913</td>\n",
       "      <td>10.148610</td>\n",
       "      <td>5.132915</td>\n",
       "      <td>18.726476</td>\n",
       "      <td>1.585978</td>\n",
       "      <td>180.510586</td>\n",
       "      <td>1.555736</td>\n",
       "      <td>yea</td>\n",
       "      <td>borough</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "</div>"
      ],
      "text/plain": [
       "     area_id       fat  saturate      sugar   protein       carb     fibre  \\\n",
       "0  E09000001  8.472985  3.361599   9.278065  5.253333  15.779639  1.619850   \n",
       "1  E09000002  9.209959  3.596834  10.793244  5.193872  19.784988  1.590335   \n",
       "2  E09000003  8.594464  3.407353   9.530548  5.129627  17.025950  1.638639   \n",
       "3  E09000004  9.119180  3.466346  10.941085  5.304496  19.997105  1.657118   \n",
       "4  E09000005  8.962466  3.559913  10.148610  5.132915  18.726476  1.585978   \n",
       "\n",
       "   energy_tot  h_nutrients_calories month agg_level  \n",
       "0  165.851751              1.618208   yea   borough  \n",
       "1  187.174390              1.545272   yea   borough  \n",
       "2  170.655504              1.581507   yea   borough  \n",
       "3  187.754791              1.551703   yea   borough  \n",
       "4  180.510586              1.555736   yea   borough  "
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "tesco = pd.read_csv('data/tesco.csv')\n",
    "tesco.head()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [],
   "source": [
    "def create_datasource(tesco):\n",
    "    periods          = list(tesco.month.unique())\n",
    "    agg_levels       = list(tesco.agg_level.unique())\n",
    "    feature_names    = [c for c in tesco.columns if c not in ['area_id','month','agg_level']]\n",
    "\n",
    "    tesco_dict = dict()\n",
    "    for level in agg_levels:\n",
    "        inner = dict()\n",
    "        for mo in periods:\n",
    "            df_mo_level = tesco.query(\"agg_level == @level and month == @mo\")\n",
    "            inner[mo]   = gdf[level].merge(df_mo_level, on='area_id', how = 'left').fillna('No data')\n",
    "        tesco_dict[level] = inner\n",
    "    return tesco_dict,periods,agg_levels,feature_names\n",
    "\n",
    "tesco_dict,periods,agg_levels,feature_names = create_datasource(tesco)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Convert data into JSON format for Bokeh\n",
    "\n",
    "The bokeh library we are going to use to make the interactive visualiastion requires the data to be encoded in a JSON format. Given a ```agg_level``` and a ```month``` the following function will performs this encoding."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [],
   "source": [
    "import json\n",
    "#Convert data to json\n",
    "def json_data(agg_level,month,feature=None,data=tesco_dict):\n",
    "    mo = data[agg_level][month]\n",
    "    merged_json = json.loads(mo.to_json())\n",
    "    json_data = json.dumps(merged_json)\n",
    "    return json_data"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Visualisation creation\n",
    "\n",
    "Since we want to create an interactive visualisation need to store the current state of the application. We chose to simply record in a dict name ```state```:\n",
    "\n",
    "1. ```agg_level```: the aggregation level \n",
    "2. ```feature  ```: the feature of the typical product (or custering) that \n",
    "3. ```month    ```: Jan, Feb,..., Dec as well as the yearly aggregation (Year)\n",
    "\n",
    "## Color Bar helper functions\n",
    "In this first section we will define several helper functions that will be used by the visualisation in the last cells of this notebook. We will focus in creating a ```color bar``` for the visualisation. It should obsivously depend on the feature (will define de range of the color bar)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {},
   "outputs": [],
   "source": [
    "def get_feature(state:dict,tesco_dict=tesco_dict):\n",
    "    \"\"\"\n",
    "    Returns the pd.Series associated to state where the missing values are \n",
    "    filtered and the type is converted from string to double\n",
    "    \"\"\"\n",
    "    #get the data from the aggregation\n",
    "    data = tesco_dict[state['agg_level']][state['month']][state['feature']]\n",
    "    data = data[data != 'No data']  # filter missing values\n",
    "    data = data.astype(np.double)   # convert into double\n",
    "    out  = data if len(data)>0 else None\n",
    "    return out\n",
    "\n",
    "def create_color_mapper(state:dict,n_default_colors=8,nan_color='#d9d9d9'):\n",
    "    \"\"\"\n",
    "    This function create the color mapper used in the colorbar for the given state\n",
    "    \"\"\"\n",
    "    feature  = get_feature(state) # Select feature\n",
    "    n_colors = n_default_colors\n",
    "    palette  = brewer['YlGnBu'][n_colors]           # Reverse : dark blue is for highest values.\n",
    "    palette  = palette[::-1]                        # Create a linear color mapper with right range\n",
    "    low  = 0 if feature is None else feature.quantile(0.05)\n",
    "    high = 1 if feature is None else feature.quantile(0.95)\n",
    "    color_mapper = LinearColorMapper(\n",
    "            palette = palette, nan_color = nan_color,   # nan color\n",
    "            low = low, high = high)                     # right range\n",
    "    return color_mapper\n",
    "\n",
    "def create_color_bar(state:dict,plot,geosource):\n",
    "    \"\"\"\n",
    "    Creates the color bar given the state and geosource and link it to the plot\n",
    "    \"\"\"\n",
    "    color_mapper = create_color_mapper(state)       # use previous function to create the mapper\n",
    "    color_bar = ColorBar(color_mapper=color_mapper, # set the mapper\n",
    "        label_standoff=8,width = 500, height = 20,  # specify size \n",
    "        border_line_color=None,                     # style : no border lines\n",
    "        location = (0,0), orientation ='horizontal')# horizontal bar \n",
    "    # link color bar and plot \n",
    "    plot.patches('xs','ys', source = geosource,     # link geosource\n",
    "        fill_color = {'field' :state['feature'],    # color related to selected feature\n",
    "                      'transform':color_mapper},    # use the defined colormapper\n",
    "        line_color = 'black',                       # style : black borders\n",
    "        line_width = 0.25, fill_alpha = 1)          # more styling\n",
    "    plot.add_layout(color_bar, 'below')             # add color bar below plot\n",
    "    return color_bar"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Handling events : user clicks and changes\n",
    "The following method will handle the interactivity in our plot. When the user select a new ```month```, ```agg_level``` or ```feature```, we need to update:\n",
    "\n",
    "1. The title of the plot\n",
    "2. The color mapper of the plot since the range of value has changed. We chose to only update it when we change the feature. In that way it is still possible to compare the results accross months\n",
    "3. the hover "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {},
   "outputs": [],
   "source": [
    "def update_plot(state_field:str, new_val:str,state:dict,plot,geosource,color_bar):\n",
    "    \"\"\"\n",
    "    Handles interactivity in the visualization\n",
    "    @param state_field : (str) element of the state that needs to be updated\n",
    "    @param new_val     : (str) new value of state_field element \n",
    "    \"\"\"\n",
    "    state[state_field] = new_val  # state update\n",
    "    # update title\n",
    "    plot.title.text = \"{feature} consumption for {agg_level} during the prediod {month}\".format(**state)\n",
    "    if state_field == 'feature' or state_field == 'agg_level':                    # update color mapper\n",
    "        color_mapper = create_color_mapper(state)   # create new mapper\n",
    "        color_bar.color_mapper = color_mapper       # set the new mapper in color bar\n",
    "        plot.patches('xs','ys',                     # update patches\n",
    "            source = geosource,\n",
    "            fill_color = {'field' :state['feature'], 'transform' : color_mapper},\n",
    "            line_color = 'black', line_width = 0.25, fill_alpha = 1)\n",
    "    new_data = json_data(**state)                   # get the new data and convert to JSON\n",
    "    geosource.geojson = new_data                    # set new data to trigger recoloring event\n",
    "    # new hover for the new feature \n",
    "    hover = HoverTool(tooltips = [('Area name','@name'),(state['feature'], '@'+state['feature'])])\n",
    "    # add hover tools to plot\n",
    "    plot.tools = [hover]"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Creation of the actual figure and components\n",
    "Here is are the actual components defined. We created a ```bkapp``` (bokeh application) function that given the ```doc``` (bokeh document), creates the components :\n",
    "\n",
    "1. ```plot          ```: map of colors for the selected areas\n",
    "2. ```btn_period    ```: button to select the period\n",
    "3. ```btn_agg_level ```: button to select the aggregaton level\n",
    "4. ```select_feature```: button to select the feature of typical product to display (or clustering)\n",
    "\n",
    "it then adds the respective event handers and links the components to the ```doc```"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 23,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "    <div class=\"bk-root\">\n",
       "        <a href=\"https://bokeh.org\" target=\"_blank\" class=\"bk-logo bk-logo-small bk-logo-notebook\"></a>\n",
       "        <span id=\"2336\">Loading BokehJS ...</span>\n",
       "    </div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "\n",
       "(function(root) {\n",
       "  function now() {\n",
       "    return new Date();\n",
       "  }\n",
       "\n",
       "  var force = true;\n",
       "\n",
       "  if (typeof root._bokeh_onload_callbacks === \"undefined\" || force === true) {\n",
       "    root._bokeh_onload_callbacks = [];\n",
       "    root._bokeh_is_loading = undefined;\n",
       "  }\n",
       "\n",
       "  var JS_MIME_TYPE = 'application/javascript';\n",
       "  var HTML_MIME_TYPE = 'text/html';\n",
       "  var EXEC_MIME_TYPE = 'application/vnd.bokehjs_exec.v0+json';\n",
       "  var CLASS_NAME = 'output_bokeh rendered_html';\n",
       "\n",
       "  /**\n",
       "   * Render data to the DOM node\n",
       "   */\n",
       "  function render(props, node) {\n",
       "    var script = document.createElement(\"script\");\n",
       "    node.appendChild(script);\n",
       "  }\n",
       "\n",
       "  /**\n",
       "   * Handle when an output is cleared or removed\n",
       "   */\n",
       "  function handleClearOutput(event, handle) {\n",
       "    var cell = handle.cell;\n",
       "\n",
       "    var id = cell.output_area._bokeh_element_id;\n",
       "    var server_id = cell.output_area._bokeh_server_id;\n",
       "    // Clean up Bokeh references\n",
       "    if (id != null && id in Bokeh.index) {\n",
       "      Bokeh.index[id].model.document.clear();\n",
       "      delete Bokeh.index[id];\n",
       "    }\n",
       "\n",
       "    if (server_id !== undefined) {\n",
       "      // Clean up Bokeh references\n",
       "      var cmd = \"from bokeh.io.state import curstate; print(curstate().uuid_to_server['\" + server_id + \"'].get_sessions()[0].document.roots[0]._id)\";\n",
       "      cell.notebook.kernel.execute(cmd, {\n",
       "        iopub: {\n",
       "          output: function(msg) {\n",
       "            var id = msg.content.text.trim();\n",
       "            if (id in Bokeh.index) {\n",
       "              Bokeh.index[id].model.document.clear();\n",
       "              delete Bokeh.index[id];\n",
       "            }\n",
       "          }\n",
       "        }\n",
       "      });\n",
       "      // Destroy server and session\n",
       "      var cmd = \"import bokeh.io.notebook as ion; ion.destroy_server('\" + server_id + \"')\";\n",
       "      cell.notebook.kernel.execute(cmd);\n",
       "    }\n",
       "  }\n",
       "\n",
       "  /**\n",
       "   * Handle when a new output is added\n",
       "   */\n",
       "  function handleAddOutput(event, handle) {\n",
       "    var output_area = handle.output_area;\n",
       "    var output = handle.output;\n",
       "\n",
       "    // limit handleAddOutput to display_data with EXEC_MIME_TYPE content only\n",
       "    if ((output.output_type != \"display_data\") || (!output.data.hasOwnProperty(EXEC_MIME_TYPE))) {\n",
       "      return\n",
       "    }\n",
       "\n",
       "    var toinsert = output_area.element.find(\".\" + CLASS_NAME.split(' ')[0]);\n",
       "\n",
       "    if (output.metadata[EXEC_MIME_TYPE][\"id\"] !== undefined) {\n",
       "      toinsert[toinsert.length - 1].firstChild.textContent = output.data[JS_MIME_TYPE];\n",
       "      // store reference to embed id on output_area\n",
       "      output_area._bokeh_element_id = output.metadata[EXEC_MIME_TYPE][\"id\"];\n",
       "    }\n",
       "    if (output.metadata[EXEC_MIME_TYPE][\"server_id\"] !== undefined) {\n",
       "      var bk_div = document.createElement(\"div\");\n",
       "      bk_div.innerHTML = output.data[HTML_MIME_TYPE];\n",
       "      var script_attrs = bk_div.children[0].attributes;\n",
       "      for (var i = 0; i < script_attrs.length; i++) {\n",
       "        toinsert[toinsert.length - 1].firstChild.setAttribute(script_attrs[i].name, script_attrs[i].value);\n",
       "        toinsert[toinsert.length - 1].firstChild.textContent = bk_div.children[0].textContent\n",
       "      }\n",
       "      // store reference to server id on output_area\n",
       "      output_area._bokeh_server_id = output.metadata[EXEC_MIME_TYPE][\"server_id\"];\n",
       "    }\n",
       "  }\n",
       "\n",
       "  function register_renderer(events, OutputArea) {\n",
       "\n",
       "    function append_mime(data, metadata, element) {\n",
       "      // create a DOM node to render to\n",
       "      var toinsert = this.create_output_subarea(\n",
       "        metadata,\n",
       "        CLASS_NAME,\n",
       "        EXEC_MIME_TYPE\n",
       "      );\n",
       "      this.keyboard_manager.register_events(toinsert);\n",
       "      // Render to node\n",
       "      var props = {data: data, metadata: metadata[EXEC_MIME_TYPE]};\n",
       "      render(props, toinsert[toinsert.length - 1]);\n",
       "      element.append(toinsert);\n",
       "      return toinsert\n",
       "    }\n",
       "\n",
       "    /* Handle when an output is cleared or removed */\n",
       "    events.on('clear_output.CodeCell', handleClearOutput);\n",
       "    events.on('delete.Cell', handleClearOutput);\n",
       "\n",
       "    /* Handle when a new output is added */\n",
       "    events.on('output_added.OutputArea', handleAddOutput);\n",
       "\n",
       "    /**\n",
       "     * Register the mime type and append_mime function with output_area\n",
       "     */\n",
       "    OutputArea.prototype.register_mime_type(EXEC_MIME_TYPE, append_mime, {\n",
       "      /* Is output safe? */\n",
       "      safe: true,\n",
       "      /* Index of renderer in `output_area.display_order` */\n",
       "      index: 0\n",
       "    });\n",
       "  }\n",
       "\n",
       "  // register the mime type if in Jupyter Notebook environment and previously unregistered\n",
       "  if (root.Jupyter !== undefined) {\n",
       "    var events = require('base/js/events');\n",
       "    var OutputArea = require('notebook/js/outputarea').OutputArea;\n",
       "\n",
       "    if (OutputArea.prototype.mime_types().indexOf(EXEC_MIME_TYPE) == -1) {\n",
       "      register_renderer(events, OutputArea);\n",
       "    }\n",
       "  }\n",
       "\n",
       "  \n",
       "  if (typeof (root._bokeh_timeout) === \"undefined\" || force === true) {\n",
       "    root._bokeh_timeout = Date.now() + 5000;\n",
       "    root._bokeh_failed_load = false;\n",
       "  }\n",
       "\n",
       "  var NB_LOAD_WARNING = {'data': {'text/html':\n",
       "     \"<div style='background-color: #fdd'>\\n\"+\n",
       "     \"<p>\\n\"+\n",
       "     \"BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \\n\"+\n",
       "     \"may be due to a slow or bad network connection. Possible fixes:\\n\"+\n",
       "     \"</p>\\n\"+\n",
       "     \"<ul>\\n\"+\n",
       "     \"<li>re-rerun `output_notebook()` to attempt to load from CDN again, or</li>\\n\"+\n",
       "     \"<li>use INLINE resources instead, as so:</li>\\n\"+\n",
       "     \"</ul>\\n\"+\n",
       "     \"<code>\\n\"+\n",
       "     \"from bokeh.resources import INLINE\\n\"+\n",
       "     \"output_notebook(resources=INLINE)\\n\"+\n",
       "     \"</code>\\n\"+\n",
       "     \"</div>\"}};\n",
       "\n",
       "  function display_loaded() {\n",
       "    var el = document.getElementById(\"2336\");\n",
       "    if (el != null) {\n",
       "      el.textContent = \"BokehJS is loading...\";\n",
       "    }\n",
       "    if (root.Bokeh !== undefined) {\n",
       "      if (el != null) {\n",
       "        el.textContent = \"BokehJS \" + root.Bokeh.version + \" successfully loaded.\";\n",
       "      }\n",
       "    } else if (Date.now() < root._bokeh_timeout) {\n",
       "      setTimeout(display_loaded, 100)\n",
       "    }\n",
       "  }\n",
       "\n",
       "\n",
       "  function run_callbacks() {\n",
       "    try {\n",
       "      root._bokeh_onload_callbacks.forEach(function(callback) {\n",
       "        if (callback != null)\n",
       "          callback();\n",
       "      });\n",
       "    } finally {\n",
       "      delete root._bokeh_onload_callbacks\n",
       "    }\n",
       "    console.debug(\"Bokeh: all callbacks have finished\");\n",
       "  }\n",
       "\n",
       "  function load_libs(css_urls, js_urls, callback) {\n",
       "    if (css_urls == null) css_urls = [];\n",
       "    if (js_urls == null) js_urls = [];\n",
       "\n",
       "    root._bokeh_onload_callbacks.push(callback);\n",
       "    if (root._bokeh_is_loading > 0) {\n",
       "      console.debug(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n",
       "      return null;\n",
       "    }\n",
       "    if (js_urls == null || js_urls.length === 0) {\n",
       "      run_callbacks();\n",
       "      return null;\n",
       "    }\n",
       "    console.debug(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n",
       "    root._bokeh_is_loading = css_urls.length + js_urls.length;\n",
       "\n",
       "    function on_load() {\n",
       "      root._bokeh_is_loading--;\n",
       "      if (root._bokeh_is_loading === 0) {\n",
       "        console.debug(\"Bokeh: all BokehJS libraries/stylesheets loaded\");\n",
       "        run_callbacks()\n",
       "      }\n",
       "    }\n",
       "\n",
       "    function on_error() {\n",
       "      console.error(\"failed to load \" + url);\n",
       "    }\n",
       "\n",
       "    for (var i = 0; i < css_urls.length; i++) {\n",
       "      var url = css_urls[i];\n",
       "      const element = document.createElement(\"link\");\n",
       "      element.onload = on_load;\n",
       "      element.onerror = on_error;\n",
       "      element.rel = \"stylesheet\";\n",
       "      element.type = \"text/css\";\n",
       "      element.href = url;\n",
       "      console.debug(\"Bokeh: injecting link tag for BokehJS stylesheet: \", url);\n",
       "      document.body.appendChild(element);\n",
       "    }\n",
       "\n",
       "    for (var i = 0; i < js_urls.length; i++) {\n",
       "      var url = js_urls[i];\n",
       "      var element = document.createElement('script');\n",
       "      element.onload = on_load;\n",
       "      element.onerror = on_error;\n",
       "      element.async = false;\n",
       "      element.src = url;\n",
       "      \n",
       "      console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n",
       "      document.head.appendChild(element);\n",
       "    }\n",
       "  };var element = document.getElementById(\"2336\");\n",
       "  if (element == null) {\n",
       "    console.error(\"Bokeh: ERROR: autoload.js configured with elementid '2336' but no matching script tag was found. \")\n",
       "    return false;\n",
       "  }\n",
       "\n",
       "  function inject_raw_css(css) {\n",
       "    const element = document.createElement(\"style\");\n",
       "    element.appendChild(document.createTextNode(css));\n",
       "    document.body.appendChild(element);\n",
       "  }\n",
       "\n",
       "  \n",
       "  var js_urls = [\"https://cdn.bokeh.org/bokeh/release/bokeh-2.0.0.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.0.0.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.0.0.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.0.0.min.js\"];\n",
       "  var css_urls = [];\n",
       "  \n",
       "\n",
       "  var inline_js = [\n",
       "    function(Bokeh) {\n",
       "      Bokeh.set_log_level(\"info\");\n",
       "    },\n",
       "    function(Bokeh) {\n",
       "    \n",
       "    \n",
       "    }\n",
       "  ];\n",
       "\n",
       "  function run_inline_js() {\n",
       "    \n",
       "    if (root.Bokeh !== undefined || force === true) {\n",
       "      \n",
       "    for (var i = 0; i < inline_js.length; i++) {\n",
       "      inline_js[i].call(root, root.Bokeh);\n",
       "    }\n",
       "    if (force === true) {\n",
       "        display_loaded();\n",
       "      }} else if (Date.now() < root._bokeh_timeout) {\n",
       "      setTimeout(run_inline_js, 100);\n",
       "    } else if (!root._bokeh_failed_load) {\n",
       "      console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n",
       "      root._bokeh_failed_load = true;\n",
       "    } else if (force !== true) {\n",
       "      var cell = $(document.getElementById(\"2336\")).parents('.cell').data().cell;\n",
       "      cell.output_area.append_execute_result(NB_LOAD_WARNING)\n",
       "    }\n",
       "\n",
       "  }\n",
       "\n",
       "  if (root._bokeh_is_loading === 0) {\n",
       "    console.debug(\"Bokeh: BokehJS loaded, going straight to plotting\");\n",
       "    run_inline_js();\n",
       "  } else {\n",
       "    load_libs(css_urls, js_urls, function() {\n",
       "      console.debug(\"Bokeh: BokehJS plotting callback run at\", now());\n",
       "      run_inline_js();\n",
       "    });\n",
       "  }\n",
       "}(window));"
      ],
      "application/vnd.bokehjs_load.v0+json": "\n(function(root) {\n  function now() {\n    return new Date();\n  }\n\n  var force = true;\n\n  if (typeof root._bokeh_onload_callbacks === \"undefined\" || force === true) {\n    root._bokeh_onload_callbacks = [];\n    root._bokeh_is_loading = undefined;\n  }\n\n  \n\n  \n  if (typeof (root._bokeh_timeout) === \"undefined\" || force === true) {\n    root._bokeh_timeout = Date.now() + 5000;\n    root._bokeh_failed_load = false;\n  }\n\n  var NB_LOAD_WARNING = {'data': {'text/html':\n     \"<div style='background-color: #fdd'>\\n\"+\n     \"<p>\\n\"+\n     \"BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \\n\"+\n     \"may be due to a slow or bad network connection. Possible fixes:\\n\"+\n     \"</p>\\n\"+\n     \"<ul>\\n\"+\n     \"<li>re-rerun `output_notebook()` to attempt to load from CDN again, or</li>\\n\"+\n     \"<li>use INLINE resources instead, as so:</li>\\n\"+\n     \"</ul>\\n\"+\n     \"<code>\\n\"+\n     \"from bokeh.resources import INLINE\\n\"+\n     \"output_notebook(resources=INLINE)\\n\"+\n     \"</code>\\n\"+\n     \"</div>\"}};\n\n  function display_loaded() {\n    var el = document.getElementById(\"2336\");\n    if (el != null) {\n      el.textContent = \"BokehJS is loading...\";\n    }\n    if (root.Bokeh !== undefined) {\n      if (el != null) {\n        el.textContent = \"BokehJS \" + root.Bokeh.version + \" successfully loaded.\";\n      }\n    } else if (Date.now() < root._bokeh_timeout) {\n      setTimeout(display_loaded, 100)\n    }\n  }\n\n\n  function run_callbacks() {\n    try {\n      root._bokeh_onload_callbacks.forEach(function(callback) {\n        if (callback != null)\n          callback();\n      });\n    } finally {\n      delete root._bokeh_onload_callbacks\n    }\n    console.debug(\"Bokeh: all callbacks have finished\");\n  }\n\n  function load_libs(css_urls, js_urls, callback) {\n    if (css_urls == null) css_urls = [];\n    if (js_urls == null) js_urls = [];\n\n    root._bokeh_onload_callbacks.push(callback);\n    if (root._bokeh_is_loading > 0) {\n      console.debug(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n      return null;\n    }\n    if (js_urls == null || js_urls.length === 0) {\n      run_callbacks();\n      return null;\n    }\n    console.debug(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n    root._bokeh_is_loading = css_urls.length + js_urls.length;\n\n    function on_load() {\n      root._bokeh_is_loading--;\n      if (root._bokeh_is_loading === 0) {\n        console.debug(\"Bokeh: all BokehJS libraries/stylesheets loaded\");\n        run_callbacks()\n      }\n    }\n\n    function on_error() {\n      console.error(\"failed to load \" + url);\n    }\n\n    for (var i = 0; i < css_urls.length; i++) {\n      var url = css_urls[i];\n      const element = document.createElement(\"link\");\n      element.onload = on_load;\n      element.onerror = on_error;\n      element.rel = \"stylesheet\";\n      element.type = \"text/css\";\n      element.href = url;\n      console.debug(\"Bokeh: injecting link tag for BokehJS stylesheet: \", url);\n      document.body.appendChild(element);\n    }\n\n    for (var i = 0; i < js_urls.length; i++) {\n      var url = js_urls[i];\n      var element = document.createElement('script');\n      element.onload = on_load;\n      element.onerror = on_error;\n      element.async = false;\n      element.src = url;\n      \n      console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n      document.head.appendChild(element);\n    }\n  };var element = document.getElementById(\"2336\");\n  if (element == null) {\n    console.error(\"Bokeh: ERROR: autoload.js configured with elementid '2336' but no matching script tag was found. \")\n    return false;\n  }\n\n  function inject_raw_css(css) {\n    const element = document.createElement(\"style\");\n    element.appendChild(document.createTextNode(css));\n    document.body.appendChild(element);\n  }\n\n  \n  var js_urls = [\"https://cdn.bokeh.org/bokeh/release/bokeh-2.0.0.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.0.0.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.0.0.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.0.0.min.js\"];\n  var css_urls = [];\n  \n\n  var inline_js = [\n    function(Bokeh) {\n      Bokeh.set_log_level(\"info\");\n    },\n    function(Bokeh) {\n    \n    \n    }\n  ];\n\n  function run_inline_js() {\n    \n    if (root.Bokeh !== undefined || force === true) {\n      \n    for (var i = 0; i < inline_js.length; i++) {\n      inline_js[i].call(root, root.Bokeh);\n    }\n    if (force === true) {\n        display_loaded();\n      }} else if (Date.now() < root._bokeh_timeout) {\n      setTimeout(run_inline_js, 100);\n    } else if (!root._bokeh_failed_load) {\n      console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n      root._bokeh_failed_load = true;\n    } else if (force !== true) {\n      var cell = $(document.getElementById(\"2336\")).parents('.cell').data().cell;\n      cell.output_area.append_execute_result(NB_LOAD_WARNING)\n    }\n\n  }\n\n  if (root._bokeh_is_loading === 0) {\n    console.debug(\"Bokeh: BokehJS loaded, going straight to plotting\");\n    run_inline_js();\n  } else {\n    load_libs(css_urls, js_urls, function() {\n      console.debug(\"Bokeh: BokehJS plotting callback run at\", now());\n      run_inline_js();\n    });\n  }\n}(window));"
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "import yaml\n",
    "from bokeh.layouts import column\n",
    "from bokeh.models import ColumnDataSource, Slider,HoverTool\n",
    "from bokeh.plotting import figure\n",
    "from bokeh.themes import Theme\n",
    "from bokeh.io import show, output_notebook\n",
    "from bokeh.models.widgets import Button, RadioButtonGroup, Select, Slider\n",
    "from bokeh.sampledata.sea_surface_temperature import sea_surface_temperature\n",
    "from bokeh.io import output_notebook, show, output_file,save\n",
    "from bokeh.plotting import figure\n",
    "from bokeh.models import GeoJSONDataSource, LinearColorMapper, ColorBar,CategoricalColorMapper\n",
    "from bokeh.palettes import brewer,Category10\n",
    "from bokeh.resources import CDN\n",
    "from bokeh.embed import file_html\n",
    "\n",
    "# output notebook to allow inline jupyter interaction\n",
    "output_notebook()\n",
    "\n",
    "def bkapp(doc):\n",
    "    # default state when the component is loaded for the first time\n",
    "    state = {'month':'yea','agg_level':'borough','feature':'fat'}\n",
    "    geosource = GeoJSONDataSource(geojson = json_data(**state))\n",
    "    # Hover that will show the current feature value for the hovered area + its name\n",
    "    hover = HoverTool(tooltips = [ ('Area name','@name'),(state['feature'], '@'+state['feature'])])\n",
    "    # Create figure for the plot\n",
    "    plot = figure(title = \"{feature} consumption for {agg_level} during the prediod {month}\".format(**state), \n",
    "            plot_height = 800 , plot_width = 950, toolbar_location = None,\n",
    "            tools = [hover])\n",
    "    # Remover axis for nicer layout\n",
    "    plot.xgrid.grid_line_color = None\n",
    "    plot.ygrid.grid_line_color = None\n",
    "    plot.axis.visible = False\n",
    "    # Add the color bar\n",
    "    color_bar = create_color_bar(state,plot,geosource)    \n",
    "    #create graphical components for the user to interact\n",
    "    btn_period     = RadioButtonGroup(labels=periods, active=0)       # selection aggregation level\n",
    "    btn_agg_level  = RadioButtonGroup(labels=agg_levels, active=0)    # selection aggregation level\n",
    "    select_feature = Select(title=\"Typical product feature:\", \n",
    "                            value=feature_names[0], options=feature_names)\n",
    "    #add event handler\n",
    "    local_update_plot = lambda st,v: update_plot(st, v,state,plot,geosource,color_bar)\n",
    "    btn_period.on_click(              lambda new         : local_update_plot('month'    ,periods[new]))\n",
    "    btn_agg_level.on_click(           lambda new         : local_update_plot('agg_level',agg_levels[new]))\n",
    "    select_feature.on_change('value', lambda attr,old,new: local_update_plot('feature'  ,new))\n",
    "    #add components to root document\n",
    "    doc.add_root(column(btn_period,btn_agg_level, plot,select_feature))\n",
    "    #output_file('images/vizu.html')\n",
    "    #save(doc,filename='images/vizu.html')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 24,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.bokehjs_exec.v0+json": "",
      "text/html": [
       "\n",
       "<script id=\"2337\">\n",
       "  var xhr = new XMLHttpRequest()\n",
       "  xhr.responseType = 'blob';\n",
       "  xhr.open('GET', \"http://localhost:61641/autoload.js?bokeh-autoload-element=2337&bokeh-absolute-url=http://localhost:61641&resources=none\", true);\n",
       "  \n",
       "  xhr.onload = function (event) {\n",
       "    var script = document.createElement('script'),\n",
       "    src = URL.createObjectURL(event.target.response);\n",
       "    script.src = src;\n",
       "    document.body.appendChild(script);\n",
       "  };\n",
       "xhr.send();\n",
       "</script>"
      ]
     },
     "metadata": {
      "application/vnd.bokehjs_exec.v0+json": {
       "server_id": "e14dd8333c364308a5a48712b1a67c2f"
      }
     },
     "output_type": "display_data"
    }
   ],
   "source": [
    "# show the viz in jupyter but otherwise : notebook_url=\"http://localhost:8888\"\n",
    "show(bkapp) "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Cluster visualisation\n",
    "\n",
    "For this visualisation, we follow a similar approach. The main difference is the fact that we do not need to use a color bar. Furthermore, we only computed the clusters for the yearly data so, the ```period``` button can also be removed."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<style scoped>\n",
       "    .dataframe tbody tr th:only-of-type {\n",
       "        vertical-align: middle;\n",
       "    }\n",
       "\n",
       "    .dataframe tbody tr th {\n",
       "        vertical-align: top;\n",
       "    }\n",
       "\n",
       "    .dataframe thead th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>area_id</th>\n",
       "      <th>month</th>\n",
       "      <th>agg_level</th>\n",
       "      <th>cluster_2</th>\n",
       "      <th>cluster_3</th>\n",
       "      <th>cluster_4</th>\n",
       "      <th>cluster_5</th>\n",
       "      <th>cluster_6</th>\n",
       "      <th>cluster_7</th>\n",
       "      <th>cluster_8</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>E09000001</td>\n",
       "      <td>yea</td>\n",
       "      <td>borough</td>\n",
       "      <td>1</td>\n",
       "      <td>0</td>\n",
       "      <td>3</td>\n",
       "      <td>1</td>\n",
       "      <td>5</td>\n",
       "      <td>5</td>\n",
       "      <td>5</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>E09000002</td>\n",
       "      <td>yea</td>\n",
       "      <td>borough</td>\n",
       "      <td>0</td>\n",
       "      <td>1</td>\n",
       "      <td>1</td>\n",
       "      <td>2</td>\n",
       "      <td>4</td>\n",
       "      <td>1</td>\n",
       "      <td>1</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>E09000003</td>\n",
       "      <td>yea</td>\n",
       "      <td>borough</td>\n",
       "      <td>1</td>\n",
       "      <td>0</td>\n",
       "      <td>3</td>\n",
       "      <td>3</td>\n",
       "      <td>2</td>\n",
       "      <td>3</td>\n",
       "      <td>3</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3</th>\n",
       "      <td>E09000004</td>\n",
       "      <td>yea</td>\n",
       "      <td>borough</td>\n",
       "      <td>0</td>\n",
       "      <td>1</td>\n",
       "      <td>1</td>\n",
       "      <td>2</td>\n",
       "      <td>4</td>\n",
       "      <td>1</td>\n",
       "      <td>1</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>4</th>\n",
       "      <td>E09000005</td>\n",
       "      <td>yea</td>\n",
       "      <td>borough</td>\n",
       "      <td>0</td>\n",
       "      <td>2</td>\n",
       "      <td>2</td>\n",
       "      <td>0</td>\n",
       "      <td>3</td>\n",
       "      <td>2</td>\n",
       "      <td>2</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "</div>"
      ],
      "text/plain": [
       "     area_id month agg_level  cluster_2  cluster_3  cluster_4  cluster_5  \\\n",
       "0  E09000001   yea   borough          1          0          3          1   \n",
       "1  E09000002   yea   borough          0          1          1          2   \n",
       "2  E09000003   yea   borough          1          0          3          3   \n",
       "3  E09000004   yea   borough          0          1          1          2   \n",
       "4  E09000005   yea   borough          0          2          2          0   \n",
       "\n",
       "   cluster_6  cluster_7  cluster_8  \n",
       "0          5          5          5  \n",
       "1          4          1          1  \n",
       "2          2          3          3  \n",
       "3          4          1          1  \n",
       "4          3          2          2  "
      ]
     },
     "execution_count": 9,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "cluster = pd.read_csv('data/tesco_cluster.csv')\n",
    "cluster = cluster.query(\"month == 'yea'\")\n",
    "cluster = cluster[['area_id','month','agg_level']+[c for c in cluster.columns if c.startswith(\"cluster\")]]\n",
    "cluster.head()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [],
   "source": [
    "cluster_dict,_,c_agg_levels,c_feature_names = create_datasource(cluster)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {},
   "outputs": [],
   "source": [
    "from bokeh.palettes import Dark2,Spectral,Set2,Colorblind\n",
    "def create_cat_color_mapper(state:dict,nan_color='#d9d9d9'):\n",
    "    \"\"\"This function create the categorical color mapper\"\"\"\n",
    "    feature  = get_feature(state,tesco_dict=cluster_dict) # Select feature\n",
    "    n_colors = max(feature.nunique(),3) if feature is not None else 1\n",
    "    palette  = Set2[max(n_colors,3)][:n_colors][::-1]\n",
    "    color_mapper=LinearColorMapper(palette=palette)\n",
    "    return color_mapper"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 17,
   "metadata": {},
   "outputs": [],
   "source": [
    "def update_cat_plot(state_field:str, new_val:str,state:dict,plot,geosource):\n",
    "    \"\"\"\n",
    "    Handles interactivity in the visualization\n",
    "    @param state_field : (str) element of the state that needs to be updated\n",
    "    @param new_val     : (str) new value of state_field element \n",
    "    \"\"\"\n",
    "    state[state_field] = new_val  # state update\n",
    "    # update title\n",
    "    plot.title.text = \"K-Means clustering (k = {0}) for {1}\".format(state['feature'][-1],state['agg_level'])\n",
    "    if state_field == 'feature':                    # update color mapper\n",
    "        color_mapper = create_cat_color_mapper(state)   # create new mapper\n",
    "        plot.patches('xs','ys',                     # update patches\n",
    "            source = geosource,\n",
    "            fill_color = {'field' :state['feature'], 'transform' : color_mapper},\n",
    "            line_color = 'black', line_width = 0.25, \n",
    "            fill_alpha = 1,\n",
    "                     #legend_label=state['feature']\n",
    "                    )\n",
    "    new_data = json_data(**state,data=cluster_dict) # get the new data and convert to JSON\n",
    "    geosource.geojson = new_data                    # set new data to trigger recoloring event\n",
    "    # new hover for the new feature \n",
    "    hover = HoverTool(tooltips = [('Area name','@name'),(state['feature'], '@'+state['feature'])])\n",
    "    # add hover tools to plot\n",
    "    plot.tools = [hover]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "    <div class=\"bk-root\">\n",
       "        <a href=\"https://bokeh.org\" target=\"_blank\" class=\"bk-logo bk-logo-small bk-logo-notebook\"></a>\n",
       "        <span id=\"1138\">Loading BokehJS ...</span>\n",
       "    </div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "\n",
       "(function(root) {\n",
       "  function now() {\n",
       "    return new Date();\n",
       "  }\n",
       "\n",
       "  var force = true;\n",
       "\n",
       "  if (typeof root._bokeh_onload_callbacks === \"undefined\" || force === true) {\n",
       "    root._bokeh_onload_callbacks = [];\n",
       "    root._bokeh_is_loading = undefined;\n",
       "  }\n",
       "\n",
       "  var JS_MIME_TYPE = 'application/javascript';\n",
       "  var HTML_MIME_TYPE = 'text/html';\n",
       "  var EXEC_MIME_TYPE = 'application/vnd.bokehjs_exec.v0+json';\n",
       "  var CLASS_NAME = 'output_bokeh rendered_html';\n",
       "\n",
       "  /**\n",
       "   * Render data to the DOM node\n",
       "   */\n",
       "  function render(props, node) {\n",
       "    var script = document.createElement(\"script\");\n",
       "    node.appendChild(script);\n",
       "  }\n",
       "\n",
       "  /**\n",
       "   * Handle when an output is cleared or removed\n",
       "   */\n",
       "  function handleClearOutput(event, handle) {\n",
       "    var cell = handle.cell;\n",
       "\n",
       "    var id = cell.output_area._bokeh_element_id;\n",
       "    var server_id = cell.output_area._bokeh_server_id;\n",
       "    // Clean up Bokeh references\n",
       "    if (id != null && id in Bokeh.index) {\n",
       "      Bokeh.index[id].model.document.clear();\n",
       "      delete Bokeh.index[id];\n",
       "    }\n",
       "\n",
       "    if (server_id !== undefined) {\n",
       "      // Clean up Bokeh references\n",
       "      var cmd = \"from bokeh.io.state import curstate; print(curstate().uuid_to_server['\" + server_id + \"'].get_sessions()[0].document.roots[0]._id)\";\n",
       "      cell.notebook.kernel.execute(cmd, {\n",
       "        iopub: {\n",
       "          output: function(msg) {\n",
       "            var id = msg.content.text.trim();\n",
       "            if (id in Bokeh.index) {\n",
       "              Bokeh.index[id].model.document.clear();\n",
       "              delete Bokeh.index[id];\n",
       "            }\n",
       "          }\n",
       "        }\n",
       "      });\n",
       "      // Destroy server and session\n",
       "      var cmd = \"import bokeh.io.notebook as ion; ion.destroy_server('\" + server_id + \"')\";\n",
       "      cell.notebook.kernel.execute(cmd);\n",
       "    }\n",
       "  }\n",
       "\n",
       "  /**\n",
       "   * Handle when a new output is added\n",
       "   */\n",
       "  function handleAddOutput(event, handle) {\n",
       "    var output_area = handle.output_area;\n",
       "    var output = handle.output;\n",
       "\n",
       "    // limit handleAddOutput to display_data with EXEC_MIME_TYPE content only\n",
       "    if ((output.output_type != \"display_data\") || (!output.data.hasOwnProperty(EXEC_MIME_TYPE))) {\n",
       "      return\n",
       "    }\n",
       "\n",
       "    var toinsert = output_area.element.find(\".\" + CLASS_NAME.split(' ')[0]);\n",
       "\n",
       "    if (output.metadata[EXEC_MIME_TYPE][\"id\"] !== undefined) {\n",
       "      toinsert[toinsert.length - 1].firstChild.textContent = output.data[JS_MIME_TYPE];\n",
       "      // store reference to embed id on output_area\n",
       "      output_area._bokeh_element_id = output.metadata[EXEC_MIME_TYPE][\"id\"];\n",
       "    }\n",
       "    if (output.metadata[EXEC_MIME_TYPE][\"server_id\"] !== undefined) {\n",
       "      var bk_div = document.createElement(\"div\");\n",
       "      bk_div.innerHTML = output.data[HTML_MIME_TYPE];\n",
       "      var script_attrs = bk_div.children[0].attributes;\n",
       "      for (var i = 0; i < script_attrs.length; i++) {\n",
       "        toinsert[toinsert.length - 1].firstChild.setAttribute(script_attrs[i].name, script_attrs[i].value);\n",
       "        toinsert[toinsert.length - 1].firstChild.textContent = bk_div.children[0].textContent\n",
       "      }\n",
       "      // store reference to server id on output_area\n",
       "      output_area._bokeh_server_id = output.metadata[EXEC_MIME_TYPE][\"server_id\"];\n",
       "    }\n",
       "  }\n",
       "\n",
       "  function register_renderer(events, OutputArea) {\n",
       "\n",
       "    function append_mime(data, metadata, element) {\n",
       "      // create a DOM node to render to\n",
       "      var toinsert = this.create_output_subarea(\n",
       "        metadata,\n",
       "        CLASS_NAME,\n",
       "        EXEC_MIME_TYPE\n",
       "      );\n",
       "      this.keyboard_manager.register_events(toinsert);\n",
       "      // Render to node\n",
       "      var props = {data: data, metadata: metadata[EXEC_MIME_TYPE]};\n",
       "      render(props, toinsert[toinsert.length - 1]);\n",
       "      element.append(toinsert);\n",
       "      return toinsert\n",
       "    }\n",
       "\n",
       "    /* Handle when an output is cleared or removed */\n",
       "    events.on('clear_output.CodeCell', handleClearOutput);\n",
       "    events.on('delete.Cell', handleClearOutput);\n",
       "\n",
       "    /* Handle when a new output is added */\n",
       "    events.on('output_added.OutputArea', handleAddOutput);\n",
       "\n",
       "    /**\n",
       "     * Register the mime type and append_mime function with output_area\n",
       "     */\n",
       "    OutputArea.prototype.register_mime_type(EXEC_MIME_TYPE, append_mime, {\n",
       "      /* Is output safe? */\n",
       "      safe: true,\n",
       "      /* Index of renderer in `output_area.display_order` */\n",
       "      index: 0\n",
       "    });\n",
       "  }\n",
       "\n",
       "  // register the mime type if in Jupyter Notebook environment and previously unregistered\n",
       "  if (root.Jupyter !== undefined) {\n",
       "    var events = require('base/js/events');\n",
       "    var OutputArea = require('notebook/js/outputarea').OutputArea;\n",
       "\n",
       "    if (OutputArea.prototype.mime_types().indexOf(EXEC_MIME_TYPE) == -1) {\n",
       "      register_renderer(events, OutputArea);\n",
       "    }\n",
       "  }\n",
       "\n",
       "  \n",
       "  if (typeof (root._bokeh_timeout) === \"undefined\" || force === true) {\n",
       "    root._bokeh_timeout = Date.now() + 5000;\n",
       "    root._bokeh_failed_load = false;\n",
       "  }\n",
       "\n",
       "  var NB_LOAD_WARNING = {'data': {'text/html':\n",
       "     \"<div style='background-color: #fdd'>\\n\"+\n",
       "     \"<p>\\n\"+\n",
       "     \"BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \\n\"+\n",
       "     \"may be due to a slow or bad network connection. Possible fixes:\\n\"+\n",
       "     \"</p>\\n\"+\n",
       "     \"<ul>\\n\"+\n",
       "     \"<li>re-rerun `output_notebook()` to attempt to load from CDN again, or</li>\\n\"+\n",
       "     \"<li>use INLINE resources instead, as so:</li>\\n\"+\n",
       "     \"</ul>\\n\"+\n",
       "     \"<code>\\n\"+\n",
       "     \"from bokeh.resources import INLINE\\n\"+\n",
       "     \"output_notebook(resources=INLINE)\\n\"+\n",
       "     \"</code>\\n\"+\n",
       "     \"</div>\"}};\n",
       "\n",
       "  function display_loaded() {\n",
       "    var el = document.getElementById(\"1138\");\n",
       "    if (el != null) {\n",
       "      el.textContent = \"BokehJS is loading...\";\n",
       "    }\n",
       "    if (root.Bokeh !== undefined) {\n",
       "      if (el != null) {\n",
       "        el.textContent = \"BokehJS \" + root.Bokeh.version + \" successfully loaded.\";\n",
       "      }\n",
       "    } else if (Date.now() < root._bokeh_timeout) {\n",
       "      setTimeout(display_loaded, 100)\n",
       "    }\n",
       "  }\n",
       "\n",
       "\n",
       "  function run_callbacks() {\n",
       "    try {\n",
       "      root._bokeh_onload_callbacks.forEach(function(callback) {\n",
       "        if (callback != null)\n",
       "          callback();\n",
       "      });\n",
       "    } finally {\n",
       "      delete root._bokeh_onload_callbacks\n",
       "    }\n",
       "    console.debug(\"Bokeh: all callbacks have finished\");\n",
       "  }\n",
       "\n",
       "  function load_libs(css_urls, js_urls, callback) {\n",
       "    if (css_urls == null) css_urls = [];\n",
       "    if (js_urls == null) js_urls = [];\n",
       "\n",
       "    root._bokeh_onload_callbacks.push(callback);\n",
       "    if (root._bokeh_is_loading > 0) {\n",
       "      console.debug(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n",
       "      return null;\n",
       "    }\n",
       "    if (js_urls == null || js_urls.length === 0) {\n",
       "      run_callbacks();\n",
       "      return null;\n",
       "    }\n",
       "    console.debug(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n",
       "    root._bokeh_is_loading = css_urls.length + js_urls.length;\n",
       "\n",
       "    function on_load() {\n",
       "      root._bokeh_is_loading--;\n",
       "      if (root._bokeh_is_loading === 0) {\n",
       "        console.debug(\"Bokeh: all BokehJS libraries/stylesheets loaded\");\n",
       "        run_callbacks()\n",
       "      }\n",
       "    }\n",
       "\n",
       "    function on_error() {\n",
       "      console.error(\"failed to load \" + url);\n",
       "    }\n",
       "\n",
       "    for (var i = 0; i < css_urls.length; i++) {\n",
       "      var url = css_urls[i];\n",
       "      const element = document.createElement(\"link\");\n",
       "      element.onload = on_load;\n",
       "      element.onerror = on_error;\n",
       "      element.rel = \"stylesheet\";\n",
       "      element.type = \"text/css\";\n",
       "      element.href = url;\n",
       "      console.debug(\"Bokeh: injecting link tag for BokehJS stylesheet: \", url);\n",
       "      document.body.appendChild(element);\n",
       "    }\n",
       "\n",
       "    for (var i = 0; i < js_urls.length; i++) {\n",
       "      var url = js_urls[i];\n",
       "      var element = document.createElement('script');\n",
       "      element.onload = on_load;\n",
       "      element.onerror = on_error;\n",
       "      element.async = false;\n",
       "      element.src = url;\n",
       "      \n",
       "      console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n",
       "      document.head.appendChild(element);\n",
       "    }\n",
       "  };var element = document.getElementById(\"1138\");\n",
       "  if (element == null) {\n",
       "    console.error(\"Bokeh: ERROR: autoload.js configured with elementid '1138' but no matching script tag was found. \")\n",
       "    return false;\n",
       "  }\n",
       "\n",
       "  function inject_raw_css(css) {\n",
       "    const element = document.createElement(\"style\");\n",
       "    element.appendChild(document.createTextNode(css));\n",
       "    document.body.appendChild(element);\n",
       "  }\n",
       "\n",
       "  \n",
       "  var js_urls = [\"https://cdn.bokeh.org/bokeh/release/bokeh-2.0.0.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.0.0.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.0.0.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.0.0.min.js\"];\n",
       "  var css_urls = [];\n",
       "  \n",
       "\n",
       "  var inline_js = [\n",
       "    function(Bokeh) {\n",
       "      Bokeh.set_log_level(\"info\");\n",
       "    },\n",
       "    function(Bokeh) {\n",
       "    \n",
       "    \n",
       "    }\n",
       "  ];\n",
       "\n",
       "  function run_inline_js() {\n",
       "    \n",
       "    if (root.Bokeh !== undefined || force === true) {\n",
       "      \n",
       "    for (var i = 0; i < inline_js.length; i++) {\n",
       "      inline_js[i].call(root, root.Bokeh);\n",
       "    }\n",
       "    if (force === true) {\n",
       "        display_loaded();\n",
       "      }} else if (Date.now() < root._bokeh_timeout) {\n",
       "      setTimeout(run_inline_js, 100);\n",
       "    } else if (!root._bokeh_failed_load) {\n",
       "      console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n",
       "      root._bokeh_failed_load = true;\n",
       "    } else if (force !== true) {\n",
       "      var cell = $(document.getElementById(\"1138\")).parents('.cell').data().cell;\n",
       "      cell.output_area.append_execute_result(NB_LOAD_WARNING)\n",
       "    }\n",
       "\n",
       "  }\n",
       "\n",
       "  if (root._bokeh_is_loading === 0) {\n",
       "    console.debug(\"Bokeh: BokehJS loaded, going straight to plotting\");\n",
       "    run_inline_js();\n",
       "  } else {\n",
       "    load_libs(css_urls, js_urls, function() {\n",
       "      console.debug(\"Bokeh: BokehJS plotting callback run at\", now());\n",
       "      run_inline_js();\n",
       "    });\n",
       "  }\n",
       "}(window));"
      ],
      "application/vnd.bokehjs_load.v0+json": "\n(function(root) {\n  function now() {\n    return new Date();\n  }\n\n  var force = true;\n\n  if (typeof root._bokeh_onload_callbacks === \"undefined\" || force === true) {\n    root._bokeh_onload_callbacks = [];\n    root._bokeh_is_loading = undefined;\n  }\n\n  \n\n  \n  if (typeof (root._bokeh_timeout) === \"undefined\" || force === true) {\n    root._bokeh_timeout = Date.now() + 5000;\n    root._bokeh_failed_load = false;\n  }\n\n  var NB_LOAD_WARNING = {'data': {'text/html':\n     \"<div style='background-color: #fdd'>\\n\"+\n     \"<p>\\n\"+\n     \"BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \\n\"+\n     \"may be due to a slow or bad network connection. Possible fixes:\\n\"+\n     \"</p>\\n\"+\n     \"<ul>\\n\"+\n     \"<li>re-rerun `output_notebook()` to attempt to load from CDN again, or</li>\\n\"+\n     \"<li>use INLINE resources instead, as so:</li>\\n\"+\n     \"</ul>\\n\"+\n     \"<code>\\n\"+\n     \"from bokeh.resources import INLINE\\n\"+\n     \"output_notebook(resources=INLINE)\\n\"+\n     \"</code>\\n\"+\n     \"</div>\"}};\n\n  function display_loaded() {\n    var el = document.getElementById(\"1138\");\n    if (el != null) {\n      el.textContent = \"BokehJS is loading...\";\n    }\n    if (root.Bokeh !== undefined) {\n      if (el != null) {\n        el.textContent = \"BokehJS \" + root.Bokeh.version + \" successfully loaded.\";\n      }\n    } else if (Date.now() < root._bokeh_timeout) {\n      setTimeout(display_loaded, 100)\n    }\n  }\n\n\n  function run_callbacks() {\n    try {\n      root._bokeh_onload_callbacks.forEach(function(callback) {\n        if (callback != null)\n          callback();\n      });\n    } finally {\n      delete root._bokeh_onload_callbacks\n    }\n    console.debug(\"Bokeh: all callbacks have finished\");\n  }\n\n  function load_libs(css_urls, js_urls, callback) {\n    if (css_urls == null) css_urls = [];\n    if (js_urls == null) js_urls = [];\n\n    root._bokeh_onload_callbacks.push(callback);\n    if (root._bokeh_is_loading > 0) {\n      console.debug(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n      return null;\n    }\n    if (js_urls == null || js_urls.length === 0) {\n      run_callbacks();\n      return null;\n    }\n    console.debug(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n    root._bokeh_is_loading = css_urls.length + js_urls.length;\n\n    function on_load() {\n      root._bokeh_is_loading--;\n      if (root._bokeh_is_loading === 0) {\n        console.debug(\"Bokeh: all BokehJS libraries/stylesheets loaded\");\n        run_callbacks()\n      }\n    }\n\n    function on_error() {\n      console.error(\"failed to load \" + url);\n    }\n\n    for (var i = 0; i < css_urls.length; i++) {\n      var url = css_urls[i];\n      const element = document.createElement(\"link\");\n      element.onload = on_load;\n      element.onerror = on_error;\n      element.rel = \"stylesheet\";\n      element.type = \"text/css\";\n      element.href = url;\n      console.debug(\"Bokeh: injecting link tag for BokehJS stylesheet: \", url);\n      document.body.appendChild(element);\n    }\n\n    for (var i = 0; i < js_urls.length; i++) {\n      var url = js_urls[i];\n      var element = document.createElement('script');\n      element.onload = on_load;\n      element.onerror = on_error;\n      element.async = false;\n      element.src = url;\n      \n      console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n      document.head.appendChild(element);\n    }\n  };var element = document.getElementById(\"1138\");\n  if (element == null) {\n    console.error(\"Bokeh: ERROR: autoload.js configured with elementid '1138' but no matching script tag was found. \")\n    return false;\n  }\n\n  function inject_raw_css(css) {\n    const element = document.createElement(\"style\");\n    element.appendChild(document.createTextNode(css));\n    document.body.appendChild(element);\n  }\n\n  \n  var js_urls = [\"https://cdn.bokeh.org/bokeh/release/bokeh-2.0.0.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.0.0.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.0.0.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.0.0.min.js\"];\n  var css_urls = [];\n  \n\n  var inline_js = [\n    function(Bokeh) {\n      Bokeh.set_log_level(\"info\");\n    },\n    function(Bokeh) {\n    \n    \n    }\n  ];\n\n  function run_inline_js() {\n    \n    if (root.Bokeh !== undefined || force === true) {\n      \n    for (var i = 0; i < inline_js.length; i++) {\n      inline_js[i].call(root, root.Bokeh);\n    }\n    if (force === true) {\n        display_loaded();\n      }} else if (Date.now() < root._bokeh_timeout) {\n      setTimeout(run_inline_js, 100);\n    } else if (!root._bokeh_failed_load) {\n      console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n      root._bokeh_failed_load = true;\n    } else if (force !== true) {\n      var cell = $(document.getElementById(\"1138\")).parents('.cell').data().cell;\n      cell.output_area.append_execute_result(NB_LOAD_WARNING)\n    }\n\n  }\n\n  if (root._bokeh_is_loading === 0) {\n    console.debug(\"Bokeh: BokehJS loaded, going straight to plotting\");\n    run_inline_js();\n  } else {\n    load_libs(css_urls, js_urls, function() {\n      console.debug(\"Bokeh: BokehJS plotting callback run at\", now());\n      run_inline_js();\n    });\n  }\n}(window));"
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# output notebook to allow inline jupyter interaction\n",
    "output_notebook()\n",
    "\n",
    "def cluster_bkapp(doc):\n",
    "    # default state when the component is loaded for the first time\n",
    "    state = {'month':'yea','agg_level':'borough','feature':'cluster_2'}\n",
    "    geosource = GeoJSONDataSource(geojson = json_data(**state,data=cluster_dict))\n",
    "    # Hover that will show the current feature value for the hovered area + its name\n",
    "    hover = HoverTool(tooltips = [ ('Area name','@name'),(state['feature'], '@'+state['feature'])])\n",
    "    # Create figure for the plot\n",
    "    plot = figure(title = \"K-Means clustering (k = {0}) for {1}\".format(state['feature'][-1],state['agg_level']), \n",
    "            plot_height = 800 , plot_width = 950, toolbar_location = None,\n",
    "            tools = [hover])\n",
    "    # Remover axis for nicer layout\n",
    "    plot.xgrid.grid_line_color = None\n",
    "    plot.ygrid.grid_line_color = None\n",
    "    plot.axis.visible = False\n",
    "    # link data and plot \n",
    "    color_mapper   = create_cat_color_mapper(state) # create new mapper\n",
    "    plot.patches('xs','ys', source = geosource,     # link geosource\n",
    "        fill_color = {'field' :state['feature'],    # color related to selected feature\n",
    "                      'transform':color_mapper},    # use the defined colormapper\n",
    "        line_color = 'black',                       # style : black borders\n",
    "        line_width = 0.25, fill_alpha = 1,)           # more styling\n",
    "    #create graphical components for the user to interact\n",
    "    btn_agg_level  = RadioButtonGroup(labels=c_agg_levels, active=0)    # selection aggregation level\n",
    "    select_feature = Select(title=\"Number of cluster (value of k)\", \n",
    "                            value=c_feature_names[0], options=c_feature_names)\n",
    "    #add event handler\n",
    "    local_update_plot = lambda st,v: update_cat_plot(st, v,state,plot,geosource)\n",
    "    btn_agg_level.on_click(           lambda new         : local_update_plot('agg_level',c_agg_levels[new]))\n",
    "    select_feature.on_change('value', lambda attr,old,new: local_update_plot('feature'  ,new))\n",
    "    #add components to root document\n",
    "    doc.add_root(column(btn_agg_level, plot,select_feature))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 19,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.bokehjs_exec.v0+json": "",
      "text/html": [
       "\n",
       "<script id=\"1139\">\n",
       "  var xhr = new XMLHttpRequest()\n",
       "  xhr.responseType = 'blob';\n",
       "  xhr.open('GET', \"http://localhost:64014/autoload.js?bokeh-autoload-element=1139&bokeh-absolute-url=http://localhost:64014&resources=none\", true);\n",
       "  \n",
       "  xhr.onload = function (event) {\n",
       "    var script = document.createElement('script'),\n",
       "    src = URL.createObjectURL(event.target.response);\n",
       "    script.src = src;\n",
       "    document.body.appendChild(script);\n",
       "  };\n",
       "xhr.send();\n",
       "</script>"
      ]
     },
     "metadata": {
      "application/vnd.bokehjs_exec.v0+json": {
       "server_id": "ebb0cd1e65b5494c9077c657a945b09d"
      }
     },
     "output_type": "display_data"
    }
   ],
   "source": [
    "show(cluster_bkapp) "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "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.9"
  },
  "toc": {
   "base_numbering": 1,
   "nav_menu": {},
   "number_sections": true,
   "sideBar": true,
   "skip_h1_title": false,
   "title_cell": "Table of Contents",
   "title_sidebar": "Contents",
   "toc_cell": false,
   "toc_position": {},
   "toc_section_display": true,
   "toc_window_display": false
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}