Interactive_tutorial.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "from __future__ import print_function\n",
    "\n",
    "from ipywidgets import interact, interactive, fixed, interact_manual\n",
    "import ipywidgets as widgets\n",
    "import plotly\n",
    "import plotly.graph_objs as go\n",
    "import numpy as np\n",
    "import pandas as pd\n",
    "import numpy.random as rnd\n",
    "import matplotlib.pyplot as plt\n",
    "from IPython.display import display, clear_output, Image"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Interactive Python Plotting with Jupyter\n",
    "## Jupyter Lab is a **much** more flexible version of notebook\n",
    "The lab allows for multiple tabs, easier use of widgets, separate views for output cells, etc\n",
    "\n",
    "## Interactive Plotting\n",
    "In Jupyter labs/notebook, the interactive plotting is done by linking widgets to the plots\n",
    "FYI: The backend up Jupyter is **javascript** - so there is a rapidly building library of javascript based widgets and plotting packages\n",
    "### ipywidgets:\n",
    "- Base documentation: <https://ipywidgets.readthedocs.io>\n",
    "- Widget list: <https://ipywidgets.readthedocs.io/en/stable/examples/Widget%20List.html>\n",
    "\n",
    "### plot.ly:\n",
    "Why Plot.ly?\n",
    "- I prefer plot.ly over other interactive libraries (like Bokeh) mostly for it's ease of use, and the visual style of the plots. Plot.ly was designed for large data in mind, and has many different kinds of plots, **including** Seaborn style plots!\n",
    "- They also have their own web framework (Dash - mentioned below) which makes deploying apps online much easier than bokeh (which requires other things and more fiddling)\n",
    "- Main site: <https://plot.ly/python/> (Note: Plot.ly has libraries for R, Python, (some in Julia), Pandas, Matlab, and Javascript)\n",
    "- 3.0 site: https://github.com/plotly/plotly.py"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Let's get started with a simple example using matplotlib and ipywidgets\n",
    "Generate some data with spread and some kind of 'trend' in logspace"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "#Generate some 'random' data with a trend\n",
    "logx = rnd.uniform(0, 3, 256)\n",
    "logy = 1.2*logx + 0.4 + rnd.normal(0, 1, 256)\n",
    "x = 10**logx; y = 10**logy\n",
    "xline = 10**np.linspace(0, 3, 3)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## How to use ipywidgets - simple form\n",
    "The most straightforward way to use ipywidgets is to use the @interact wrapper\n",
    "You define some function that will have the interactive behavior (such as making a plot)\n",
    "ipywidgets is **smart**: it will generate widgets based on what you pass it! Ints become IntSliders, floats become FloatSliders, True/False are checkboxes, etc\n",
    "\n",
    "Usage:\n",
    "```python\n",
    "@interact(a = ?, b = ?, c = ?)\n",
    "def function(a, b, c):\n",
    "    put stuff in here\n",
    "```"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "b2d48273a44e41689742b46069178e84",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "interactive(children=(FloatSlider(value=1.0, description='m', max=2.0, min=-2.0), FloatSlider(value=1.0, descr…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "@interact(m = (-2, 2, 0.1), b = (0.01, 1, 0.01), t = True)\n",
    "def update_plot(m=1., b=1., t = True):\n",
    "    yline = 10**(m*np.log10(xline) + b)\n",
    "    plt.figure(figsize=(8,8))\n",
    "    plt.loglog(x,y, 'k.')\n",
    "    plt.loglog(xline, yline, 'b-', linewidth=2)\n",
    "    plt.show()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Can also use the interactive() function\n",
    "This form provides a bit more flexibility. You can directly declare specific types of widgets\n",
    "You can customize to override the defaults which are based on the operations, as shown below\n",
    "*Below*:\n",
    "I've changed the @interact with calling the interactive function which works as:\n",
    "interactive(func, widget1, widget2, .... )\n",
    "I've overriden the float slider used for the slope above to force it to be a FloatSlider"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "c0e5069bf9c8430cbdc2c81b50ff192f",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "interactive(children=(FloatSlider(value=0.0, description='m', max=2.0, min=-2.0), FloatSlider(value=1.0, descr…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "def update_plot(m=1., b=1., t = True):\n",
    "    yline = 10**(m*np.log10(xline) + b)\n",
    "    plt.figure(figsize=(8,8))\n",
    "    plt.loglog(x,y, 'k.')\n",
    "    plt.loglog(xline, yline, 'b-', linewidth=2)\n",
    "    plt.show()\n",
    "\n",
    "interactive(update_plot, m = widgets.FloatSlider(min=-2,max=2,step=0.1), b = (0.01, 1, 0.01), t = True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### The slider's backend is entirely in javascript\n",
    "The backend of jupyter is javascript and so are the widgets! Therefore, the values are synched. Change the slider, then check the value. You can use this to sync\n",
    "multiple widgets together if you wish (not shown here)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "50b91939160f4ad4ab47d2758ca302c9",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "IntSlider(value=1, max=10, min=1)"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "test = widgets.IntSlider(min=1, max=10,step=1)\n",
    "test"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "1"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "test.value"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Now on to plot.ly\n",
    "Matplotlib is good for some things, but it is still fairly restrictive and becomes slow for many data points\n",
    "Plot.ly 3.0 introduced a large amount of infrastructure for offline jupyter notebooks. You *can* use the online plot.ly functions - this will host your data on their servers and their plots. From their servers, if you have an account (can do free, academic accounts for students cost 99 USD), you can directly embed them into websites and explore the data on their site.\n",
    "\n",
    "Some good videos discussing the new plot.ly 3.0:  \n",
    "<https://www.youtube.com/watch?v=1ndo6C1KWjI>  \n",
    "<https://www.youtube.com/watch?v=nNrsoSNx8E4>\n",
    "\n",
    "Note: The Enthought site (and youtube in general) have a lot of good videos on interactive python plotting and web-based python apps\n",
    "\n",
    "All of plot.ly images in notebooks start with the go.FigureWidget(). Plot.ly renders things as you add it - meaning you can customize and tweak your plot very easily and it's **fully** reactive!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "FigureWidget({\n",
       "    'data': [{'marker': {'color': 'blue', 'size': 6},\n",
       "              'mode': 'markers',\n",
       "        …"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "f = go.FigureWidget() #Create the figure\n",
    "data = f.add_scattergl(x=x, y=y, mode='markers', marker={'size':6, 'color':'blue'}) # Add in a scatter plot with the data. Notice how everything operates like a dictionary\n",
    "line = f.add_scatter() #Add empty line (for later!)\n",
    "f #Display the plot"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### tab complete + full documentation now!!\n",
    "Below, start with f.add_ and tab. That shows all the kinds of plots that allow you to directly add them with the plot.ly 3.0 formulism\n",
    "Inside of add_trace() try doing shift+tab - full documentation strings! You can use this to figure out what you need"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "f.add_trace()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Plot.ly is reactive - you can modify the plot here and it changes the plot that was displayed above (or in the output view if you made one). No need to re-render the plot!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [],
   "source": [
    "f.layout.xaxis.type = 'log'\n",
    "f.layout.yaxis.type = 'log'"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [],
   "source": [
    "f.layout.xaxis.exponentformat = 'power'\n",
    "f.layout.yaxis.exponentformat = 'power'"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now we can add in the interactive. Remember that empty line trace added above? That comes in handy! You don't have to recreate the trace every time, you recreate the plot.  \n",
    "Just tell plot.ly to change the data within that trace and the properties of the lines.   \n",
    "The use of scattergl over scatter renders things with WebGL making it MUCH faster if you go to hundreds of thousands or millions of points!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "cb3c90d5e3fd466fb7d90bdb58e08dae",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "interactive(children=(FloatSlider(value=1.0, description='m', max=2.0, min=-2.0), FloatSlider(value=1.0, descr…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "@interact(m = (-2, 2, 0.1), b = (0.01, 1, 0.01))\n",
    "def update_plot(m=1., b=1.):\n",
    "    yline = 10**(m*np.log10(xline) + b)\n",
    "    line.x = xline\n",
    "    line.y = yline\n",
    "    line.mode = 'lines'\n",
    "    line.line.color = 'magenta'\n",
    "    line.line.width = 3"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Another strong example of the reactive nature of plot.ly is you can color the points after you plot them. You don't have to recreate the trace or anything. Just access the marker property of the trace and set the color, colorscale, etc. Again, try doing tab complete on things. You can also pass a bad colormap and it will tell you the allowed choices - rather than just a vague error"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [],
   "source": [
    "z = x**(-0.1)\n",
    "z += rnd.normal(0, 0.01, len(z))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [],
   "source": [
    "data.marker.color = z\n",
    "data.marker.colorscale = 'Viridis'\n",
    "data.marker.reversescale = True"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Color is nice...but what about other information?? Add in hover text!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {},
   "outputs": [],
   "source": [
    "data.hoverinfo = 'text'\n",
    "data.hovertext = z.astype('str')\n",
    "f.layout.hovermode = 'closest'"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {},
   "outputs": [],
   "source": [
    "f.layout.width = 600\n",
    "f.layout.height = 600\n",
    "f.layout.xaxis.title = \"X\"\n",
    "f.layout.yaxis.title = \"Y\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Building a Jupyter dashboard with **real** data!\n",
    "I will use a subset of the Hypatia catalog <http://www.hypatiacatalog.com>, which has the metal abundances and properties of thousands of stars along with information on exo-planets, etc.\n",
    "Use pandas to read in the csv file generated from their website"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "['f_hip', 'f_hd', 'f_2mass', 'Fe', 'C', 'O', 'Mg', 'Si', 'Ca', 'Ti', 'Li', 'N', 'F', 'Na', 'Al', 'P', 'K', 'Co', 'Ni', 'Cu', 'Zn', 'Be', 'S', 'f_ra', 'f_dec', 'f_x', 'f_y', 'f_z', 'f_dist', 'f_disk', 'f_spec', 'f_vmag', 'f_bv', 'f_u', 'f_v', 'f_w', 'f_teff', 'f_logg', 'f_mass', 'f_name', 'f_p', 'f_m_p', 'f_e', 'f_a', 'Unnamed: 44']\n"
     ]
    }
   ],
   "source": [
    "df = pd.read_csv('hypatia-11092018.csv')\n",
    "print(list(df))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Let's do a quick plot of the data so we know what we're working with.   \n",
    "Notice, we can make the hover text the spectral type of the star!  \n",
    "Then, we can colorcode the points by their distance. This gives us a good idea what we might want a dashboard to look like"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "d49960b782ad4d379d1d39211a5294b0",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "FigureWidget({\n",
       "    'data': [{'hoverinfo': 'text',\n",
       "              'hovertext': array(['K1III ', 'K0 ', 'K0 ', ..…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "f2 = go.FigureWidget()\n",
    "data = f2.add_scattergl(x = df['C'], y = df['O'], mode = 'markers', hoverinfo = 'text', hovertext = df['f_spec'])\n",
    "f2"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 17,
   "metadata": {},
   "outputs": [],
   "source": [
    "f2.layout.xaxis.title = '[C/Fe]'\n",
    "f2.layout.yaxis.title = '[O/Fe]'\n",
    "f2.layout.width = 600\n",
    "f2.layout.height = 600"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {},
   "outputs": [],
   "source": [
    "data.marker.color = df['f_dist']\n",
    "data.marker.colorscale = 'Blackbody'"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Create a new pandas column - only care about the general spectral type  \n",
    "Then just make a quick dict (for the dashboard)  \n",
    "**Note**: The dashboard shown below was made over ~45 minutes of fiddling with things to make it look as I want, etc. In general, once you're used to doing this, it takes about 10-15 minutes to do this.  \n",
    "\n",
    "**Why do this?** The typical thing to do is to make these plots and just replot things to find and explore the trends. Here, you can change what you're plotting, how you're coloring it, filting out the data, all at once to explore the data and make the \"random\" plotting more viable."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 19,
   "metadata": {},
   "outputs": [],
   "source": [
    "df['GenType'] = df['f_spec'].astype(str).str[0]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 20,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "{'K': 4, 'M': 1, 'F': 2, 'G': 3}\n"
     ]
    }
   ],
   "source": [
    "typeDict = {g.upper():i for (i,g) in enumerate(df['GenType'].unique())}\n",
    "print(typeDict)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## The Strength of ipywidgets  \n",
    "Here we make all the widgets we think we might want. Maybe there's a trend with spectral type? Or with specific elements? Maybe there's a distance effect?  \n",
    "Below we make 5 widgets and a \"label\". The widget information is entirely accessed through the \"value\" tag! First we make all the widgets - no need to display them yet.  \n",
    "The dashboard won't use interact or interactive - instead we'll make the function to plot, and then force the widgets to \"listen\" to changes and **react**  "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 21,
   "metadata": {},
   "outputs": [],
   "source": [
    "eles = ['Fe', 'C', 'O', 'Mg', 'Si', 'Ca', 'Ti', 'Li', 'N', 'F', 'Na', 'Al', 'P', 'K', 'Co', 'Ni', 'Cu', 'Zn', 'Be', 'S']\n",
    "typeDrop = widgets.SelectMultiple(options=list(typeDict.keys()), value=list(typeDict.keys()), description=\"Spectral Type\")\n",
    "ele1Drop = widgets.Dropdown(options=eles,value='C', description=\"X\")\n",
    "ele2Drop = widgets.Dropdown(options=eles, value='O', description=\"Y\")\n",
    "distRange = widgets.FloatRangeSlider(min=df['f_dist'].min(), max=df['f_dist'].max(), description=\"Distance Range\")\n",
    "colorPick = widgets.Dropdown(options=['f_dist', 'f_vmag', 'f_bv', 'f_teff', 'f_logg', 'f_mass'], value='f_dist')\n",
    "label = widgets.Label(value=\"Number of Objects: \")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Make the plot.ly figure and add the kinds of data we want. I added in a 2d histogram contour since after playing with it I thought \"Hey, sometimes there's thousands of points here, let's make the plot more informative and histogram it up!\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 22,
   "metadata": {},
   "outputs": [],
   "source": [
    "f3 = go.FigureWidget()\n",
    "f3.layout.width = 500\n",
    "f3.layout.height = 500"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 23,
   "metadata": {},
   "outputs": [],
   "source": [
    "hscat = f3.add_scattergl()\n",
    "hcont = f3.add_histogram2dcontour()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 24,
   "metadata": {},
   "outputs": [],
   "source": [
    "hscat.mode = 'markers'"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This is the meat of the interactive plotting. It's a function that tell's the widgets HOW to respond to a change. I made this one function, but there's no restrictions. Different widgets can respond with different functions. However, at least for ipywidgets - only 1 response function per widget. (You cannot make a function react with 2+ functions on a response) \n",
    "\n",
    "### I have my function, how what? \n",
    "First: The \"change\" function isn't used here. I haven't really ever seen it used - but it basically just stores information on the past values and current value.  \n",
    "Once you have your function(s), you make them respond with:\n",
    "```python\n",
    "WIDGET.observe(func, names = variable)\n",
    "```\n",
    "the variable here is \"value\", this is probably what you will use. I never saw any examples of the other possibilities used.  \n",
    "And that's it! Well, now you have to make them visible...."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 25,
   "metadata": {},
   "outputs": [],
   "source": [
    "def update_plot(change):\n",
    "    filtLow = df['f_dist'] >= distRange.value[0]\n",
    "    filtHigh= df['f_dist'] <= distRange.value[1]\n",
    "    filt = filtLow & filtHigh\n",
    "    typeFilt = df['GenType'] == typeDrop.value[0]\n",
    "    if len(typeDrop.value) > 1:\n",
    "        for e in typeDrop.value[1:]:\n",
    "            typeFilt = typeFilt | (df['GenType'] == e)\n",
    "    totalFilt = filt & typeFilt\n",
    "    tf = df[totalFilt]\n",
    "    hscat.x = tf[ele1Drop.value]\n",
    "    hscat.y = tf[ele2Drop.value]\n",
    "    if len(tf) > 100:\n",
    "        hcont.x = tf[ele1Drop.value]\n",
    "        hcont.y = tf[ele2Drop.value]\n",
    "        hscat.marker.opacity = 0.45\n",
    "        hscat.marker.size = 4\n",
    "    else:\n",
    "        hcont.x = None\n",
    "        hcont.y = None\n",
    "    hcont.colorscale = 'Greys'\n",
    "    hcont.reversescale = True\n",
    "    hscat.marker.color = tf[colorPick.value]\n",
    "    hscat.marker.colorscale = 'Viridis'\n",
    "    hscat.hoverinfo = 'text'\n",
    "    hscat.hovertext = tf['f_spec']\n",
    "    label.value = \"Number of Objects: %d\"%(len(tf))\n",
    "    f3.layout.xaxis.title = \"[%s/H]\"%ele1Drop.value\n",
    "    f3.layout.yaxis.title = \"[%s/H]\"%ele2Drop.value\n",
    "    \n",
    "typeDrop.observe(update_plot, names='value')\n",
    "ele1Drop.observe(update_plot, names='value')\n",
    "ele2Drop.observe(update_plot, names='value')\n",
    "distRange.observe(update_plot, names='value')\n",
    "colorPick.observe(update_plot, names='value')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "A cool thing ipywidgets have is VBoxes and HBoxes. This means you can create dashboards (you can do this entirely within plot.ly using their online paid service btw)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 26,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "d4fc7dc8937e475988c2ec09390c871f",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "VBox(children=(HBox(children=(SelectMultiple(description='Spectral Type', index=(0, 1, 2, 3), options=('K', 'M…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.VBox([widgets.HBox([typeDrop, distRange]), widgets.HBox([ele1Drop, ele2Drop, colorPick]), label, f3])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 27,
   "metadata": {},
   "outputs": [],
   "source": [
    "f3.layout.width= 750\n",
    "f3.layout.height = 550"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Onto Dash\n",
    "Dash is plot.ly's framework for making web applications. It's fairly intuitive to use, but it can take time basically to make it look how you want.\n",
    "No time to go into it! However:  \n",
    "<https://dash.plot.ly/>  \n",
    "<https://www.youtube.com/watch?v=sea2K4AuPOk>  \n",
    "\n",
    "I've used this for a couple of web applications:  \n",
    "<http://crgen.brandt-gaches.space>  \n",
    "<http://protostarcrs.brandt-gaches.space>  \n",
    "\n",
    "## Dash + heroku  \n",
    "I deploy my apps on Heroku. The backend up Dash is called flask, and Heroku works very well with that  \n",
    "<http://www.heroku.com>  \n",
    "You can have a **free** account, although data is limited and the \"gyros\" you use are limited (you have a certain amount of hours a month free and they go inactive after 30 minutes on no use). Student accounts through github get a free \"Hobby\" gyro.\n",
    "\n",
    "## Ask me more if you want to know more about this! \n",
    "\n",
    "# Aside: Jupyter cell magics!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 28,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/json": {
       "cell": {
        "!": "OSMagics",
        "HTML": "Other",
        "SVG": "Other",
        "bash": "Other",
        "capture": "ExecutionMagics",
        "cmd": "Other",
        "debug": "ExecutionMagics",
        "file": "Other",
        "html": "DisplayMagics",
        "javascript": "DisplayMagics",
        "js": "DisplayMagics",
        "latex": "DisplayMagics",
        "markdown": "DisplayMagics",
        "perl": "Other",
        "prun": "ExecutionMagics",
        "pypy": "Other",
        "python": "Other",
        "python2": "Other",
        "python3": "Other",
        "ruby": "Other",
        "script": "ScriptMagics",
        "sh": "Other",
        "svg": "DisplayMagics",
        "sx": "OSMagics",
        "system": "OSMagics",
        "time": "ExecutionMagics",
        "timeit": "ExecutionMagics",
        "writefile": "OSMagics"
       },
       "line": {
        "alias": "OSMagics",
        "alias_magic": "BasicMagics",
        "autoawait": "AsyncMagics",
        "autocall": "AutoMagics",
        "automagic": "AutoMagics",
        "autosave": "KernelMagics",
        "bookmark": "OSMagics",
        "cd": "OSMagics",
        "clear": "KernelMagics",
        "cls": "KernelMagics",
        "colors": "BasicMagics",
        "config": "ConfigMagics",
        "connect_info": "KernelMagics",
        "copy": "Other",
        "ddir": "Other",
        "debug": "ExecutionMagics",
        "dhist": "OSMagics",
        "dirs": "OSMagics",
        "doctest_mode": "BasicMagics",
        "echo": "Other",
        "ed": "Other",
        "edit": "KernelMagics",
        "env": "OSMagics",
        "gui": "BasicMagics",
        "hist": "Other",
        "history": "HistoryMagics",
        "killbgscripts": "ScriptMagics",
        "ldir": "Other",
        "less": "KernelMagics",
        "load": "CodeMagics",
        "load_ext": "ExtensionMagics",
        "loadpy": "CodeMagics",
        "logoff": "LoggingMagics",
        "logon": "LoggingMagics",
        "logstart": "LoggingMagics",
        "logstate": "LoggingMagics",
        "logstop": "LoggingMagics",
        "ls": "Other",
        "lsmagic": "BasicMagics",
        "macro": "ExecutionMagics",
        "magic": "BasicMagics",
        "matplotlib": "PylabMagics",
        "mkdir": "Other",
        "more": "KernelMagics",
        "notebook": "BasicMagics",
        "page": "BasicMagics",
        "pastebin": "CodeMagics",
        "pdb": "ExecutionMagics",
        "pdef": "NamespaceMagics",
        "pdoc": "NamespaceMagics",
        "pfile": "NamespaceMagics",
        "pinfo": "NamespaceMagics",
        "pinfo2": "NamespaceMagics",
        "pip": "BasicMagics",
        "popd": "OSMagics",
        "pprint": "BasicMagics",
        "precision": "BasicMagics",
        "prun": "ExecutionMagics",
        "psearch": "NamespaceMagics",
        "psource": "NamespaceMagics",
        "pushd": "OSMagics",
        "pwd": "OSMagics",
        "pycat": "OSMagics",
        "pylab": "PylabMagics",
        "qtconsole": "KernelMagics",
        "quickref": "BasicMagics",
        "recall": "HistoryMagics",
        "rehashx": "OSMagics",
        "reload_ext": "ExtensionMagics",
        "ren": "Other",
        "rep": "Other",
        "rerun": "HistoryMagics",
        "reset": "NamespaceMagics",
        "reset_selective": "NamespaceMagics",
        "rmdir": "Other",
        "run": "ExecutionMagics",
        "save": "CodeMagics",
        "sc": "OSMagics",
        "set_env": "OSMagics",
        "store": "StoreMagics",
        "sx": "OSMagics",
        "system": "OSMagics",
        "tb": "ExecutionMagics",
        "time": "ExecutionMagics",
        "timeit": "ExecutionMagics",
        "unalias": "OSMagics",
        "unload_ext": "ExtensionMagics",
        "who": "NamespaceMagics",
        "who_ls": "NamespaceMagics",
        "whos": "NamespaceMagics",
        "xdel": "NamespaceMagics",
        "xmode": "BasicMagics"
       }
      },
      "text/plain": [
       "Available line magics:\n",
       "%alias  %alias_magic  %autoawait  %autocall  %automagic  %autosave  %bookmark  %cd  %clear  %cls  %colors  %config  %connect_info  %copy  %ddir  %debug  %dhist  %dirs  %doctest_mode  %echo  %ed  %edit  %env  %gui  %hist  %history  %killbgscripts  %ldir  %less  %load  %load_ext  %loadpy  %logoff  %logon  %logstart  %logstate  %logstop  %ls  %lsmagic  %macro  %magic  %matplotlib  %mkdir  %more  %notebook  %page  %pastebin  %pdb  %pdef  %pdoc  %pfile  %pinfo  %pinfo2  %popd  %pprint  %precision  %prun  %psearch  %psource  %pushd  %pwd  %pycat  %pylab  %qtconsole  %quickref  %recall  %rehashx  %reload_ext  %ren  %rep  %rerun  %reset  %reset_selective  %rmdir  %run  %save  %sc  %set_env  %store  %sx  %system  %tb  %time  %timeit  %unalias  %unload_ext  %who  %who_ls  %whos  %xdel  %xmode\n",
       "\n",
       "Available cell magics:\n",
       "%%!  %%HTML  %%SVG  %%bash  %%capture  %%cmd  %%debug  %%file  %%html  %%javascript  %%js  %%latex  %%markdown  %%perl  %%prun  %%pypy  %%python  %%python2  %%python3  %%ruby  %%script  %%sh  %%svg  %%sx  %%system  %%time  %%timeit  %%writefile\n",
       "\n",
       "Automagic is ON, % prefix IS NOT needed for line magics."
      ]
     },
     "execution_count": 28,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "%lsmagic"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "For instance, can do latex entirely in the cell!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 30,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/latex": [
       "$x^2$\n",
       "\\begin{equation}\n",
       "\\frac{\\partial \\rho}{\\partial t} + \\nabla \\cdot \\left ( \\rho \\vec{v} \\right ) = 0\n",
       "\\end{equation}\n"
      ],
      "text/plain": [
       "<IPython.core.display.Latex object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%latex\n",
    "$x^2$\n",
    "\\begin{equation}\n",
    "\\frac{\\partial \\rho}{\\partial t} + \\nabla \\cdot \\left ( \\rho \\vec{v} \\right ) = 0\n",
    "\\end{equation}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Aside : Selection of Points\n",
    "### Shamelessly adapted from <https://github.com/jonmmease/plotly_ipywidget_notebooks>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 54,
   "metadata": {},
   "outputs": [],
   "source": [
    "from plotly.callbacks import Points\n",
    "f5 = go.FigureWidget()\n",
    "data1 = f5.add_scattergl(x = x, y = y, mode = 'markers')\n",
    "f6 = go.FigureWidget()\n",
    "data2 = f6.add_scattergl(x=x, y=z, mode='markers')\n",
    "\n",
    "selected = np.zeros(x.size)\n",
    "data1.marker.color = selected\n",
    "data1.marker.colorscale = [[0, 'lightgray'], [0.5, 'lightgray'], [0.5, 'red'], [1, 'red']]\n",
    "data2.marker = data1.marker\n",
    "\n",
    "trace, points = data1, Points()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 59,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Configure brush on both plots to update both plots\n",
    "def brush(trace, points, state):\n",
    "    inds = np.array(points.point_inds)\n",
    "    if inds.size:\n",
    "        selected = data1.marker.color.copy()\n",
    "        selected[inds] = 1\n",
    "        data1.marker.color = selected\n",
    "        data2.marker.color = selected    \n",
    "    \n",
    "data1.on_selection(brush)\n",
    "data2.on_selection(brush)\n",
    "\n",
    "# Reset brush\n",
    "def reset_brush(btn):\n",
    "    selected = np.zeros(x.size)\n",
    "    data1.marker.color = selected\n",
    "    data2.marker.color = selected\n",
    "    data1.marker.opacity = data2.marker.opacity"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 60,
   "metadata": {},
   "outputs": [],
   "source": [
    "button = widgets.Button(description=\"clear\")\n",
    "button.on_click(reset_brush)\n",
    "f5.layout.dragmode = 'lasso'\n",
    "f6.layout.dragmode = 'lasso'"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 57,
   "metadata": {},
   "outputs": [],
   "source": [
    "f5.layout.xaxis.type = 'log'\n",
    "f5.layout.yaxis.type = 'log'"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 61,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "a76b2a93269b4ffca281915365fccaca",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "VBox(children=(HBox(children=(FigureWidget({\n",
       "    'data': [{'marker': {'color': array([0., 0., 0., ..., 0., 0.,…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "widgets.VBox([widgets.HBox([f5, f6]), button])"
   ]
  },
  {
   "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.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}