Online_Notebooks-Bqplot.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# How to create an interactive Jupyuter Notebook (using Bqplot) and share it online\n",
    "\n",
    "## Example: Manual calibration of a sine curve\n",
    "In this example we are going to try to calibrate a sine curve to imitate a recorded sound wave."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Libraries\n",
    "import numpy as np\n",
    "from bqplot import pyplot as plt\n",
    "import ipywidgets as widgets\n",
    "# Sub-modules\n",
    "from sound_wave import sound_wave"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<left><img src=\"Images/Standing_wave.gif\" width=\"400px\">\n",
    "\n",
    "A sound wave can be represented as a sine curve with a certain amplitude, phase and frequency using the following equation:\n",
    "\n",
    "$y(x) = A \\sin(2 \\pi(\\nu x + \\phi ))$\n",
    "\n",
    "where\n",
    "\n",
    "$A = amplitude$\n",
    "\n",
    "$\\phi = phase$\n",
    "\n",
    "$\\nu = frequency$"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [],
   "source": [
    "# First I define the observed sound wave that I want to \n",
    "xk,yk = sound_wave()\n",
    "\n",
    "x = np.linspace(0,1,500) # x axis from 0 to 1 with a 1/500 step"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now using the sliders you can change the values of amplitude, phase and frequency trying to better fit the sine curve in blue to the sound wave in black (that is, to achieve RMSE = 0)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "22253cea0d4242dfbfd2bb8c22c14121",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "VBox(children=(FloatSlider(value=8.0, continuous_update=False, description='Amplitude: ', max=15.0, min=1.0), …"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# Function to update the sine curve when changing the parameters with the sliders\n",
    "def update_sine_curve(x,amp,freq,phase):\n",
    "    sine_curve = amp * np.sin(2 * np.pi * (freq * x + phase))\n",
    "    RMSE = np.sqrt(((sine_curve - yk) ** 2).mean())\n",
    "    return sine_curve,RMSE\n",
    "\n",
    "# Function to update the figure when changing the parameters with the sliders\n",
    "def update_figure(change):\n",
    "    sine_curve.y = update_sine_curve(x,amp.value,freq.value,phase.value)[0]\n",
    "    RMSE = update_sine_curve(x,amp.value,freq.value,phase.value)[1]\n",
    "    if RMSE == 0:\n",
    "        fig.title = 'RMSE = ' +str(\"%.2f\" % RMSE)+' Well done!!!'\n",
    "    else:\n",
    "        fig.title = 'RMSE = ' +str(\"%.2f\" % RMSE)\n",
    "\n",
    "# Definition of the sliders\n",
    "amp = widgets.FloatSlider(min=1,\n",
    "                          max=15,\n",
    "                          value=8, \n",
    "                          description = 'Amplitude: ',\n",
    "                          continuous_update=False)\n",
    "amp.observe(update_figure,'value')\n",
    "phase = widgets.FloatSlider(min=0,\n",
    "                            max=1,\n",
    "                            value=0.5, \n",
    "                            description = 'Phase: ',\n",
    "                            continuous_update=False)\n",
    "phase.observe(update_figure,'value')\n",
    "freq = widgets.FloatSlider(min=1,\n",
    "                           max=10,\n",
    "                           value=5.5, \n",
    "                           description = 'Frequency: ',\n",
    "                           continuous_update=False)\n",
    "freq.observe(update_figure,'value')\n",
    "\n",
    "### Figure ###\n",
    "# First, let's create a scale for the x attribute, and a scale for the y attribute\n",
    "x_sc = plt.LinearScale(min=0,max=1)\n",
    "y_sc = plt.LinearScale(min=-20,max=20)\n",
    "# Then we can define some of the features of the plot axes such as their labels.\n",
    "x_ax = plt.Axis(label='x', scale=x_sc)\n",
    "y_ax = plt.Axis(label='y', scale=y_sc, orientation='vertical')\n",
    "fig = plt.figure(scales={'x': x_sc, 'y': y_sc}, axes=[x_ax, y_ax], \n",
    "                   title = 'RMSE = '+str(\"%.2f\" % update_sine_curve(x,amp.value,freq.value,phase.value)[1]), \n",
    "                   layout={'min_width': '900px', 'max_height': '300px'}, animation_duration = 1000)\n",
    "sine_curve = plt.plot(x,update_sine_curve(x,amp.value,freq.value,phase.value)[0])\n",
    "plt.plot(xk,yk,'k')\n",
    "sine_curve.observe(update_figure, ['x', 'y'])\n",
    "widgets.VBox([amp, freq, phase,fig])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## How to share this Notebook online\n",
    "Threre are many options to share your Jupyter Notebooks online but here we present only three of them.\n",
    "\n",
    "### Option 1: GitHub + MyBinder\n",
    "#### Step 1 \n",
    "You need to have GitHub account. If you don't, you can easily create one on https://github.com/\n",
    "\n",
    "#### Step 2\n",
    "Create a repository and name it, e.g. \"Sharing-Notebooks-Online\". If you'd like a different name, feel free to name it something else; just keep in mind that we will use this repo name in later parts of the tutorial. Make sure that you select the checkbox **\"Initialize this repository with a README\"**\n",
    "\n",
    "#### Step 3 (only necessary if you will use the Option 2: Stand alone webpage)\n",
    "Once you are inside of this repository click on **Settings**, scroll down to the GitHub Pages section, and select the master branch as the GitHub pages source\n",
    "\n",
    "<left><img src=\"Images/GitHub.gif\" width=\"800px\">\n",
    "\n",
    "#### Step 4\n",
    "When you are again inside of the repository click on **\"Upload files\"** and then choose all the files and subfolder contained in the zip file \"Sharing-Notebooks-Online-master.zip\"\n",
    "\n",
    "**Comment:** You need a txt file (**requirements.txt**) listing all the libraries required, i.e. create the environment, in this case it looks like this:\n",
    "\n",
    "numpy\n",
    "\n",
    "ipywidgets\n",
    "\n",
    "bqplot\n",
    "\n",
    "This file must be in the same folder where our Notebook is.\n",
    "\n",
    "#### Step 5\n",
    "Copy the URL of the repository that you just created on GitHub and go to https://mybinder.org\n",
    "\n",
    "#### Step 6\n",
    "Paste the URL where indicated, copy the URL where it says: **\"Copy the URL below and share your Binder with others:\"** and click on **\"launch\"**\n",
    "\n",
    "<left><img src=\"Images/MyBinder.gif\" width=\"800px\">\n",
    "    \n",
    "In a few seconds your Notebook will be available in an executable environment, making your code and figures immediately reproducible by anyone, anywhere, you just need to share the URL generated by MyBinder (Step 5)."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Option 2: Stand alone webpage\n",
    "For this option you need to follow all the steps in **Option 1** and make sure that you did **Step 3**\n",
    "\n",
    "**Step 7**\n",
    "Once you are inside of you repository on MyBinder click on New -> Terminal. This should open a terminal prompt. Run the following commands:\n",
    "pip install nbinteract\n",
    "\n",
    ">nbinteract init\n",
    "\n",
    ">git config --global user.email \"you@example.com\"\n",
    "\n",
    ">git config --global user.name \"Your username\"\n",
    "\n",
    ">nbinteract Online_Notebooks.ipynb\n",
    "\n",
    ">git add -A\n",
    "\n",
    ">git commit -m \"Publish nb\"\n",
    "\n",
    ">git push origin master\n",
    "\n",
    "Now you will be able to share your Notebook as an interactive html with this URL:\n",
    "\n",
    "https://username.github.io/Sharing-Notebooks-Online/Online_Notebooks.html\n",
    "\n",
    "Where **username** is replaced with your GitHub username. For example:\n",
    "\n",
    "https://andrespenuela.github.io/Sharing-Notebooks-Online/Online_Notebooks.html"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Option 3: Microsoft Azure Notebooks\n",
    "This is a very straight forward way to share your Notebooks. With this option you don't even need a GitHub account. You just to need to create a [Microsof Azure Notebooks acount](https://notebooks.azure.com). It is free but as the website says: **\"Currently the service itself is free. This may change in the future, but we hope to always have a free tier available\"**\n",
    "\n",
    "You can upload your Notebooks either from your computer or from GitHub. Once they are uploaded you just need to copy the URL of the repository and share it. For example:\n",
    "https://notebooks.azure.com/AndresPenuela/projects/sharing-notebooks-online\n"
   ]
  },
  {
   "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.5"
  },
  "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
}