notebook-examples/rise_slideshow.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "*this notebook works in any Sandbox environments* "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Turn your notebooks into slideshows"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": ""
    }
   },
   "source": [
    "Press `Space` to proceed."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "You can write a regular Jupyter notebook, with the usual mix of markdown and code cells (keep on pressing `Space`)."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "cell_style": "center",
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "In code cells you press `Shift-Enter` as usual to evaluate your code (but for now press `Space` again)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "cell_style": "center",
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "'Hello world'"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# this is where you press Shift-Enter\n",
    "import numpy as np\n",
    "import matplotlib.pyplot as plt\n",
    "plt.ion()\n",
    "\n",
    "\"Hello world\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "But apart from that, `Space` is your friend!"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "You're in a browser, so remember that you can always use smaller / larger fonts with keyboard shortcuts like `Alt +` and `Alt -` or similar (it could be `Ctrl` instead of `Alt` depending on the platform you are on).\n",
    "\n",
    "<div style=\"font-size: 50%\"> ideally, the following 2 cells are shown side-by-side, at least that was the case with the old-school classic notebook</div>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "cell_style": "split",
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [],
   "source": [
    "# of course you can show figures\n",
    "\n",
    "def polynom(x):\n",
    "    return 2 * x**2 - 20 * x + 2\n",
    "\n",
    "X = np.linspace(-10, 10)\n",
    "Y = polynom(X)\n",
    "plt.plot(X, Y);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "cell_style": "split",
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [],
   "source": [
    "# and everything works as usual\n",
    "\n",
    "# an animation to illustrate \n",
    "# translation by variable change\n",
    "from ipywidgets import interact, FloatSlider\n",
    "\n",
    "def parabolic(offset):\n",
    "    X = np.linspace(-10, 10)\n",
    "    Y = polynom(X-offset)\n",
    "    # use same y scale for all offsets\n",
    "    plt.gca().set_ylim([-100, 500])\n",
    "    plt.plot(X, Y);\n",
    "    \n",
    "interact(parabolic, \n",
    "         offset=FloatSlider(min=-10., max=10.,\n",
    "                           step=0.25));"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# The RISE notebook extension"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "All this is achieved through the RISE notebook extension.\n",
    "\n",
    "See full documentation at http://rise.readthedocs.io/."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Thanks to reveal.js"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The underlying tool is [reveal.js](https://revealjs.com/), and it supports a lot of cool features."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "For example you can organize your show into:\n",
    "\n",
    "* slides (left to right)\n",
    "* subslides (top to bottom)\n",
    "* fragments (stops inside a slide)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "You do not need to worry, just press `Space` to proceed along the main line."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "For example this is a subslide; observe the cursor in the bottom right corner."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "If you press `Shift-Space` - here or anywhere else - you will go backwards, so here it would be up."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Speaker notes"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "If you now press `t` you should see a second window open, with a presenter view, that shows *Notes* cells - that won't show up in the main slides."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "notes"
    }
   },
   "source": [
    "This is an example of a *Notes* cell."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": ""
    }
   },
   "source": [
    "Next, we'll cover how to tag cells as *Slide*, *SubSlide*, *Fragment* or *Notes*."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# How to create slideshows"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Step 1: enable slideshow cell toolbar"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "![](slide-toolbar.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "cell_style": "center",
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "### Step 2:  add appropriate tag to each cell"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "cell_style": "split"
   },
   "source": [
    "From the cell toolbar...\n",
    "\n",
    "![](toolbar-options.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "cell_style": "split",
    "slideshow": {
     "slide_type": "-"
    }
   },
   "source": [
    "or, in command mode, use keyboard shortcuts\n",
    "\n",
    "* `shift-i` : toggle slide\n",
    "* `shift-b` : toggle subslide\n",
    "* `shift-g` : toggle fragment"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# CSS"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "notes"
    }
   },
   "source": [
    "2 files are loaded without the need for configuring\n",
    "\n",
    "* `rise.css` in the current directory\n",
    "* `README.css` for this notebook because it is called `README.ipynb`\n",
    "\n",
    "If that works then the cell below has a large border width and a big south-east border-radius"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "-"
    }
   },
   "outputs": [],
   "source": [
    "# sample code cell\n",
    "message = \"my look is changed by both rise.css and README.css\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Publishing on binder"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "In order for a binder-hosted notebook to start in slideshow mode, you need to have the following tag set in the notebook metadata:\n",
    "\n",
    "```javascript        \n",
    "    ...\n",
    "    \"rise\": {\n",
    "        \"autolaunch\": true\n",
    "    }\n",
    "    ...\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "You can edit the notebook metadata from the `edit` menu, submenu `edit notebook metadata`.\n",
    "\n",
    "Note finally that the `rise` key in this json file used to be named `livereveal`. The latter is still honored, but the former takes precedence, and it is recommended to use only `rise` from now on."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Chalkboard"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "As an option, you can turn on the *chalkboard* reveal plugin, that manifests itself with 2 extra buttons in the lower left area, that let you add free drawings on your slides."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This option is turned on, in the notebook metadata again, with:\n",
    "\n",
    "```javascript\n",
    "    ...\n",
    "    \"rise\": {\n",
    "      \"enable_chalkboard\": true\n",
    "    }\n",
    "    ...\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# tables"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Mostly for checking the rendering of tables, here's a few samples"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# first using pandas\n",
    "\n",
    "import seaborn as sns\n",
    "titanic = sns.load_dataset('titanic')\n",
    "columns = \"survived\tpclass\tsex\tage\tembarked\tclass\twho\tadult_male\".split()\n",
    "titanic[columns].head(8)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "and the same but inlined as markdown\n",
    "\n",
    "|    |   survived |   pclass | sex    |   age | embarked   | class   | who   | adult_male   |\n",
    "|---:|-----------:|---------:|:-------|------:|:-----------|:--------|:------|:-------------|\n",
    "|  0 |          0 |        3 | male   |    22 | S          | Third   | man   | True         |\n",
    "|  1 |          1 |        1 | female |    38 | C          | First   | woman | False        |\n",
    "|  2 |          1 |        3 | female |    26 | S          | Third   | woman | False        |\n",
    "|  3 |          1 |        1 | female |    35 | S          | First   | woman | False        |\n",
    "|  4 |          0 |        3 | male   |    35 | S          | Third   | man   | True         |\n",
    "|  5 |          0 |        3 | male   |   nan | Q          | Third   | man   | True         |\n",
    "|  6 |          0 |        1 | male   |    54 | S          | First   | man   | True         |\n",
    "|  7 |          0 |        3 | male   |     2 | S          | Third   | child | False        |\n"
   ]
  }
 ],
 "metadata": {
  "celltoolbar": "Slideshow",
  "jupytext": {
   "formats": "ipynb"
  },
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "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.11.7"
  },
  "rise": {
   "autolaunch": true,
   "enable_chalkboard": true
  },
  "toc": {
   "base_numbering": 1,
   "nav_menu": {},
   "number_sections": true,
   "sideBar": true,
   "skip_h1_title": false,
   "title_cell": "Table of Contents",
   "title_sidebar": "Contents",
   "toc_cell": false,
   "toc_position": {},
   "toc_section_display": true,
   "toc_window_display": false
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}