taxi_demo_grid.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "urth": {
     "dashboard": {
      "layout": {
       "col": 0,
       "height": 8,
       "row": 0,
       "width": 12
      }
     }
    }
   },
   "source": [
    "## Taxi Data Demonstration\n",
    "\n",
    "In this demonstration we are using a portion of the [NYC Taxi dataset](http://www.andresmh.com/nyctaxitrips/) to show how to put together many of the features of the [declarative widgets](https://github.com/jupyter-incubator/declarativewidgets). You will see examples of:\n",
    "* Importing 3rd party elements\n",
    "* Using functions defined in Python\n",
    "* Constructing input areas for the user\n",
    "* Displaying results in tables, maps, charts\n",
    "* Accessing DataFrames\n",
    "* Modifying data from Python and affecting UI elements"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "urth": {
     "dashboard": {
      "hidden": true
     }
    }
   },
   "source": [
    "\n",
    "<div class=\"alert alert-info\" role=\"alert\" style=\"margin-top: 10px\">\n",
    "<p><strong>Note</strong><p>\n",
    "\n",
    "<p>To follow along on the demostration, it is best to execute cells as you read the Notebook (Shift-Enter). Do not use Run All.</p>\n",
    "</div>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "urth": {
     "dashboard": {
      "hidden": true
     }
    }
   },
   "source": [
    "<div class=\"alert alert-info\" role=\"alert\" style=\"margin-top: 10px\">\n",
    "<p><strong>Note:</strong> This notebook was written using Python 3+.</p>\n",
    "</div>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "urth": {
     "dashboard": {
      "hidden": true
     }
    }
   },
   "source": [
    "### Importing Elements <a name=\"import\"></a>\n",
    "\n",
    "One of the first things you need to do is import some elements. In this example, we are going to be using serveral of the elements provided by the [Polymer Catalog](https://elements.polymer-project.org/). With the `urth-core-import` extension to the `<link>` tag, you can import 3rd party components by setting the `package` attribute to the [Bower](http://bower.io/) package name. For example, the `<paper-slider>` element is defined in package `PolymerElements/paper-slider`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "urth": {
     "dashboard": {
      "hidden": true
     }
    }
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "<link rel=\"import\" href=\"urth_components/paper-dropdown-menu/paper-dropdown-menu.html\" is='urth-core-import' package='PolymerElements/paper-dropdown-menu'>\n",
    "<link rel=\"import\" href=\"urth_components/paper-menu/paper-menu.html\" is='urth-core-import' package='PolymerElements/paper-menu'>\n",
    "<link rel=\"import\" href=\"urth_components/paper-item/paper-item.html\" is='urth-core-import' package='PolymerElements/paper-item'>\n",
    "<link rel=\"import\" href=\"urth_components/paper-button/paper-button.html\" is='urth-core-import' package='PolymerElements/paper-button'>\n",
    "<link rel=\"import\" href=\"urth_components/paper-card/paper-card.html\" is='urth-core-import' package='PolymerElements/paper-card'>\n",
    "<link rel=\"import\" href=\"urth_components/paper-slider/paper-slider.html\" is='urth-core-import' package='PolymerElements/paper-slider'>\n",
    "<link rel=\"import\" href=\"urth_components/google-map/google-map.html\" is='urth-core-import' package='GoogleWebComponents/google-map'>\n",
    "<link rel=\"import\" href=\"urth_components/google-map/google-map-marker.html\" is='urth-core-import' package='GoogleWebComponents/google-map'>\n",
    "<link rel=\"import\" href=\"urth_components/urth-viz-table/urth-viz-table.html\" is='urth-core-import'>\n",
    "<link rel=\"import\" href=\"urth_components/urth-viz-chart/urth-viz-chart.html\" is='urth-core-import'>\n",
    "\n",
    "<style is=\"custom-style\">\n",
    "    google-map {\n",
    "        height: 400px;\n",
    "    }\n",
    "\n",
    "    div.output_wrapper {\n",
    "        z-index: 3;\n",
    "    }\n",
    "\n",
    "    paper-card.driverStats {\n",
    "        margin-bottom: 10px;\n",
    "        display: block;\n",
    "        width: 50%;\n",
    "    }\n",
    "\n",
    "    paper-card.driverStats paper-slider {\n",
    "        width: 100%;\n",
    "    }\n",
    "\n",
    "    paper-card.driverStats div.stat-label,\n",
    "    paper-card.driverStats div.stat-value {\n",
    "        width: 50px;\n",
    "    }\n",
    "\n",
    "    urth-viz-chart .nv-x .tick text {\n",
    "        display: none;\n",
    "    }\n",
    "\n",
    "    paper-slider.blue {\n",
    "      --paper-slider-knob-color: var(--paper-light-blue-500);\n",
    "      --paper-slider-active-color: var(--paper-light-blue-500);\n",
    "    }\n",
    "    paper-slider.red {\n",
    "      --paper-slider-knob-color: var(--paper-red-500);\n",
    "      --paper-slider-active-color: var(--paper-red-500);\n",
    "    }\n",
    "    paper-slider.orange {\n",
    "      --paper-slider-knob-color: var(--paper-orange-500);\n",
    "      --paper-slider-active-color: var(--paper-orange-500);\n",
    "      --paper-slider-pin-color: var(--paper-orange-500);\n",
    "    }\n",
    "    \n",
    "    urth-viz-chart::shadow .nv-x .tick text {\n",
    "        display: none;\n",
    "    }\n",
    "</style>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "urth": {
     "dashboard": {
      "hidden": true
     }
    }
   },
   "source": [
    "<div class=\"alert alert-info\" role=\"alert\" style=\"margin-top: 10px\">\n",
    "<p><strong>Note</strong><p>\n",
    "\n",
    "<p>It will take some time the first time you run the cell above. That is because the Notebook server is indeed installing those element so that they are available to use here.</p>\n",
    "</div>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true,
    "urth": {
     "dashboard": {
      "hidden": true
     }
    }
   },
   "outputs": [],
   "source": [
    "import pandas as pd"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true,
    "urth": {
     "dashboard": {
      "hidden": true
     }
    }
   },
   "outputs": [],
   "source": [
    "tripsUrl = {\n",
    "    'trips_1': 'https://ibm.box.com/shared/static/c58ytwlmffnofl3arcwc6axev6nocijp.csv',\n",
    "    'trips_2': 'https://ibm.box.com/shared/static/lwsnp7gqwwjvl68mz751lbdoqe5hvhbo.csv',\n",
    "    'trips_3': 'https://ibm.box.com/shared/static/iueg7r5k65l9jkz1ye40tkx7hcxxpxfq.csv',\n",
    "    'trips_4': 'https://ibm.box.com/shared/static/1pd4vfp5mn4ge28dfsj32idbfzkvxg02.csv',\n",
    "    'trips_5': 'https://ibm.box.com/shared/static/n1a88mgcm94h9mq8dcu5ss99j8xo9z1t.csv',\n",
    "    'all': 'https://ibm.box.com/shared/static/w5kzt0f6xgy0i0kadv41lxyqhhfudnh2.csv'\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true,
    "urth": {
     "dashboard": {
      "hidden": true
     }
    }
   },
   "outputs": [],
   "source": [
    "def loadData(name:str):\n",
    "    return pd.read_csv(tripsUrl[name])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "urth": {
     "dashboard": {
      "layout": {
       "col": 0,
       "height": 7,
       "row": 8,
       "width": 12
      }
     }
    }
   },
   "source": [
    "### Using functions <a name=\"function\"></a>\n",
    "\n",
    "The cell above defines a simple function called `loadData()`. This function will load a CSV file containing taxi trip data. We can connect this function to UI elements with the help of the `<urth-core-function>` element. The element refers to the function by name using the `ref` attribute. It also takes arguments to the function as attributes and those can be set by other UI elements in the template. The cell below shows a simple UI consisting of a `selection` area and a `button`. \n",
    "\n",
    "The `<template>` element is using the `urth-core-bind` extension. This element behaves just like Polymer `dom-bind` extension with some additional goodness. More on that later... For more details, see the [documentation](https://www.polymer-project.org/1.0/docs/devguide/templates.html#dom-bind) on using Polymer's `dom-bind` `<template>`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "urth": {
     "dashboard": {
      "layout": {
       "col": 0,
       "height": 8,
       "row": 15,
       "width": 3
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "<a name=\"loaddata\"></a>\n",
    "<template id=\"loadCard\" is=\"urth-core-bind\" channel=\"trips\">\n",
    "    <urth-core-function id=\"loadDataFunc\" \n",
    "        ref=\"loadData\" \n",
    "        arg-name=\"{{datafile}}\" \n",
    "        result=\"{{thedata}}\" \n",
    "        limit=\"50\"\n",
    "        is-ready=\"{{isloadready}}\"></urth-core-function>\n",
    "    <paper-card heading=\"Load Data\" elevation=\"1\">\n",
    "        <div class=\"card-content\">\n",
    "            <paper-dropdown-menu label=\"Select Trips\" selected-item-label=\"{{datafile}}\" noink>\n",
    "                <paper-menu class=\"dropdown-content\" selected=\"[[datafile]]\" attr-for-selected=\"label\">\n",
    "                    <template is=\"dom-repeat\" items=\"[[tripOptions]]\">\n",
    "                        <paper-item label=\"[[item]]\">[[item]]</paper-item>\n",
    "                    </template>\n",
    "                </paper-menu>\n",
    "            </paper-dropdown-menu>\n",
    "        </div>\n",
    "        <div class=\"card-actions\">\n",
    "            <paper-button tabindex=\"0\" disabled=\"{{!isloadready}}\" onClick=\"loadDataFunc.invoke()\">Load</paper-button>\n",
    "        </div>\n",
    "    </paper-card>\n",
    "</template>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "urth": {
     "dashboard": {
      "layout": {
       "col": 3,
       "height": 8,
       "row": 15,
       "width": 9
      }
     }
    }
   },
   "source": [
    "### Setting data\n",
    "\n",
    "If you have not already noticed, the `Load Data` UI we create [above](#loaddata) has no options to select. That is because we have not given it a list of options. One way of setting that information is using a regular code cell.\n",
    "\n",
    "In the cell below we are using the channel api to set data on the UI. This api is one of the added capabilities of using the `<template>` element with the `urth-core-bind` extension. Notice that the `<template>` element in the cell above has a `channel` attribute set to `trips`. This provides a namespace of sort for all the other binding varaibles defined using the `{{varname}}` syntax. From Python we can then set the value of the `{{tripOptions}}` variable.\n",
    "\n",
    "Execute the cell below and see how there are options to choose from on the `<paper-dropdown-menu>` widget [above](#loaddata)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "urth": {
     "dashboard": {
      "hidden": true
     }
    }
   },
   "outputs": [],
   "source": [
    "from urth.widgets.widget_channels import channel\n",
    "channel(\"trips\").set(\"tripOptions\", [\"trips_1\", \"trips_2\", \"trips_3\", \"trips_4\", \"trips_5\"])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true,
    "urth": {
     "dashboard": {
      "hidden": true
     }
    }
   },
   "outputs": [],
   "source": [
    "def center(lat1:float, long1: float, lat2: float, long2: float):\n",
    "    return [(lat1+lat2)/2, (long1+long2)/2]"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "urth": {
     "dashboard": {
      "layout": {
       "col": 0,
       "height": 7,
       "row": 23,
       "width": 12
      }
     }
    }
   },
   "source": [
    "### Tables and Maps\n",
    "\n",
    "The following cell will show the taxi trip data on a table and a map, but only if you've loaded data. You load the data with the `Load Data` UI created [above](#loaddata). Select a trip and press `'LOAD`. To show the data as a table, we are using the `<urth-viz-table>` element.\n",
    "\n",
    "So where is the map? The map shows when selecting a row on the table. This capability is made possible by the `selection` attribute of the `<urth-viz-table>` element. \n",
    "\n",
    "We are also using the `center()` function defined above as a way to center the map between the pickup and dropoff location of the taxi trip."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "scrolled": true,
    "urth": {
     "dashboard": {
      "layout": {
       "col": 0,
       "height": 28,
       "row": 30,
       "width": 12
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "<template is=\"urth-core-bind\" channel=\"trips\">\n",
    "    <urth-core-function\n",
    "        ref=\"center\" \n",
    "        arg-lat1=\"[[sel.11]]\" \n",
    "        arg-long1=\"[[sel.10]]\" \n",
    "        arg-lat2=\"[[sel.13]]\" \n",
    "        arg-long2=\"[[sel.12]]\" \n",
    "        result=\"{{thecenter}}\" auto></urth-core-function>\n",
    "    <template is=\"dom-if\" if=\"{{thedata}}\">\n",
    "        <paper-card style=\"width: 100%;\" heading=\"Trips Data\" elevation=\"1\">\n",
    "            <div class=\"card-content\">\n",
    "                <urth-viz-table datarows='{{thedata.data}}' columns='{{thedata.columns}}' selection='{{sel}}' rows-visible=\"10\"></urth-viz-table>\n",
    "            </div>\n",
    "            <div class=\"card-content\">\n",
    "                <template is=\"dom-if\" if=\"{{sel}}\">\n",
    "                    <google-map id=\"blah\" latitude=\"[[thecenter.0]]\" longitude=\"[[thecenter.1]]\" zoom=\"12\">\n",
    "                        <google-map-marker latitude=\"{{sel.11}}\" longitude=\"{{sel.10}}\" title=\"Pickup\"></google-map-marker>\n",
    "                        <google-map-marker latitude=\"{{sel.13}}\" longitude=\"{{sel.12}}\" title=\"Dropoff\"></google-map-marker>\n",
    "                    </google-map>\n",
    "                </template>\n",
    "            </div>\n",
    "        </paper-card>\n",
    "    </template>\n",
    "</template>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "urth": {
     "dashboard": {
      "hidden": true
     }
    }
   },
   "outputs": [],
   "source": [
    "allfares = fares = pd.read_csv(tripsUrl['all'])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "urth": {
     "dashboard": {
      "hidden": true
     }
    }
   },
   "source": [
    "### Using DataFrame <a name=\"dataframe\"></a>\n",
    "\n",
    "The NYC Taxi data also contains a dataset for the fares collected for each trip. In the cell above we are loading this data into a Pandas DataFrame. Below, we are using the `<urth-core-dataframe>` element to interface with the Pandas DataFrame. Just like the `<urth-core-function>` element, the `ref` attribute is use to set the name of the DataFrame variable `fares`. \n",
    "\n",
    "Once connected, we can display the data using UI elements. In the cell below, we are using the `<urth-viz-table>` element to show the data."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "scrolled": false,
    "urth": {
     "dashboard": {
      "hidden": true
     }
    }
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "<template is=\"urth-core-bind\" channel=\"faresChan\">\n",
    "    <urth-core-dataframe ref=\"fares\" value=\"{{thedata}}\" limit=\"100\" auto></urth-core-dataframe>\n",
    "    <paper-card style=\"width: 100%;\" heading=\"Fares Data\" elevation=\"1\">\n",
    "        <div class=\"card-content\">\n",
    "            <urth-viz-table datarows='{{thedata.data}}' columns='{{thedata.columns}}' rows-visible='10'></urth-viz-table>\n",
    "        </div>\n",
    "    </paper-card>\n",
    "</template>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "urth": {
     "dashboard": {
      "hidden": true
     }
    }
   },
   "source": [
    "A nice feature of the `<urth-core-dataframe>` element is that it can detect cell execution and refresh its data in case the DataFrame it refers to is modified. Execute the cell below and notice how the contents of the table above changes."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "urth": {
     "dashboard": {
      "hidden": true
     }
    }
   },
   "outputs": [],
   "source": [
    "fares = allfares[fares[' payment_type']=='CRD']"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "urth": {
     "dashboard": {
      "hidden": true
     }
    }
   },
   "outputs": [],
   "source": [
    "def filterTopEarners(filter = \"All\"):\n",
    "    if (filter == \"Credit\"):\n",
    "        _fares = allfares[allfares[' payment_type']=='CRD']\n",
    "    elif (filter == \"Cash\"):\n",
    "        _fares = allfares[allfares[' payment_type']=='CSH']\n",
    "    else:\n",
    "        _fares = allfares\n",
    "\n",
    "    _topEarners = pd.DataFrame(_fares.groupby('medallion').sum().sort_values(' total_amount', inplace=False, ascending=False)[' total_amount']) \n",
    "    _topEarners['medallion'] = _topEarners.index\n",
    "    \n",
    "    return _topEarners[['medallion', ' total_amount']]"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "urth": {
     "dashboard": {
      "layout": {
       "col": 0,
       "height": 8,
       "row": 58,
       "width": 12
      }
     }
    }
   },
   "source": [
    "### Using charts <a name=\"chart\"></a>\n",
    "\n",
    "Now to something a bit more complex. Below is a cell using an `<urth-core-function>` element to connect to function `filterTopEarners()` defined above. The function returns a Pandas DataFrame with the top earners based on the specified payment type used for the taxi trip. This data is then displayed using an `<urth-viz-chart>` element.\n",
    "\n",
    "Notice how the `<paper-dropdown-menu>` element defaults to `All`. This is because the `<urth-core-function>` elements knows when function arguments have default values and makes those values available to the `<template>`. Also, the `<paper-dropdown-menu>` has 2 other options. Like the above example, these are set from the python code right below.\n",
    "\n",
    "Also notice the `<paper-slider>` element. It allows you to control how much of the returned DataFrame is made available to the `<urth-viz-chart>`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true,
    "urth": {
     "dashboard": {
      "hidden": true
     }
    }
   },
   "outputs": [],
   "source": [
    "channel(\"faresChan\").set(\"paymentOptions\", [\"All\", \"Cash\", \"Credit\"])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "urth": {
     "dashboard": {
      "layout": {
       "col": 0,
       "height": 26,
       "row": 66,
       "width": 12
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "<a name=\"earners\"></a>\n",
    "<template id=\"topEarners\" is=\"urth-core-bind\" channel=\"faresChan\">\n",
    "    <urth-core-function ref=\"filterTopEarners\" arg-filter=\"{{payType}}\" result=\"{{top}}\" limit=\"{{limit}}\" auto></urth-core-function>\n",
    "    <paper-card style=\"width: 100%;\" heading=\"Top Earners\" elevation=\"1\">\n",
    "        <div class=\"card-content\">\n",
    "            <paper-dropdown-menu label=\"Select Payment Type\" noink>\n",
    "                <paper-menu class=\"dropdown-content\" selected=\"{{payType}}\" attr-for-selected=\"label\">\n",
    "                    <template is=\"dom-repeat\" items=\"[[paymentOptions]]\">\n",
    "                        <paper-item label=\"[[item]]\">[[item]]</paper-item>\n",
    "                    </template>\n",
    "                </paper-menu>\n",
    "            </paper-dropdown-menu>\n",
    "\n",
    "            <urth-viz-chart type='bar' datarows='{{top.data}}' columns='{{top.columns}}' selection=\"{{sel}}\" multi-select></urth-viz-chart>\n",
    "            <div class=\"center horizontal layout\">\n",
    "                <div>Limit</div>\n",
    "                <paper-slider min=\"5\" max=\"50\" step=\"5\" pin snap value=\"{{limit}}\"></paper-slider>\n",
    "            </div>\n",
    "        </div>\n",
    "    </paper-card>\n",
    "</template>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true,
    "urth": {
     "dashboard": {
      "hidden": true
     }
    }
   },
   "outputs": [],
   "source": [
    "def driverStats(medallions = []):\n",
    "    colnames = ['medallion', 'trips', 'total_amount_avg', 'total_amount_min', 'total_amount_max']\n",
    "    data = []\n",
    "\n",
    "    for m in list(map((lambda med: med[0]), medallions)):\n",
    "        stats = allfares[allfares['medallion']==m].groupby('medallion').describe()[' total_amount'].iloc[[0, 1, 3, 7]].values\n",
    "        row = [m] + list(stats)\n",
    "        data.append(row)\n",
    "\n",
    "    return pd.DataFrame(data, columns=colnames)\n",
    "\n",
    "def minMaxStats():\n",
    "    data = []\n",
    "    group = allfares[['medallion', ' total_amount']].groupby('medallion')\n",
    "\n",
    "    the_mean = group.mean()\n",
    "    the_max = group.max()\n",
    "    the_min = group.min()\n",
    "\n",
    "    return [the_mean.min()[0], the_mean.max()[0], the_max.min()[0], the_max.max()[0], the_min.min()[0], the_min.max()[0]]"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "urth": {
     "dashboard": {
      "layout": {
       "col": 0,
       "height": 6,
       "row": 92,
       "width": 12
      }
     }
    }
   },
   "source": [
    "### Build anything you want!\n",
    "\n",
    "Finally, the cell below shows how much control the declarative elements give you to build different ways to show your data. We are creating a list of cards for each selection made on the bar chart [above](#earners) to show some individual statistics about the driver. Click on serveral bars and then scroll back down to see the resulting UI.\n",
    "\n",
    "And how can the selection from up ther affect the content of the cell below? That is another feature of the `urth-core-bind` extension to the `<template>` element. As long as `<template>` elements are on the same `channel`, they can share `{{data}}`. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "urth": {
     "dashboard": {
      "layout": {
       "col": 0,
       "height": 22,
       "row": 98,
       "width": 12
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "<template id=\"fareStatsTemplate\" is=\"urth-core-bind\" channel=\"faresChan\">\n",
    "    <urth-core-function ref=\"driverStats\" arg-medallions=\"{{sel}}\" result=\"{{stats}}\" auto></urth-core-function>\n",
    "    <urth-core-function id=\"minMaxStats\" ref=\"minMaxStats\" result=\"{{minMax}}\" on-is-ready-changed =\"init\"></urth-core-function>\n",
    "    <script>\n",
    "        fareStatsTemplate.init = function(){\n",
    "            minMaxStats.invoke()\n",
    "        }\n",
    "    </script>\n",
    "    <template is=\"dom-repeat\" items='{{stats.data}}' as='stat'>\n",
    "        <paper-card class='driverStats' elevation=\"1\">\n",
    "            <div class=\"card-content\">\n",
    "                <div class=\"vertical-section\">\n",
    "                    <h4>Driver: <span>{{stat.0}}</span></h4><br/>\n",
    "                    <div class=\"center horizontal layout\">\n",
    "                        <div class=\"stat-label\">Avg</div>\n",
    "                        <paper-slider pin value=\"{{stat.2}}\" min='{{minMax.0}}' max='{{minMax.1}}'></paper-slider>\n",
    "                        <div class=\"stat-value\">$<span>{{stat.2}}</span></div>\n",
    "                    </div>\n",
    "                    \n",
    "                    <div class=\"center horizontal layout\">\n",
    "                        <div class=\"stat-label\">Min</div>\n",
    "                        <paper-slider pin value=\"{{stat.3}}\" min='{{minMax.4}}' max='{{minMax.5}}' class=\"orange\"></paper-slider>\n",
    "                        <div class=\"stat-value\">$<span>{{stat.3}}</span></div>\n",
    "                    </div>\n",
    "                    \n",
    "                    <div class=\"center horizontal layout\">\n",
    "                        <div class=\"stat-label\">Max</div>\n",
    "                        <paper-slider pin value=\"{{stat.4}}\" min='{{minMax.2}}' max='{{minMax.3}}' class=\"red\"></paper-slider>\n",
    "                        <div class=\"stat-value\">$<span>{{stat.4}}</span></div>\n",
    "                    </div>\n",
    "                </div>\n",
    "            </div>\n",
    "        </paper-card>\n",
    "    </template>\n",
    "</template>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true,
    "urth": {
     "dashboard": {
      "hidden": true
     }
    }
   },
   "source": [
    "For more detail examples of each of the elements, visit each of [these](../../examples) notebooks."
   ]
  }
 ],
 "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.4.4"
  },
  "urth": {
   "dashboard": {
    "cellMargin": 10,
    "defaultCellHeight": 20,
    "layout": "grid",
    "layoutStrategy": "stacked",
    "maxColumns": 12
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}