Turn your notebooks into slideshows

Press Space to proceed.

You can write a regular Jupyter notebook, with the usual mix of markdown and code cells (keep on pressing Space).

In code cells you press Shift-Enter as usual to evaluate your code (but for now press Space again).

In [ ]:
# this is where you press Shift-Enter
import numpy as np
import matplotlib.pyplot as plt
plt.ion()

"Hello world"

But apart from that, Space is your friend!

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).

In [ ]:
# of course you can show figures

def polynom(x):
    return 2 * x**2 - 20 * x + 2

X = np.linspace(-10, 10)
Y = polynom(X)
plt.plot(X, Y);
In [ ]:
# and everything works as usual

# an animation to illustrate 
# translation by variable change
from ipywidgets import interact, FloatSlider

def parabolic(offset):
    X = np.linspace(-10, 10)
    Y = polynom(X-offset)
    # use same y scale for all offsets
    plt.gca().set_ylim([-100, 500])
    plt.plot(X, Y);
    
interact(parabolic, 
         offset=FloatSlider(min=-10., max=10.,
                           step=0.25));

The RISE notebook extension

All this is achieved through the RISE notebook extension.

See full documentation at http://rise.readthedocs.io/.

Thanks to reveal.js

The underlying tool is reveal.js, and it supports a lot of cool features.

For example you can organize your show into:

  • slides (left to right)
  • subslides (top to bottom)
  • fragments (stops inside a slide)

You do not need to worry, just press Space to proceed along the main line.

For example this is a subslide; observe the cursor in the bottom right corner.

If you press Shift-Space - here or anywhere else - you will go backwards, so here it would be up.

Speaker notes

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.

This is an example of a Notes cell.

Next, we'll cover how to tag cells as Slide, SubSlide, Fragment or Notes.

How to create slideshows

Step 1: enable slideshow cell toolbar

Step 2: add appropriate tag to each cell

From the cell toolbar...

or, in command mode, use keyboard shortcuts

  • shift-i : toggle slide
  • shift-b : toggle subslide
  • shift-g : toggle fragment

CSS

2 files are loaded without the need for configuring

  • rise.css in the current directory
  • README.css for this notebook because it is called README.ipynb

If that works then the cell below has a large border width and a big south-east border-radius

In [ ]:
# sample code cell
message = "my look is changed by both rise.css and README.css"

Publishing on binder

In order for a binder-hosted notebook to start in slideshow mode, you need to have the following tag set in the notebook metadata:

...
    "rise": {
        "autolaunch": true
    }
    ...

You can edit the notebook metadata from the edit menu, submenu edit notebook metadata.

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.

Chalkboard

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.

This option is turned on, in the notebook metadata again, with:

...
    "rise": {
      "enable_chalkboard": true
    }
    ...