jupyter-rise-binder-demo_python.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "skip"
    }
   },
   "outputs": [],
   "source": [
    "import numpy as np\n",
    "import pandas as pd\n",
    "import altair as alt\n",
    "alt.renderers.enable('notebook')\n",
    "prop_data = pd.read_csv(\"https://raw.githubusercontent.com/ttimbers/UBC-stat-sample-lesson/master/data/acs_data.csv\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Introduction to Jupyter RISE slides and (my)Binder\n",
    "\n",
    "#### Tiffany A. Timbers, Ph.D.\n",
    "*Instructor, Dept of Statistics & Option Co-Director, Master of Data Science Program*\n",
    "\n",
    "tiffany.timbers@stat.ubc.ca\n",
    "\n",
    "[@TiffanyTimbers](https://twitter.com/TiffanyTimbers)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Technology challenges for teaching Data Science"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "1. You need to share code"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "2. You would like to demonstrate running code"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "3. You would like to intersperse code between concepts and motivation"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "4. You also would like to have nicely formatted equations"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "5. You would like to practice what you preach in regards to reproducibility"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## WYSWYG is not your friend here\n",
    "\n",
    "WYSWYG == what you see is what you get \n",
    "\n",
    "examples: PowerPoint, Keynote, Google slides\n",
    "\n",
    "<img src=\"https://media.giphy.com/media/SwL7d9E6ge2M8/giphy.gif\" align=\"left\">"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## But you have options!\n",
    "\n",
    "<img src=\"https://media.giphy.com/media/Y3l2CbTxVd6oC47Bq5/giphy.gif\" align=\"left\" width=\"400\">"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## The options..."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "- [LaTex Beamer slides](https://www.overleaf.com/learn/latex/Beamer_Presentations:_A_Tutorial_for_Beginners_(Part_1)%E2%80%94Getting_Started)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "- R Markdown slides (e.g., [ioslides](https://garrettgman.github.io/rmarkdown/ioslides_presentation_format.html) or [Xaringan](https://slides.yihui.name/xaringan))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "- [**Jupyter Rise slides**](https://rise.readthedocs.io/en/maint-5.5/)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## [RISE](https://rise.readthedocs.io)\n",
    "\n",
    "[Reveal.js]((https://revealjs.com/#/)) - Jupyter/IPython Slideshow Extension\n",
    "\n",
    "With RISE, a Jupyter notebook extension, you can instantly turn your jupyter notebook into a live reveal.js-based presentation.\n",
    "\n",
    "![](https://rise.readthedocs.io/en/maint-5.5/_images/basic_usage.gif)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Installation\n",
    "\n",
    "Using conda:\n",
    "\n",
    "```conda install -c conda-forge rise```\n",
    "\n",
    "or using pip:\n",
    "\n",
    "```pip install RISE```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Shhhhhhhh, its a secret...\n",
    "\n",
    "...this presentation is a really just a Jupyter notebook that uses RISE. \n",
    "\n",
    "<img src=\"https://media.giphy.com/media/X7PmOX0W7k8IE/giphy.gif\" align=\"left\" width=\"500\">"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Let's remove the curtain and examine the RISE Jupyter extension!"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Example slides"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "### Loading and previewing the datas"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [],
   "source": [
    "prop_data = pd.read_csv(\"https://raw.githubusercontent.com/ttimbers/UBC-stat-sample-lesson/master/data/acs_data.csv\")\n",
    "prop_data.head()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "### Scatter plot using `altair`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [],
   "source": [
    "points = alt.Chart(prop_data).mark_point().encode(\n",
    "    x=alt.X('income', \n",
    "            axis=alt.Axis(format='$f',\n",
    "                          title='Median household income (USD)')),\n",
    "    y=alt.Y('median_property_value', \n",
    "            axis=alt.Axis(format='$', \n",
    "                          title='Median property value (USD)')))\n",
    "points"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "### Linear regression line using `altair`\n",
    "\n",
    "Part 1. get the fitted values for the regression line:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [],
   "source": [
    "lm_fit = pd.DataFrame({'xfit': np.linspace(prop_data['income'].min(), prop_data['income'].max(), 500)})\n",
    "lm_fit['yfit'] = np.poly1d(np.polyfit(prop_data['income'], prop_data['median_property_value'], 1))(lm_fit['xfit'])\n",
    "lm_fit.head()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "### Linear regression line using `altair`\n",
    "\n",
    "Part 2. Make a line chart using the fitted values:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [],
   "source": [
    "lm_line = alt.Chart(lm_fit).mark_line().encode(x='xfit:Q', y='yfit:Q')\n",
    "lm_line"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "### Linear regression line using `altair`\n",
    "\n",
    "Part 3. Combine the two plots:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [],
   "source": [
    "points + lm_line"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "$\\hat{Y} = \\beta_{0} + \\hat{\\beta_{1}} X_{1} + \\varepsilon$"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## RISE gotchas"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "- Limited formatting unless you want to take a deep dive into HTML and/or CSS (e.g., text alignment in Markdown tables)\n",
    "\n",
    "| Jupyter  |  R | Python  | Git  | GitHub  |\n",
    "|---|---|---|---|---|\n",
    "| 😀  | 🤩  | 😉  | 😍  | 🤗   |\n",
    "| Pretty good | Really good | Good | I LOVE | OK, I really LOVE |"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "- Code output formatting sometimes is not what you expect (e.g., Pandas data frames)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [],
   "source": [
    "prop_data.head()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "- **Need Jupyter to edit slides and run the slides...**"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## [(my)Binder](https://mybinder.org/)\n",
    "\n",
    "- Tool to make custom compute environments to share interactive code with others (e.g., Jupyter RISE slides).\n",
    "\n",
    "- Binder is currently housed as a member of Project Jupyter\n",
    "\n",
    "<img src=\"https://mybinder.readthedocs.io/en/latest/_static/logo.png\" align=\"left\" width=\"200\">"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Demo, then the details!\n",
    "\n",
    "Let's add Binder functionality to this repo: https://github.com/ttimbers/jupyter-rise-binder-demo_no_binder\n",
    "\n",
    "We can do this here: https://mybinder.org/"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## First, we need to create a new file!\n",
    "\n",
    "- We need a record of the packages in an expected file in the GitHub repo, `requirements.txt` for example. Here's what this one looks like:\n",
    "\n",
    "```\n",
    "altair==3.0.0\n",
    "pandas==0.24.2\n",
    "numpy==1.16.3\n",
    "rise==5.5.0\n",
    "```\n",
    "\n",
    "*Where did the numbers come from? `pip freeze` in a Jupyter cell will give you all the versions of the Python packages installed on your computer.*"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "**Only list the packages you import in your notebooks, otherwise your compute environment will be slow and heavy... 🐘"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [],
   "source": [
    "pip freeze"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Some details you might now be interested in!\n",
    "\n",
    "Binder sits on top of these 3 technologies:\n",
    "- [JupyterHub](https://z2jh.jupyter.org/), which manages cloud infrastructure for user instances\n",
    "- [repo2docker](https://repo2docker.readthedocs.io/), which builds Docker images from GitHub repositories\n",
    "- [BinderHub](https://binderhub.readthedocs.io/), which orchestrates the above two projects and provides the Binder interface."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Some details you might now be interested in!\n",
    "\n",
    "- You can use both RISE and Binder with other languages! R, for example!\n",
    "- Some examples:\n",
    "    - [Jupyer + R notebook with RISE demo repo](https://github.com/ttimbers/jupyter-rise-binder-demo_r)\n",
    "    - [holepunch R package](https://github.com/karthik/holepunch) - lets you create Binder environments with RStudio server"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Teach Data Science as you do Data Science"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "- Use authentic Data Science tools"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "- Let the students run code and experiment (without barriers)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "- Promote reproducibility by using and teaching with reproducible tools"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Thanks!"
   ]
  }
 ],
 "metadata": {
  "celltoolbar": "Slideshow",
  "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.7.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}