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

ideally, the following 2 cells are shown side-by-side, at least that was the case with the old-school classic notebook

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

tables¶

Mostly for checking the rendering of tables, here's a few samples

In [ ]:

# first using pandas

import seaborn as sns
titanic = sns.load_dataset('titanic')
columns = "survived	pclass	sex	age	embarked	class	who	adult_male".split()
titanic[columns].head(8)

and the same but inlined as markdown

	survived	pclass	sex	age	embarked	class	who	adult_male
0	0	3	male	22	S	Third	man	True
1	1	1	female	38	C	First	woman	False
2	1	3	female	26	S	Third	woman	False
3	1	1	female	35	S	First	woman	False
4	0	3	male	35	S	Third	man	True
5	0	3	male	nan	Q	Third	man	True
6	0	1	male	54	S	First	man	True
7	0	3	male	2	S	Third	child	False

Turn your notebooks into slideshows¶

The RISE notebook extension¶

Thanks to reveal.js¶

Speaker notes¶

How to create slideshows¶

Step 1: enable slideshow cell toolbar¶

Step 2: add appropriate tag to each cell¶

CSS¶

Publishing on binder¶

Chalkboard¶

tables¶