etc/notebooks/got_scotch_demo/scotch_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": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "# Got Scotch?"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "In this notebook, we're going to create a dashboard that recommends scotches based on their taste profiles. \n",
    "\n",
    "We will have a short intro line indicating which scotch you're examining, followed by a dropdown of all the scotches to pick from. Then on the selection of a scotch, a recommendation table will display the top 5 most similar scotches to your original selection. We will also have a radar chart to show this scotch's taste profile. You can also click on one of the recommendations to examine further in the radar chart this scotch's taste profile compared to your original selection.\n",
    "\n",
    "To do this, we'll use ipywidgets and jupyter_dashboards.\n",
    "\n",
    "On your first visit to this notebook, we recommend that you execute one cell at a time as you read along. Later, if you just want to see the demo, select _Cell_ > _Run All_ from the menu bar. Once you've run all of the cells, select _View_ > _View Dashboard_ and then select a scotch to see the similar recommendations. Click on a similar scotch to examine how it's compared to your original selection.\n",
    "\n",
    "__Table of Contents__\n",
    "1. [Load features and similarities data](#Load-Data-Top)\n",
    "2. [Set up Radar Visualization](#Radar-Visualization-Top)\n",
    "3. [Set up Dashboard](#Dashboard-Setup-Top)\n",
    "4. [Arrange Dashboard Layout](#Arrange-the-Dashboard-Layout-Top)\n"
   ]
  },
  {
   "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": [
    "%matplotlib inline"
   ]
  },
  {
   "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 seaborn as sns\n",
    "import os"
   ]
  },
  {
   "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 ipywidgets as widgets\n",
    "from traitlets import Unicode, List, Instance, link\n",
    "from IPython.display import display, clear_output, HTML, Javascript\n",
    "import jinja2"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "## Load Data <span style=\"float: right; font-size: 0.5em\"><a href=\"#Got-Scotch?\">Top</a></span>"
   ]
  },
  {
   "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": [
    "features_df = pd.read_pickle('./datasets/features.dataframe')\n",
    "sim_df = pd.read_pickle('./datasets/sims.dataframe')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "We will drop the cluster column from *features\\_df*. We don't need it here."
   ]
  },
  {
   "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": [
    "features_df = features_df.drop('cluster', axis=1)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "## Radar Visualization <span style=\"float: right; font-size: 0.5em\"><a href=\"#Got-Scotch?\">Top</a></span>\n",
    "\n",
    "Shamelessly copy/pasting the http://matplotlib.org/examples/api/radar_chart.html example here as a visualization."
   ]
  },
  {
   "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": [
    "\"\"\"\n",
    "Example of creating a radar chart (a.k.a. a spider or star chart) [1]_.\n",
    "\n",
    "Although this example allows a frame of either 'circle' or 'polygon', polygon\n",
    "frames don't have proper gridlines (the lines are circles instead of polygons).\n",
    "It's possible to get a polygon grid by setting GRIDLINE_INTERPOLATION_STEPS in\n",
    "matplotlib.axis to the desired number of vertices, but the orientation of the\n",
    "polygon is not aligned with the radial axes.\n",
    "\n",
    ".. [1] http://en.wikipedia.org/wiki/Radar_chart\n",
    "\"\"\"\n",
    "import numpy as np\n",
    "\n",
    "import matplotlib.pyplot as plt\n",
    "from matplotlib.path import Path\n",
    "from matplotlib.spines import Spine\n",
    "from matplotlib.projections.polar import PolarAxes\n",
    "from matplotlib.projections import register_projection\n",
    "\n",
    "\n",
    "def radar_factory(num_vars, frame='circle'):\n",
    "    \"\"\"Create a radar chart with `num_vars` axes.\n",
    "\n",
    "    This function creates a RadarAxes projection and registers it.\n",
    "\n",
    "    Parameters\n",
    "    ----------\n",
    "    num_vars : int\n",
    "        Number of variables for radar chart.\n",
    "    frame : {'circle' | 'polygon'}\n",
    "        Shape of frame surrounding axes.\n",
    "\n",
    "    \"\"\"\n",
    "    # calculate evenly-spaced axis angles\n",
    "    theta = 2*np.pi * np.linspace(0, 1-1./num_vars, num_vars)\n",
    "    # rotate theta such that the first axis is at the top\n",
    "    theta += np.pi/2\n",
    "\n",
    "    def draw_poly_patch(self):\n",
    "        verts = unit_poly_verts(theta)\n",
    "        return plt.Polygon(verts, closed=True, edgecolor='k')\n",
    "\n",
    "    def draw_circle_patch(self):\n",
    "        # unit circle centered on (0.5, 0.5)\n",
    "        return plt.Circle((0.5, 0.5), 0.5)\n",
    "\n",
    "    patch_dict = {'polygon': draw_poly_patch, 'circle': draw_circle_patch}\n",
    "    if frame not in patch_dict:\n",
    "        raise ValueError('unknown value for `frame`: %s' % frame)\n",
    "\n",
    "    def rand_jitter(arr):\n",
    "        stdev = .01*(max(arr)-min(arr))\n",
    "        return arr + np.random.randn(len(arr)) * stdev\n",
    "        \n",
    "    class RadarAxes(PolarAxes):\n",
    "\n",
    "        name = 'radar'\n",
    "        # use 1 line segment to connect specified points\n",
    "        RESOLUTION = 1\n",
    "        # define draw_frame method\n",
    "        draw_patch = patch_dict[frame]\n",
    "\n",
    "        def fill(self, *args, **kwargs):\n",
    "            \"\"\"Override fill so that line is closed by default\"\"\"\n",
    "            closed = kwargs.pop('closed', True)\n",
    "            return super(RadarAxes, self).fill(closed=closed, *args, **kwargs)\n",
    "\n",
    "        def plot(self, *args, **kwargs):\n",
    "            \"\"\"Override plot so that line is closed by default\"\"\"\n",
    "            lines = super(RadarAxes, self).plot(*args, **kwargs)\n",
    "            for line in lines:\n",
    "                self._close_line(line)\n",
    "\n",
    "        def _close_line(self, line):\n",
    "            x, y = line.get_data()\n",
    "            # FIXME: markers at x[0], y[0] get doubled-up\n",
    "            if x[0] != x[-1]:\n",
    "                x = np.concatenate((x, [x[0]]))\n",
    "                y = np.concatenate((y, [y[0]]))\n",
    "                line.set_data(x, y)\n",
    "\n",
    "        def set_varlabels(self, labels):\n",
    "            self.set_thetagrids(theta * 180/np.pi, labels)\n",
    "\n",
    "        def _gen_axes_patch(self):\n",
    "            return self.draw_patch()\n",
    "\n",
    "        def _gen_axes_spines(self):\n",
    "            if frame == 'circle':\n",
    "                return PolarAxes._gen_axes_spines(self)\n",
    "            # The following is a hack to get the spines (i.e. the axes frame)\n",
    "            # to draw correctly for a polygon frame.\n",
    "\n",
    "            # spine_type must be 'left', 'right', 'top', 'bottom', or `circle`.\n",
    "            spine_type = 'circle'\n",
    "            verts = unit_poly_verts(theta)\n",
    "            # close off polygon by repeating first vertex\n",
    "            verts.append(verts[0])\n",
    "            path = Path(verts)\n",
    "\n",
    "            spine = Spine(self, spine_type, path)\n",
    "            spine.set_transform(self.transAxes)\n",
    "            return {'polar': spine}\n",
    "\n",
    "    register_projection(RadarAxes)\n",
    "    return theta\n",
    "\n",
    "\n",
    "def unit_poly_verts(theta):\n",
    "    \"\"\"Return vertices of polygon for subplot axes.\n",
    "\n",
    "    This polygon is circumscribed by a unit circle centered at (0.5, 0.5)\n",
    "    \"\"\"\n",
    "    x0, y0, r = [0.5] * 3\n",
    "    verts = [(r*np.cos(t) + x0, r*np.sin(t) + y0) for t in theta]\n",
    "    return verts"
   ]
  },
  {
   "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 radar(df):\n",
    "    theta = radar_factory(len(df.columns), frame='polygon')\n",
    "    fig = plt.figure(figsize=(12, 12))\n",
    "    ax = fig.add_subplot(2, 2, 1, projection='radar')\n",
    "    for d, color in zip(df.itertuples(), sns.color_palette()):\n",
    "        ax.plot(theta, d[1:], color=color, alpha=0.7)\n",
    "        ax.fill(theta, d[1:], facecolor=color, alpha=0.5)\n",
    "    ax.set_varlabels(df.columns)\n",
    "    plt.rgrids([1, 2, 3, 4])\n",
    "    legend = plt.legend(df.index, loc=(0.9, .95))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "### Radar Widget\n",
    "\n",
    "Now we'll define a new, custom ipywidgets.DOMWidget to serve as a Python backend for our new radar chart. In this visualization, we will call taste features like smokey, winey, honey, etc. \"factors\", and the scotch that we use to look up the factors a \"factors_key\".\n",
    "\n",
    "We want this radar widget to update when the selected scotch changes, meaning when user selects a new scotch, or when they click on a similar recommended scotch to compare to the original selection. We then draw the taste profiles of these scotches into a radar chart by calling the _radar( )_ function defined above."
   ]
  },
  {
   "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": [
    "class RadarWidget(widgets.DOMWidget):\n",
    "    _view_name = Unicode('RadarView').tag(sync=True)\n",
    "    _view_module = Unicode('radar').tag(sync=True)\n",
    "    factors_keys = List(['Aberfeldy']).tag(sync=True)\n",
    "    \n",
    "    def __init__(self, df, **kwargs):\n",
    "        self.df = df\n",
    "        super(RadarWidget, self).__init__(**kwargs)\n",
    "        self._factors_keys_changed('', self.factors_keys, self.factors_keys)\n",
    "    \n",
    "    def _factors_keys_changed(self, name, old_value, new_value):\n",
    "        clear_output(wait=True)\n",
    "        return radar(self.df.loc[new_value])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "### Radar View\n",
    "\n",
    "Next, we need to define a RadarView that serves as the front-end view for the Python widget class we defined above. This frontend will contain the Javascript that watches for events in the similarities/recommendations table and redraws the radar plot accordingly."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "%%javascript\n",
    "require.undef('radar');\n",
    "\n",
    "define('radar', [\"jupyter-js-widgets\", \"base/js/events\"], function(widgets, events) {\n",
    "    var RadarView = widgets.DOMWidgetView.extend({\n",
    "        render: function() {\n",
    "            var that = this;\n",
    "            events.on('select.factors_keys', function(event, data) {\n",
    "                if(data.factors_keys) {\n",
    "                    that.model.set('factors_keys', data.factors_keys);\n",
    "                    that.touch();\n",
    "                }\n",
    "            });\n",
    "        }\n",
    "    });\n",
    "    return {\n",
    "        RadarView: RadarView\n",
    "    }\n",
    "});"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "## Dashboard Setup <span style=\"float: right; font-size: 0.5em\"><a href=\"#Got-Scotch?\">Top</a></span>\n",
    "\n",
    "Finally, we will set up the dashboard to show a short introduction line about which scotch you're examining, then a scotch dropdown picker, a recommendation table, and a radar chart to show how similar it is to your selection.\n",
    "\n",
    "We need to add an *on click* event on the recommended scotch links. On click, the event will trigger the Radar View's *select.factors* event."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "%%javascript\n",
    "$(document).off('click', 'a.scotch');\n",
    "$(document).on('click', 'a.scotch', function(event) {\n",
    "    var data = $(event.target).data();\n",
    "    IPython.notebook.events.trigger('select.factors_keys', data);\n",
    "});"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "<style>\n",
    "table.dataframe {\n",
    "    width: 100%\n",
    "}\n",
    "iframe.wiki {\n",
    "    width: 100%;\n",
    "    height: 400px;\n",
    "}\n",
    "</style>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "We then need a short intro line template, let's assign it to a variable called _tmpl_."
   ]
  },
  {
   "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": [
    "tmpl = jinja2.Template('''<p>If you like {{name}} you might want to try these five brands. Click one to see how its taste profile compares.</p>''')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "We now define a *get_similar( )* function to return the data of the top n similar scotches to a given scotch."
   ]
  },
  {
   "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 get_similar(name, n, top=True):\n",
    "    a = sim_df[name].sort_values(ascending=False)\n",
    "    a.name = 'Similarity'\n",
    "    df = pd.DataFrame(a) #.join(features_df).iloc[start:end]\n",
    "    return df.head(n) if top else df.tail(n)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "We also need a function *on_pick_scotch* that will display a table of the top 5 similar scotches that Radar View watches, based on a given selected Scotch."
   ]
  },
  {
   "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 on_pick_scotch(Scotch):\n",
    "    name = Scotch\n",
    "    # Get top 6 similar whiskeys, and remove this one\n",
    "    top_df = get_similar(name, 6).iloc[1:]\n",
    "    # Get bottom 5 similar whiskeys\n",
    "#     bottom_df = get_similar(name, 5, False)\n",
    "#     df = pd.concat([top_df, bottom_df])\n",
    "    df = top_df\n",
    "    \n",
    "    # Make table index a set of links that the radar widget will watch\n",
    "    df.index = ['''<a class=\"scotch\" href=\"#\" data-factors_keys='[\"{}\",\"{}\"]'>{}</a>'''.format(name, i, i) for i in df.index]\n",
    "    \n",
    "    prompt_w.value = tmpl.render(name=name)\n",
    "    html = HTML(df.to_html(escape=False))\n",
    "    js = Javascript(\"IPython.notebook.events.trigger('select.factors_keys', {factors_keys: ['%s']});\" % name)\n",
    "    \n",
    "    return display(html, js)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "Now we can render the previously assigned __tmpl__ with an argument _name_ as our first scotch 'Aberfeldy'. This is a default scotch, and the template will re-render when user picks a new scotch from the drop down."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 0,
        "height": 2,
        "hidden": false,
        "row": 2,
        "width": 12
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "prompt_w = widgets.HTML(value=tmpl.render(name='Aberfeldy'))\n",
    "prompt_w"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "After that, we will render the scotch drop down picker, which will call our previously defined *on_scotch_picker* function when a new selection is made, and a similarities table will render accordingly."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 0,
        "height": 13,
        "hidden": false,
        "row": 4,
        "width": 7
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "picker_w = widgets.interact(on_pick_scotch, Scotch=list(sim_df.index))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "And lastly, we construct a RadarWidget to display a radar chart showing the selected scotches taste profiles."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 7,
        "height": 13,
        "hidden": false,
        "row": 4,
        "width": 5
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "radar_w = RadarWidget(df=features_df)\n",
    "radar_w"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "And finally, we'll include a footer in our dashboard with some attribution information."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 0,
        "height": 4,
        "hidden": false,
        "row": 17,
        "width": 12
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "Powered by data from https://www.mathstat.strath.ac.uk/outreach/nessie/nessie_whisky.html and inspired by analysis from http://blog.revolutionanalytics.com/2013/12/k-means-clustering-86-single-malt-scotch-whiskies.html. This dashboard originated as a Jupyter Notebook."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "## Arrange the Dashboard Layout <span style=\"float: right; font-size: 0.5em\"><a href=\"#Got-Scotch?\">Top</a></span>\n",
    "\n",
    "\n",
    "Select *View > Dashboard Preview* from the menu bar to see the dashboard view now. To return to the regular notebook view, select *View > Notebook*.\n",
    "\n",
    "If you want to arrange the notebook cells differently, select *View > Dashboard Layout*. Then, hover your mouse over the main notebook / dashboard area. When you do, you'll see icons appear that allow you to:\n",
    "\n",
    "- Drag cells to new locations\n",
    "- Resize cells\n",
    "- Show / hide cells in the dashboard view\n",
    "- Flip to editing mode for a cell\n",
    "\n",
    "Save the notebook to save your changes to the layout within the notebook file itself.\n",
    "\n",
    "<div class=\"alert alert-info\" role=\"alert\" style=\"margin-top: 10px\">\n",
    "<p><strong>Note</strong><p>\n",
    "\n",
    "<p>in a fresh notebook, the dashboard will only show cells with non-empty output. All other cells can be found in the *Hidden* section at the bottom of the dashboard layout page. You can quickly add all cell outputs or remove all cell outputs from the dashboard using the show / hide icons that appear in the notebook toolbar when you are in layout mode.</p>\n",
    "</div>"
   ]
  }
 ],
 "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.6.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 1
}