Plotly.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Plotly"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Handy hints "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "* Some of the plotting libraries we use need to communicate a lot of data to the browser. Depending on which version of Jupyter you are running, you may need to launch this notebook with a higher data rate limit: `jupyter notebook --NotebookApp.iopub_data_rate_limit=10000000`\n",
    "\n",
    "* In general, we are using plotting libraries that return objects encapsulating the plot. You can check the type of these returned objects with `type()`. Jupyter's tools for exploring objects and methods will also be useful: the `?` and `??` operators, and tab autocompletion."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Setup "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 82,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2018-01-15T00:55:16.420432Z",
     "start_time": "2018-01-15T00:55:16.416622Z"
    }
   },
   "outputs": [],
   "source": [
    "import pandas as pd\n",
    "import numpy as np"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 83,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2018-01-15T00:55:16.929054Z",
     "start_time": "2018-01-15T00:55:16.903001Z"
    }
   },
   "outputs": [],
   "source": [
    "# We may want to use some colours etc from other libraries\n",
    "%matplotlib inline\n",
    "import matplotlib.pyplot as plt\n",
    "import seaborn as sns"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 84,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2018-01-15T00:55:17.528797Z",
     "start_time": "2018-01-15T00:55:17.517925Z"
    }
   },
   "outputs": [],
   "source": [
    "# Use the plotly.offline module to use plotly without a cloud account\n",
    "from plotly.offline import download_plotlyjs, init_notebook_mode, plot, iplot\n",
    "import plotly.graph_objs as go\n",
    "from plotly import tools\n",
    "import plotly"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 85,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2018-01-15T00:55:18.510884Z",
     "start_time": "2018-01-15T00:55:18.503898Z"
    }
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script>requirejs.config({paths: { 'plotly': ['https://cdn.plot.ly/plotly-latest.min']},});if(!window.Plotly) {{require(['plotly'],function(plotly) {window.Plotly=plotly;});}}</script>"
      ],
      "text/vnd.plotly.v1+html": [
       "<script>requirejs.config({paths: { 'plotly': ['https://cdn.plot.ly/plotly-latest.min']},});if(!window.Plotly) {{require(['plotly'],function(plotly) {window.Plotly=plotly;});}}</script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# init_notebook_mode() will inject the Plotly javascript into our notebook\n",
    "# so we can display plots inline using iplot()\n",
    "init_notebook_mode(connected=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Toy data "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Let's create a toy dataset to use for illustration and problem-posing purposes. It's very small, so you we can easily see what's going on. In most cases we'll ask you to do exercises using the more complex housing data."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 86,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2018-01-15T00:55:21.007397Z",
     "start_time": "2018-01-15T00:55:20.950980Z"
    }
   },
   "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>name</th>\n",
       "      <th>number</th>\n",
       "      <th>engine_type</th>\n",
       "      <th>colour</th>\n",
       "      <th>wheels</th>\n",
       "      <th>top_speed_mph</th>\n",
       "      <th>weight_tons</th>\n",
       "      <th>size</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>Thomas</td>\n",
       "      <td>1</td>\n",
       "      <td>Tank</td>\n",
       "      <td>Blue</td>\n",
       "      <td>6</td>\n",
       "      <td>40</td>\n",
       "      <td>52.00</td>\n",
       "      <td>Medium</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>Edward</td>\n",
       "      <td>2</td>\n",
       "      <td>Tender</td>\n",
       "      <td>Blue</td>\n",
       "      <td>14</td>\n",
       "      <td>70</td>\n",
       "      <td>41.00</td>\n",
       "      <td>Small</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>Henry</td>\n",
       "      <td>3</td>\n",
       "      <td>Tender</td>\n",
       "      <td>Green</td>\n",
       "      <td>18</td>\n",
       "      <td>90</td>\n",
       "      <td>72.20</td>\n",
       "      <td>Big</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3</th>\n",
       "      <td>Gordon</td>\n",
       "      <td>4</td>\n",
       "      <td>Tender</td>\n",
       "      <td>Blue</td>\n",
       "      <td>18</td>\n",
       "      <td>100</td>\n",
       "      <td>91.35</td>\n",
       "      <td>Big</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>4</th>\n",
       "      <td>James</td>\n",
       "      <td>5</td>\n",
       "      <td>Tender</td>\n",
       "      <td>Red</td>\n",
       "      <td>14</td>\n",
       "      <td>70</td>\n",
       "      <td>46.00</td>\n",
       "      <td>Medium</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>5</th>\n",
       "      <td>Percy</td>\n",
       "      <td>6</td>\n",
       "      <td>Tank</td>\n",
       "      <td>Green</td>\n",
       "      <td>4</td>\n",
       "      <td>40</td>\n",
       "      <td>22.85</td>\n",
       "      <td>Small</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>6</th>\n",
       "      <td>Toby</td>\n",
       "      <td>7</td>\n",
       "      <td>Tank</td>\n",
       "      <td>Brown</td>\n",
       "      <td>6</td>\n",
       "      <td>20</td>\n",
       "      <td>27.00</td>\n",
       "      <td>Small</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>7</th>\n",
       "      <td>Emily</td>\n",
       "      <td>12</td>\n",
       "      <td>Tender</td>\n",
       "      <td>Green</td>\n",
       "      <td>8</td>\n",
       "      <td>85</td>\n",
       "      <td>45.00</td>\n",
       "      <td>Small</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>8</th>\n",
       "      <td>Rosie</td>\n",
       "      <td>37</td>\n",
       "      <td>Tank</td>\n",
       "      <td>Purple</td>\n",
       "      <td>6</td>\n",
       "      <td>65</td>\n",
       "      <td>37.00</td>\n",
       "      <td>Small</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>9</th>\n",
       "      <td>Hiro</td>\n",
       "      <td>51</td>\n",
       "      <td>Tender</td>\n",
       "      <td>Black</td>\n",
       "      <td>20</td>\n",
       "      <td>55</td>\n",
       "      <td>76.80</td>\n",
       "      <td>Big</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "</div>"
      ],
      "text/plain": [
       "     name  number engine_type  colour  wheels  top_speed_mph  weight_tons  \\\n",
       "0  Thomas       1        Tank    Blue       6             40        52.00   \n",
       "1  Edward       2      Tender    Blue      14             70        41.00   \n",
       "2   Henry       3      Tender   Green      18             90        72.20   \n",
       "3  Gordon       4      Tender    Blue      18            100        91.35   \n",
       "4   James       5      Tender     Red      14             70        46.00   \n",
       "5   Percy       6        Tank   Green       4             40        22.85   \n",
       "6    Toby       7        Tank   Brown       6             20        27.00   \n",
       "7   Emily      12      Tender   Green       8             85        45.00   \n",
       "8   Rosie      37        Tank  Purple       6             65        37.00   \n",
       "9    Hiro      51      Tender   Black      20             55        76.80   \n",
       "\n",
       "     size  \n",
       "0  Medium  \n",
       "1   Small  \n",
       "2     Big  \n",
       "3     Big  \n",
       "4  Medium  \n",
       "5   Small  \n",
       "6   Small  \n",
       "7   Small  \n",
       "8   Small  \n",
       "9     Big  "
      ]
     },
     "execution_count": 86,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from io import StringIO\n",
    "\n",
    "data_string = \"\"\"name\tnumber\tengine_type\tcolour\twheels\ttop_speed_mph\tweight_tons\n",
    "Thomas\t1\tTank\tBlue\t6\t40\t52\n",
    "Edward\t2\tTender\tBlue\t14\t70\t41\n",
    "Henry\t3\tTender\tGreen\t18\t90\t72.2\n",
    "Gordon\t4\tTender\tBlue\t18\t100\t91.35\n",
    "James\t5\tTender\tRed\t14\t70\t46\n",
    "Percy\t6\tTank\tGreen\t4\t40\t22.85\n",
    "Toby\t7\tTank\tBrown\t6\t20\t27\n",
    "Emily\t12\tTender\tGreen\t8\t85\t45\n",
    "Rosie\t37\tTank\tPurple\t6\t65\t37\n",
    "Hiro\t51\tTender\tBlack\t20\t55\t76.8\"\"\"\n",
    "\n",
    "trains = pd.read_table(StringIO(data_string))\n",
    "trains['size'] = pd.cut(trains['weight_tons'], 3, labels=['Small','Medium','Big'])\n",
    "\n",
    "trains"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Housing data "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 87,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2018-01-15T00:55:22.750109Z",
     "start_time": "2018-01-15T00:55:22.671872Z"
    }
   },
   "outputs": [],
   "source": [
    "sales = pd.read_csv(\"housing-data-10000.csv\", \n",
    "                    usecols=['id','date','price','zipcode','lat','long',\n",
    "                             'waterfront','view','grade','sqft_living','sqft_lot'],\n",
    "                    parse_dates=['date'], \n",
    "                    dtype={'zipcode': 'category',\n",
    "                           'waterfront': 'bool'})"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 88,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2018-01-15T00:55:22.999892Z",
     "start_time": "2018-01-15T00:55:22.971263Z"
    },
    "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>id</th>\n",
       "      <th>date</th>\n",
       "      <th>price</th>\n",
       "      <th>sqft_living</th>\n",
       "      <th>sqft_lot</th>\n",
       "      <th>waterfront</th>\n",
       "      <th>view</th>\n",
       "      <th>grade</th>\n",
       "      <th>zipcode</th>\n",
       "      <th>lat</th>\n",
       "      <th>long</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>1446800660</td>\n",
       "      <td>2015-03-16</td>\n",
       "      <td>276500.0</td>\n",
       "      <td>1400</td>\n",
       "      <td>6650</td>\n",
       "      <td>False</td>\n",
       "      <td>0</td>\n",
       "      <td>6</td>\n",
       "      <td>98168</td>\n",
       "      <td>47.4888</td>\n",
       "      <td>-122.332</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>1453601502</td>\n",
       "      <td>2015-02-26</td>\n",
       "      <td>303697.0</td>\n",
       "      <td>2520</td>\n",
       "      <td>7334</td>\n",
       "      <td>False</td>\n",
       "      <td>0</td>\n",
       "      <td>7</td>\n",
       "      <td>98125</td>\n",
       "      <td>47.7263</td>\n",
       "      <td>-122.291</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>9523103990</td>\n",
       "      <td>2014-12-08</td>\n",
       "      <td>611000.0</td>\n",
       "      <td>1850</td>\n",
       "      <td>5000</td>\n",
       "      <td>False</td>\n",
       "      <td>0</td>\n",
       "      <td>7</td>\n",
       "      <td>98103</td>\n",
       "      <td>47.6727</td>\n",
       "      <td>-122.351</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3</th>\n",
       "      <td>7308600040</td>\n",
       "      <td>2014-07-23</td>\n",
       "      <td>769995.0</td>\n",
       "      <td>3360</td>\n",
       "      <td>12080</td>\n",
       "      <td>False</td>\n",
       "      <td>0</td>\n",
       "      <td>9</td>\n",
       "      <td>98011</td>\n",
       "      <td>47.7757</td>\n",
       "      <td>-122.173</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>4</th>\n",
       "      <td>1562200240</td>\n",
       "      <td>2014-09-18</td>\n",
       "      <td>550000.0</td>\n",
       "      <td>2160</td>\n",
       "      <td>15360</td>\n",
       "      <td>False</td>\n",
       "      <td>0</td>\n",
       "      <td>8</td>\n",
       "      <td>98007</td>\n",
       "      <td>47.6232</td>\n",
       "      <td>-122.138</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "</div>"
      ],
      "text/plain": [
       "           id       date     price  sqft_living  sqft_lot  waterfront  view  \\\n",
       "0  1446800660 2015-03-16  276500.0         1400      6650       False     0   \n",
       "1  1453601502 2015-02-26  303697.0         2520      7334       False     0   \n",
       "2  9523103990 2014-12-08  611000.0         1850      5000       False     0   \n",
       "3  7308600040 2014-07-23  769995.0         3360     12080       False     0   \n",
       "4  1562200240 2014-09-18  550000.0         2160     15360       False     0   \n",
       "\n",
       "   grade zipcode      lat     long  \n",
       "0      6   98168  47.4888 -122.332  \n",
       "1      7   98125  47.7263 -122.291  \n",
       "2      7   98103  47.6727 -122.351  \n",
       "3      9   98011  47.7757 -122.173  \n",
       "4      8   98007  47.6232 -122.138  "
      ]
     },
     "execution_count": 88,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "sales.head()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 89,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2018-01-15T00:55:24.073661Z",
     "start_time": "2018-01-15T00:55:24.064379Z"
    }
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "id                      int64\n",
       "date           datetime64[ns]\n",
       "price                 float64\n",
       "sqft_living             int64\n",
       "sqft_lot                int64\n",
       "waterfront               bool\n",
       "view                    int64\n",
       "grade                   int64\n",
       "zipcode              category\n",
       "lat                   float64\n",
       "long                  float64\n",
       "dtype: object"
      ]
     },
     "execution_count": 89,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "sales.dtypes"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Plotly "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Plotly is a javascript library with APIs in several languages: Python, R and Matlab. It has a wide range of built-in plot types and works well with the Jupyter Notebook. Plots made using the Python API (or any API) are rendered with Javascript, and are all interactive.\n",
    "\n",
    "Some useful references:\n",
    "\n",
    "- Plotly Python reference home https://plot.ly/python/\n",
    "- Plotly Python introductory user guide https://plot.ly/python/user-guide/\n",
    "- Plotly online Graph Maker https://plot.ly/create/ \n",
    "\n",
    "Plotly was originally designed to work with hosted plots in the cloud, and that is still possible, but it is now also possible to work entirely offline without an account by using the `plotly.offline` module.\n",
    "\n",
    "Cufflinks is a companion library to Plotly that makes it Pandas-aware. It gives it a syntax much like Seaborn's, where DataFrames and column names can be passed to plotting functions.  We won't use Cufflinks today, as more advanced Plotly plots currently aren't possible in Cufflinks syntax. You can learn about it [here](https://plot.ly/ipython-notebooks/cufflinks/)."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Simple interactive plotting"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Here's a simple example of a Plotly plot. Try mouseover on the data to see the hover info, and try out the zoom/pan/select tools in the upper right. Also try clicking on the legend, which is interactive."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 90,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2018-01-15T00:55:27.518001Z",
     "start_time": "2018-01-15T00:55:27.491207Z"
    },
    "scrolled": false
   },
   "outputs": [
    {
     "data": {
      "application/vnd.plotly.v1+json": {
       "data": [
        {
         "line": {
          "color": "blue"
         },
         "mode": "lines",
         "name": "Projected",
         "type": "scatter",
         "x": [
          1,
          2,
          3,
          4,
          5
         ],
         "y": [
          2,
          5,
          10,
          17,
          26
         ]
        },
        {
         "marker": {
          "color": "red",
          "size": 10
         },
         "mode": "markers",
         "name": "Actual",
         "type": "scatter",
         "x": [
          1,
          2,
          3,
          4,
          5
         ],
         "y": [
          1,
          4,
          9,
          11,
          9
         ]
        }
       ],
       "layout": {}
      },
      "text/html": [
       "<div id=\"e32635f3-54b2-455c-9a8e-5ec4c13e882c\" style=\"height: 525px; width: 100%;\" class=\"plotly-graph-div\"></div><script type=\"text/javascript\">require([\"plotly\"], function(Plotly) { window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL=\"https://plot.ly\";Plotly.newPlot(\"e32635f3-54b2-455c-9a8e-5ec4c13e882c\", [{\"type\": \"scatter\", \"x\": [1, 2, 3, 4, 5], \"y\": [2, 5, 10, 17, 26], \"mode\": \"lines\", \"line\": {\"color\": \"blue\"}, \"name\": \"Projected\"}, {\"type\": \"scatter\", \"x\": [1, 2, 3, 4, 5], \"y\": [1, 4, 9, 11, 9], \"mode\": \"markers\", \"marker\": {\"color\": \"red\", \"size\": 10}, \"name\": \"Actual\"}], {}, {\"showLink\": true, \"linkText\": \"Export to plot.ly\"})});</script>"
      ],
      "text/vnd.plotly.v1+html": [
       "<div id=\"e32635f3-54b2-455c-9a8e-5ec4c13e882c\" style=\"height: 525px; width: 100%;\" class=\"plotly-graph-div\"></div><script type=\"text/javascript\">require([\"plotly\"], function(Plotly) { window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL=\"https://plot.ly\";Plotly.newPlot(\"e32635f3-54b2-455c-9a8e-5ec4c13e882c\", [{\"type\": \"scatter\", \"x\": [1, 2, 3, 4, 5], \"y\": [2, 5, 10, 17, 26], \"mode\": \"lines\", \"line\": {\"color\": \"blue\"}, \"name\": \"Projected\"}, {\"type\": \"scatter\", \"x\": [1, 2, 3, 4, 5], \"y\": [1, 4, 9, 11, 9], \"mode\": \"markers\", \"marker\": {\"color\": \"red\", \"size\": 10}, \"name\": \"Actual\"}], {}, {\"showLink\": true, \"linkText\": \"Export to plot.ly\"})});</script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "x = [1,2,3,4,5]\n",
    "y = [2,5,10,17,26]\n",
    "y2 = [1,4,9,11,9]\n",
    "\n",
    "trace0 = go.Scatter(x=x, y=y, mode='lines', \n",
    "                    line=dict(color='blue'),\n",
    "                    name='Projected')\n",
    "\n",
    "trace1 = go.Scatter(x=x, y=y2, mode='markers', \n",
    "                    marker=dict(color='red', size=10),\n",
    "                    name='Actual')\n",
    "\n",
    "iplot([trace0, trace1])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "An individual mapping of data to coordinates in Plotly is called a _trace_. Above, we created a plot specification by making a list of our two traces, and passed it to the `iplot()` function. More generally, the `iplot()` function can take either just data (as above), or a Figure, which incorporates both Data and Layout.\n",
    "\n",
    "Layouts are optional, and specify axis behaviours, titles and labels, annotations, etc. They are also used to manage subplots. \n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 91,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2018-01-15T00:55:46.852405Z",
     "start_time": "2018-01-15T00:55:46.809145Z"
    }
   },
   "outputs": [
    {
     "data": {
      "application/vnd.plotly.v1+json": {
       "data": [
        {
         "line": {
          "color": "blue"
         },
         "mode": "lines",
         "name": "Projected",
         "type": "scatter",
         "x": [
          1,
          2,
          3,
          4,
          5
         ],
         "y": [
          2,
          5,
          10,
          17,
          26
         ]
        },
        {
         "marker": {
          "color": "red",
          "size": 10
         },
         "mode": "markers",
         "name": "Projected",
         "type": "scatter",
         "x": [
          1,
          2,
          3,
          4,
          5
         ],
         "y": [
          1,
          4,
          9,
          11,
          9
         ]
        }
       ],
       "layout": {
        "annotations": [
         {
          "showarrow": true,
          "text": "where it all went wrong",
          "x": 3,
          "y": 10
         }
        ],
        "height": 400,
        "showlegend": true,
        "title": "An example plot",
        "width": 600,
        "xaxis": {
         "range": [
          0,
          6
         ],
         "title": "Month"
        }
       }
      },
      "text/html": [
       "<div id=\"d2909542-e6b5-4402-b646-9aaca929d883\" style=\"height: 400px; width: 600px;\" class=\"plotly-graph-div\"></div><script type=\"text/javascript\">require([\"plotly\"], function(Plotly) { window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL=\"https://plot.ly\";Plotly.newPlot(\"d2909542-e6b5-4402-b646-9aaca929d883\", [{\"type\": \"scatter\", \"x\": [1, 2, 3, 4, 5], \"y\": [2, 5, 10, 17, 26], \"mode\": \"lines\", \"line\": {\"color\": \"blue\"}, \"name\": \"Projected\"}, {\"type\": \"scatter\", \"x\": [1, 2, 3, 4, 5], \"y\": [1, 4, 9, 11, 9], \"mode\": \"markers\", \"marker\": {\"color\": \"red\", \"size\": 10}, \"name\": \"Projected\"}], {\"title\": \"An example plot\", \"width\": 600, \"height\": 400, \"xaxis\": {\"title\": \"Month\", \"range\": [0, 6]}, \"showlegend\": true, \"annotations\": [{\"x\": 3, \"y\": 10, \"text\": \"where it all went wrong\", \"showarrow\": true}]}, {\"showLink\": true, \"linkText\": \"Export to plot.ly\"})});</script>"
      ],
      "text/vnd.plotly.v1+html": [
       "<div id=\"d2909542-e6b5-4402-b646-9aaca929d883\" style=\"height: 400px; width: 600px;\" class=\"plotly-graph-div\"></div><script type=\"text/javascript\">require([\"plotly\"], function(Plotly) { window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL=\"https://plot.ly\";Plotly.newPlot(\"d2909542-e6b5-4402-b646-9aaca929d883\", [{\"type\": \"scatter\", \"x\": [1, 2, 3, 4, 5], \"y\": [2, 5, 10, 17, 26], \"mode\": \"lines\", \"line\": {\"color\": \"blue\"}, \"name\": \"Projected\"}, {\"type\": \"scatter\", \"x\": [1, 2, 3, 4, 5], \"y\": [1, 4, 9, 11, 9], \"mode\": \"markers\", \"marker\": {\"color\": \"red\", \"size\": 10}, \"name\": \"Projected\"}], {\"title\": \"An example plot\", \"width\": 600, \"height\": 400, \"xaxis\": {\"title\": \"Month\", \"range\": [0, 6]}, \"showlegend\": true, \"annotations\": [{\"x\": 3, \"y\": 10, \"text\": \"where it all went wrong\", \"showarrow\": true}]}, {\"showLink\": true, \"linkText\": \"Export to plot.ly\"})});</script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "x = [1,2,3,4,5]\n",
    "y = [2,5,10,17,26]\n",
    "y2 = [1,4,9,11,9]\n",
    "\n",
    "trace0 = go.Scatter(x=x, y=y, mode='lines', \n",
    "                    line=dict(color='blue'),\n",
    "                    name='Projected')\n",
    "\n",
    "trace1 = go.Scatter(x=x, y=y2, mode='markers', \n",
    "                    marker=dict(color='red', size=10),\n",
    "                    name='Projected')\n",
    "\n",
    "layout = go.Layout(title=\"An example plot\",\n",
    "                   width=600, \n",
    "                   height=400,\n",
    "                   xaxis=dict(title='Month', range=[0,6]),\n",
    "                   showlegend=True,\n",
    "                   annotations=[dict(x=3, y=10,\n",
    "                                     text=\"where it all went wrong\", \n",
    "                                     showarrow=True)\n",
    "                               ]\n",
    "                  )\n",
    "\n",
    "fig = go.Figure(data=[trace0, trace1], layout=layout)\n",
    "\n",
    "iplot(fig)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Let's examine this figure object:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 92,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2018-01-15T00:55:52.810910Z",
     "start_time": "2018-01-15T00:55:52.803531Z"
    }
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "{'data': [{'line': {'color': 'blue'},\n",
       "   'mode': 'lines',\n",
       "   'name': 'Projected',\n",
       "   'type': 'scatter',\n",
       "   'x': [1, 2, 3, 4, 5],\n",
       "   'y': [2, 5, 10, 17, 26]},\n",
       "  {'marker': {'color': 'red', 'size': 10},\n",
       "   'mode': 'markers',\n",
       "   'name': 'Projected',\n",
       "   'type': 'scatter',\n",
       "   'x': [1, 2, 3, 4, 5],\n",
       "   'y': [1, 4, 9, 11, 9]}],\n",
       " 'layout': {'annotations': [{'showarrow': True,\n",
       "    'text': 'where it all went wrong',\n",
       "    'x': 3,\n",
       "    'y': 10}],\n",
       "  'height': 400,\n",
       "  'showlegend': True,\n",
       "  'title': 'An example plot',\n",
       "  'width': 600,\n",
       "  'xaxis': {'range': [0, 6], 'title': 'Month'}}}"
      ]
     },
     "execution_count": 92,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "fig"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Our plot is represented by a declarative data structure. It closely parallels the JSON object sent to the Javascript library for rendering. We could have can declared this structure directly without using `plotly.graph_objs`, but the classes give us documentation, error checking, and utility functions."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 93,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2018-01-15T00:55:54.709033Z",
     "start_time": "2018-01-15T00:55:54.693895Z"
    }
   },
   "outputs": [
    {
     "data": {
      "application/vnd.plotly.v1+json": {
       "data": [
        {
         "mode": "lines+markers",
         "type": "scatter",
         "x": [
          0,
          2,
          4,
          6
         ],
         "y": [
          2,
          5,
          5,
          2
         ]
        }
       ],
       "layout": {}
      },
      "text/html": [
       "<div id=\"366fc086-36e0-4101-87e8-0d5a18f22d5c\" style=\"height: 525px; width: 100%;\" class=\"plotly-graph-div\"></div><script type=\"text/javascript\">require([\"plotly\"], function(Plotly) { window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL=\"https://plot.ly\";Plotly.newPlot(\"366fc086-36e0-4101-87e8-0d5a18f22d5c\", [{\"type\": \"scatter\", \"mode\": \"lines+markers\", \"x\": [0, 2, 4, 6], \"y\": [2, 5, 5, 2]}], {}, {\"showLink\": true, \"linkText\": \"Export to plot.ly\"})});</script>"
      ],
      "text/vnd.plotly.v1+html": [
       "<div id=\"366fc086-36e0-4101-87e8-0d5a18f22d5c\" style=\"height: 525px; width: 100%;\" class=\"plotly-graph-div\"></div><script type=\"text/javascript\">require([\"plotly\"], function(Plotly) { window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL=\"https://plot.ly\";Plotly.newPlot(\"366fc086-36e0-4101-87e8-0d5a18f22d5c\", [{\"type\": \"scatter\", \"mode\": \"lines+markers\", \"x\": [0, 2, 4, 6], \"y\": [2, 5, 5, 2]}], {}, {\"showLink\": true, \"linkText\": \"Export to plot.ly\"})});</script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# Plot using only a data structure\n",
    "iplot({'data': [{'type': 'scatter',\n",
    "                 'mode': 'lines+markers',\n",
    "                 'x' : [0,2,4,6],\n",
    "                 'y' : [2,5,5,2]}]})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Plots can be saved to HTML, in which case they retain their interactivity:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2018-01-15T00:24:54.471462Z",
     "start_time": "2018-01-15T00:24:53.102148Z"
    }
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "'file:///Users/clare/Dropbox/LSCC_working/ASPP_viz_workshop/example_plot.html'"
      ]
     },
     "execution_count": 16,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "plot(fig, filename=\"example_plot.html\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Plots can also be exported as images, either using the interactive toolbar on the plot itself, or via the `image` argument to `plot()`."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Exercise:** Recreate, in Plotly, the scatter plot of house sales with x-coordinates given by `longitude` and y-coordinates given by `latitude`. Your plot may work better if you work with a sample of the data, e.g. `sample = sales.sample(4000)`, although it's not critical. You can use `go.Scattergl()` as a drop-in replacement for `go.Scatter()` - this is a WebGL implementation that handles large numbers of points better."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Subplots "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "There are a couple of ways to make subplots in Plotly. A convenient option is `tools.make_subplots()`, a utility function to generate a figure with multiple subplots. We can then attach traces to whichever subplot we like."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 94,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2018-01-15T00:56:37.077617Z",
     "start_time": "2018-01-15T00:56:37.045182Z"
    },
    "scrolled": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "This is the format of your plot grid:\n",
      "[ (1,1) x1,y1 ]\n",
      "[ (2,1) x2,y2 ]\n",
      "\n"
     ]
    },
    {
     "data": {
      "application/vnd.plotly.v1+json": {
       "data": [
        {
         "type": "histogram",
         "x": [
          52,
          41,
          72.2,
          91.35,
          46,
          22.85,
          27,
          45,
          37,
          76.8
         ],
         "xaxis": "x1",
         "yaxis": "y1"
        },
        {
         "marker": {
          "color": [
           "Blue",
           "Blue",
           "Green",
           "Blue",
           "Red",
           "Green",
           "Brown",
           "Green",
           "Purple",
           "Black"
          ],
          "size": 10
         },
         "mode": "markers",
         "type": "scatter",
         "x": [
          52,
          41,
          72.2,
          91.35,
          46,
          22.85,
          27,
          45,
          37,
          76.8
         ],
         "xaxis": "x2",
         "y": [
          40,
          70,
          90,
          100,
          70,
          40,
          20,
          85,
          65,
          55
         ],
         "yaxis": "y2"
        }
       ],
       "layout": {
        "height": 600,
        "showlegend": false,
        "width": 600,
        "xaxis1": {
         "anchor": "y1",
         "domain": [
          0,
          1
         ]
        },
        "xaxis2": {
         "anchor": "y2",
         "domain": [
          0,
          1
         ]
        },
        "yaxis1": {
         "anchor": "x1",
         "domain": [
          0.575,
          1
         ]
        },
        "yaxis2": {
         "anchor": "x2",
         "domain": [
          0,
          0.425
         ]
        }
       }
      },
      "text/html": [
       "<div id=\"88a8063e-e2f5-4ad7-9444-1a109ebc6e24\" style=\"height: 600px; width: 600px;\" class=\"plotly-graph-div\"></div><script type=\"text/javascript\">require([\"plotly\"], function(Plotly) { window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL=\"https://plot.ly\";Plotly.newPlot(\"88a8063e-e2f5-4ad7-9444-1a109ebc6e24\", [{\"type\": \"histogram\", \"x\": [52.0, 41.0, 72.2, 91.35, 46.0, 22.85, 27.0, 45.0, 37.0, 76.8], \"xaxis\": \"x1\", \"yaxis\": \"y1\"}, {\"type\": \"scatter\", \"x\": [52.0, 41.0, 72.2, 91.35, 46.0, 22.85, 27.0, 45.0, 37.0, 76.8], \"y\": [40, 70, 90, 100, 70, 40, 20, 85, 65, 55], \"mode\": \"markers\", \"marker\": {\"size\": 10, \"color\": [\"Blue\", \"Blue\", \"Green\", \"Blue\", \"Red\", \"Green\", \"Brown\", \"Green\", \"Purple\", \"Black\"]}, \"xaxis\": \"x2\", \"yaxis\": \"y2\"}], {\"xaxis1\": {\"domain\": [0.0, 1.0], \"anchor\": \"y1\"}, \"yaxis1\": {\"domain\": [0.575, 1.0], \"anchor\": \"x1\"}, \"xaxis2\": {\"domain\": [0.0, 1.0], \"anchor\": \"y2\"}, \"yaxis2\": {\"domain\": [0.0, 0.425], \"anchor\": \"x2\"}, \"showlegend\": false, \"width\": 600, \"height\": 600}, {\"showLink\": true, \"linkText\": \"Export to plot.ly\"})});</script>"
      ],
      "text/vnd.plotly.v1+html": [
       "<div id=\"88a8063e-e2f5-4ad7-9444-1a109ebc6e24\" style=\"height: 600px; width: 600px;\" class=\"plotly-graph-div\"></div><script type=\"text/javascript\">require([\"plotly\"], function(Plotly) { window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL=\"https://plot.ly\";Plotly.newPlot(\"88a8063e-e2f5-4ad7-9444-1a109ebc6e24\", [{\"type\": \"histogram\", \"x\": [52.0, 41.0, 72.2, 91.35, 46.0, 22.85, 27.0, 45.0, 37.0, 76.8], \"xaxis\": \"x1\", \"yaxis\": \"y1\"}, {\"type\": \"scatter\", \"x\": [52.0, 41.0, 72.2, 91.35, 46.0, 22.85, 27.0, 45.0, 37.0, 76.8], \"y\": [40, 70, 90, 100, 70, 40, 20, 85, 65, 55], \"mode\": \"markers\", \"marker\": {\"size\": 10, \"color\": [\"Blue\", \"Blue\", \"Green\", \"Blue\", \"Red\", \"Green\", \"Brown\", \"Green\", \"Purple\", \"Black\"]}, \"xaxis\": \"x2\", \"yaxis\": \"y2\"}], {\"xaxis1\": {\"domain\": [0.0, 1.0], \"anchor\": \"y1\"}, \"yaxis1\": {\"domain\": [0.575, 1.0], \"anchor\": \"x1\"}, \"xaxis2\": {\"domain\": [0.0, 1.0], \"anchor\": \"y2\"}, \"yaxis2\": {\"domain\": [0.0, 0.425], \"anchor\": \"x2\"}, \"showlegend\": false, \"width\": 600, \"height\": 600}, {\"showLink\": true, \"linkText\": \"Export to plot.ly\"})});</script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "histogram = go.Histogram(x=trains['weight_tons'])\n",
    "scatter = go.Scatter(x=trains['weight_tons'], y=trains['top_speed_mph'], \n",
    "                     mode='markers',\n",
    "                     marker=dict(size=10,\n",
    "                                 color=trains['colour'])\n",
    "                    )\n",
    "\n",
    "# Make figure and attach subplots\n",
    "\n",
    "fig = tools.make_subplots(rows=2, cols=1)\n",
    "\n",
    "fig.append_trace(trace=histogram, row=1, col=1)\n",
    "fig.append_trace(trace=scatter, row=2, col=1)\n",
    "\n",
    "fig.update({'layout': go.Layout(showlegend=False,\n",
    "                                width=600, height=600)})\n",
    "\n",
    "iplot(fig)\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Exercise:** Try adding the argument `shared_xaxes=True` to the `make_subplots()` call above, and observe the pan and zoom behaviour before and after."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "See [here](https://plot.ly/python/subplots/) for more on subplots."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Colour"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "If we want to use colour to show some categorical variable, we draw multiple traces onto one plot:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 95,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2018-01-15T00:56:45.566468Z",
     "start_time": "2018-01-15T00:56:45.523558Z"
    }
   },
   "outputs": [
    {
     "data": {
      "application/vnd.plotly.v1+json": {
       "data": [
        {
         "marker": {
          "size": 10
         },
         "mode": "markers",
         "name": "Tanks",
         "type": "scatter",
         "x": [
          52,
          22.85,
          27,
          37
         ],
         "y": [
          40,
          40,
          20,
          65
         ]
        },
        {
         "marker": {
          "size": 10
         },
         "mode": "markers",
         "name": "Tenders",
         "type": "scatter",
         "x": [
          41,
          72.2,
          91.35,
          46,
          45,
          76.8
         ],
         "y": [
          70,
          90,
          100,
          70,
          85,
          55
         ]
        }
       ],
       "layout": {
        "xaxis": {
         "rangemode": "tozero",
         "title": "Weight"
        },
        "yaxis": {
         "rangemode": "tozero",
         "title": "Top speed"
        }
       }
      },
      "text/html": [
       "<div id=\"9f1d8535-ec0b-4718-89cd-f02e029340d0\" style=\"height: 525px; width: 100%;\" class=\"plotly-graph-div\"></div><script type=\"text/javascript\">require([\"plotly\"], function(Plotly) { window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL=\"https://plot.ly\";Plotly.newPlot(\"9f1d8535-ec0b-4718-89cd-f02e029340d0\", [{\"type\": \"scatter\", \"x\": [52.0, 22.85, 27.0, 37.0], \"y\": [40, 40, 20, 65], \"mode\": \"markers\", \"marker\": {\"size\": 10}, \"name\": \"Tanks\"}, {\"type\": \"scatter\", \"x\": [41.0, 72.2, 91.35, 46.0, 45.0, 76.8], \"y\": [70, 90, 100, 70, 85, 55], \"mode\": \"markers\", \"marker\": {\"size\": 10}, \"name\": \"Tenders\"}], {\"xaxis\": {\"rangemode\": \"tozero\", \"title\": \"Weight\"}, \"yaxis\": {\"rangemode\": \"tozero\", \"title\": \"Top speed\"}}, {\"showLink\": true, \"linkText\": \"Export to plot.ly\"})});</script>"
      ],
      "text/vnd.plotly.v1+html": [
       "<div id=\"9f1d8535-ec0b-4718-89cd-f02e029340d0\" style=\"height: 525px; width: 100%;\" class=\"plotly-graph-div\"></div><script type=\"text/javascript\">require([\"plotly\"], function(Plotly) { window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL=\"https://plot.ly\";Plotly.newPlot(\"9f1d8535-ec0b-4718-89cd-f02e029340d0\", [{\"type\": \"scatter\", \"x\": [52.0, 22.85, 27.0, 37.0], \"y\": [40, 40, 20, 65], \"mode\": \"markers\", \"marker\": {\"size\": 10}, \"name\": \"Tanks\"}, {\"type\": \"scatter\", \"x\": [41.0, 72.2, 91.35, 46.0, 45.0, 76.8], \"y\": [70, 90, 100, 70, 85, 55], \"mode\": \"markers\", \"marker\": {\"size\": 10}, \"name\": \"Tenders\"}], {\"xaxis\": {\"rangemode\": \"tozero\", \"title\": \"Weight\"}, \"yaxis\": {\"rangemode\": \"tozero\", \"title\": \"Top speed\"}}, {\"showLink\": true, \"linkText\": \"Export to plot.ly\"})});</script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# NB we could also loop over groups using `for (label, df) in trains.groupby('engine_type')`\n",
    "\n",
    "tanks_df = trains[trains['engine_type']=='Tank']\n",
    "tenders_df = trains[trains['engine_type']=='Tender']\n",
    "\n",
    "tanks_scatter = go.Scatter(x=tanks_df['weight_tons'], y=tanks_df['top_speed_mph'], \n",
    "                           mode='markers', \n",
    "                           marker=dict(size=10),\n",
    "                           name=\"Tanks\")\n",
    "tenders_scatter = go.Scatter(x=tenders_df['weight_tons'], y=tenders_df['top_speed_mph'], \n",
    "                             mode='markers', \n",
    "                             marker=dict(size=10),\n",
    "                             name=\"Tenders\")\n",
    "\n",
    "layout = go.Layout(xaxis=dict(rangemode='tozero',\n",
    "                              title='Weight'),\n",
    "                   yaxis=dict(rangemode='tozero',\n",
    "                              title='Top speed')\n",
    "                  )\n",
    "\n",
    "fig = go.Figure(data=[tanks_scatter, tenders_scatter], layout=layout)\n",
    "\n",
    "iplot(fig)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Exercise:** Colour your scatter plot of house sales according to whether the property is or is not a waterfront property. You should end up with a legend that you can use to, for example, hide all non-waterfront properties."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "If we want to use colour to map a *continuous* variable, we use the `color` parameter - in this case, to `marker`. Previously, we set the `color` to a single value (like \"red\" or \"blue\"), but we can set it to an array of numbers to colour every point differently."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 96,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2018-01-15T00:56:49.429737Z",
     "start_time": "2018-01-15T00:56:49.407974Z"
    }
   },
   "outputs": [
    {
     "data": {
      "application/vnd.plotly.v1+json": {
       "data": [
        {
         "marker": {
          "cmax": 100,
          "cmin": 0,
          "color": [
           52,
           41,
           72.2,
           91.35,
           46,
           22.85,
           27,
           45,
           37,
           76.8
          ],
          "colorbar": {
           "title": "Weight"
          },
          "colorscale": "Reds",
          "showscale": true,
          "size": 10
         },
         "mode": "markers",
         "name": "Trains",
         "type": "scatter",
         "x": [
          6,
          14,
          18,
          18,
          14,
          4,
          6,
          8,
          6,
          20
         ],
         "y": [
          40,
          70,
          90,
          100,
          70,
          40,
          20,
          85,
          65,
          55
         ]
        }
       ],
       "layout": {
        "xaxis": {
         "rangemode": "tozero",
         "title": "Wheels"
        },
        "yaxis": {
         "rangemode": "tozero",
         "title": "Top speed"
        }
       }
      },
      "text/html": [
       "<div id=\"7e743427-de80-4dee-975b-387119975183\" style=\"height: 525px; width: 100%;\" class=\"plotly-graph-div\"></div><script type=\"text/javascript\">require([\"plotly\"], function(Plotly) { window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL=\"https://plot.ly\";Plotly.newPlot(\"7e743427-de80-4dee-975b-387119975183\", [{\"type\": \"scatter\", \"x\": [6, 14, 18, 18, 14, 4, 6, 8, 6, 20], \"y\": [40, 70, 90, 100, 70, 40, 20, 85, 65, 55], \"mode\": \"markers\", \"marker\": {\"size\": 10, \"color\": [52.0, 41.0, 72.2, 91.35, 46.0, 22.85, 27.0, 45.0, 37.0, 76.8], \"colorscale\": \"Reds\", \"cmin\": 0, \"cmax\": 100, \"showscale\": true, \"colorbar\": {\"title\": \"Weight\"}}, \"name\": \"Trains\"}], {\"xaxis\": {\"rangemode\": \"tozero\", \"title\": \"Wheels\"}, \"yaxis\": {\"rangemode\": \"tozero\", \"title\": \"Top speed\"}}, {\"showLink\": true, \"linkText\": \"Export to plot.ly\"})});</script>"
      ],
      "text/vnd.plotly.v1+html": [
       "<div id=\"7e743427-de80-4dee-975b-387119975183\" style=\"height: 525px; width: 100%;\" class=\"plotly-graph-div\"></div><script type=\"text/javascript\">require([\"plotly\"], function(Plotly) { window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL=\"https://plot.ly\";Plotly.newPlot(\"7e743427-de80-4dee-975b-387119975183\", [{\"type\": \"scatter\", \"x\": [6, 14, 18, 18, 14, 4, 6, 8, 6, 20], \"y\": [40, 70, 90, 100, 70, 40, 20, 85, 65, 55], \"mode\": \"markers\", \"marker\": {\"size\": 10, \"color\": [52.0, 41.0, 72.2, 91.35, 46.0, 22.85, 27.0, 45.0, 37.0, 76.8], \"colorscale\": \"Reds\", \"cmin\": 0, \"cmax\": 100, \"showscale\": true, \"colorbar\": {\"title\": \"Weight\"}}, \"name\": \"Trains\"}], {\"xaxis\": {\"rangemode\": \"tozero\", \"title\": \"Wheels\"}, \"yaxis\": {\"rangemode\": \"tozero\", \"title\": \"Top speed\"}}, {\"showLink\": true, \"linkText\": \"Export to plot.ly\"})});</script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# Speed against wheels, coloured by weight\n",
    "\n",
    "scatter = go.Scatter(x=trains['wheels'], y=trains['top_speed_mph'], \n",
    "                     mode='markers', \n",
    "                     marker=dict(size=10, \n",
    "                                 color=trains['weight_tons'],     # colour by weight\n",
    "                                 colorscale='Reds',               # choose colormap\n",
    "                                 cmin=0, cmax=100,                # map range (default is min wheels to max wheels)\n",
    "                                 showscale=True,                  # display colorbar\n",
    "                                 colorbar=dict(title=\"Weight\")),  # colorbar properties\n",
    "                     name=\"Trains\")\n",
    "\n",
    "layout = go.Layout(xaxis=dict(rangemode='tozero',\n",
    "                              title='Wheels'),\n",
    "                   yaxis=dict(rangemode='tozero',\n",
    "                              title='Top speed'))\n",
    "\n",
    "fig = go.Figure(data=[scatter], layout=layout)\n",
    "\n",
    "iplot(fig)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Exercise:** \n",
    "\n",
    "1. Colour your scatter plot of house sales according to the sale price.\n",
    "2. An example of a logarithmic colour scale is shown [here](https://plot.ly/python/logarithmic-color-scale/). See if you can get your house prices to map to a logarithmic colour scale. (Of course, an easier alternative is just to set the `color` value to the log of the price.) "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Hover text"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true
   },
   "source": [
    "We can set the text to be shown on hover with the `text` attribute:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 97,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2018-01-15T00:56:52.527449Z",
     "start_time": "2018-01-15T00:56:52.507373Z"
    }
   },
   "outputs": [
    {
     "data": {
      "application/vnd.plotly.v1+json": {
       "data": [
        {
         "marker": {
          "size": 10
         },
         "mode": "markers",
         "name": "Trains",
         "text": [
          "Thomas",
          "Edward",
          "Henry",
          "Gordon",
          "James",
          "Percy",
          "Toby",
          "Emily",
          "Rosie",
          "Hiro"
         ],
         "type": "scatter",
         "x": [
          52,
          41,
          72.2,
          91.35,
          46,
          22.85,
          27,
          45,
          37,
          76.8
         ],
         "y": [
          40,
          70,
          90,
          100,
          70,
          40,
          20,
          85,
          65,
          55
         ]
        }
       ],
       "layout": {
        "hovermode": "closest",
        "xaxis": {
         "rangemode": "tozero",
         "title": "Weight"
        },
        "yaxis": {
         "rangemode": "tozero",
         "title": "Top speed"
        }
       }
      },
      "text/html": [
       "<div id=\"b548a21b-542d-433c-9025-cbb8e3a36d8a\" style=\"height: 525px; width: 100%;\" class=\"plotly-graph-div\"></div><script type=\"text/javascript\">require([\"plotly\"], function(Plotly) { window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL=\"https://plot.ly\";Plotly.newPlot(\"b548a21b-542d-433c-9025-cbb8e3a36d8a\", [{\"type\": \"scatter\", \"x\": [52.0, 41.0, 72.2, 91.35, 46.0, 22.85, 27.0, 45.0, 37.0, 76.8], \"y\": [40, 70, 90, 100, 70, 40, 20, 85, 65, 55], \"mode\": \"markers\", \"marker\": {\"size\": 10}, \"text\": [\"Thomas\", \"Edward\", \"Henry\", \"Gordon\", \"James\", \"Percy\", \"Toby\", \"Emily\", \"Rosie\", \"Hiro\"], \"name\": \"Trains\"}], {\"xaxis\": {\"rangemode\": \"tozero\", \"title\": \"Weight\"}, \"yaxis\": {\"rangemode\": \"tozero\", \"title\": \"Top speed\"}, \"hovermode\": \"closest\"}, {\"showLink\": true, \"linkText\": \"Export to plot.ly\"})});</script>"
      ],
      "text/vnd.plotly.v1+html": [
       "<div id=\"b548a21b-542d-433c-9025-cbb8e3a36d8a\" style=\"height: 525px; width: 100%;\" class=\"plotly-graph-div\"></div><script type=\"text/javascript\">require([\"plotly\"], function(Plotly) { window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL=\"https://plot.ly\";Plotly.newPlot(\"b548a21b-542d-433c-9025-cbb8e3a36d8a\", [{\"type\": \"scatter\", \"x\": [52.0, 41.0, 72.2, 91.35, 46.0, 22.85, 27.0, 45.0, 37.0, 76.8], \"y\": [40, 70, 90, 100, 70, 40, 20, 85, 65, 55], \"mode\": \"markers\", \"marker\": {\"size\": 10}, \"text\": [\"Thomas\", \"Edward\", \"Henry\", \"Gordon\", \"James\", \"Percy\", \"Toby\", \"Emily\", \"Rosie\", \"Hiro\"], \"name\": \"Trains\"}], {\"xaxis\": {\"rangemode\": \"tozero\", \"title\": \"Weight\"}, \"yaxis\": {\"rangemode\": \"tozero\", \"title\": \"Top speed\"}, \"hovermode\": \"closest\"}, {\"showLink\": true, \"linkText\": \"Export to plot.ly\"})});</script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "\n",
    "scatter = go.Scatter(x=trains['weight_tons'], y=trains['top_speed_mph'], \n",
    "                     mode='markers', \n",
    "                     marker=dict(size=10),\n",
    "                     text=trains['name'],   # <--\n",
    "                     name=\"Trains\")\n",
    "\n",
    "layout = go.Layout(xaxis=dict(rangemode='tozero',\n",
    "                              title='Weight'),\n",
    "                   yaxis=dict(rangemode='tozero',\n",
    "                              title='Top speed'),\n",
    "                   hovermode=\"closest\")\n",
    "\n",
    "fig = go.Figure(data=[scatter], layout=layout)\n",
    "\n",
    "iplot(fig)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Note we also set `hovermode=\"closest\"` in the layout, so that we will see information for the closest point to the curser. You can switch back with the \"Compare on hover\" option in the plot toolbar - check the difference in behaviour."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Exercise:** \n",
    "* On your scatter plot of house location, set the hover info to display the sale price.\n",
    "* Now try to set the hover info to display the house grade, sale date, and price. This will require some Pandas wrangling."
   ]
  },
  {
   "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.6.4"
  },
  "toc": {
   "colors": {
    "hover_highlight": "#DAA520",
    "running_highlight": "#FF0000",
    "selected_highlight": "#FFD700"
   },
   "moveMenuLeft": true,
   "nav_menu": {
    "height": "138px",
    "width": "252px"
   },
   "navigate_menu": true,
   "number_sections": true,
   "sideBar": true,
   "threshold": 4,
   "toc_cell": false,
   "toc_section_display": "block",
   "toc_window_display": true
  },
  "varInspector": {
   "cols": {
    "lenName": 16,
    "lenType": 16,
    "lenVar": 40
   },
   "kernels_config": {
    "python": {
     "delete_cmd_postfix": "",
     "delete_cmd_prefix": "del ",
     "library": "var_list.py",
     "varRefreshCmd": "print(var_dic_list())"
    },
    "r": {
     "delete_cmd_postfix": ") ",
     "delete_cmd_prefix": "rm(",
     "library": "var_list.r",
     "varRefreshCmd": "cat(var_dic_list()) "
    }
   },
   "types_to_exclude": [
    "module",
    "function",
    "builtin_function_or_method",
    "instance",
    "_Feature"
   ],
   "window_display": false
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}