IPython notebook reveal-based slideshows.

Damián Avila

@damian_avila

Use the right arrow in you keyboard to go to the next slide.

Intro...

The aim of this converter is to easily get html5/css-based slideshows directly from IPython notebook.

This converter was recently merged in the nbconvert repository.

In this slideshow, we will show you all the power behind this presentation framework...

So... are you ready?!

Here we go...

What do you need?

You will need:

IPython Slideshow UI

Just go for

$ipython notebook

in you terminal.

Open a new notebook (or a previous one) and you will see the IPython toolbar containing a new Cell Toolbar drowdown menu that give you access to metadata for each cell.

If you select the Slideshow preset, you will see in the right corner of each cell the following labels:

  • -
  • Slide
  • Sub-Slide
  • Fragment
  • Skip
  • Notes

Slides

  • Slides are just slides, they are horizontally aligned... you have seen them before.

OK, I am lying to you a little bit...

Slides are the main logical unit of information in this slideshow framework.

And they encompass all the other labels.

To navigate them just go backward with left arrow or go forward with right arrow.

Sub-Slides

  • Sub-slides are vertically aligned slides.

They belong to a greater group: Slide.

So, you can add a new Sub-Slide after a previous cell labelled as Slide.

Then you can add more Sub-Slides if you want and will be rendered as vertically aligned slides until you label a new cell as Slide.

To navigate them just use the down arrow or up arrow. Test it now...

Test Sub-Slide 1 level

Have you notice the controller at the bottom right of the slide?

You can navigate with it, if you want (I prefer the keyboard) but it also indicates in which direction you have new Slides or Sub-Slides (darker arrows).

Please go down one more time.

Test Sub-Slide 2 level

You also have a progression bar at the bottom of the slideshow (blue line) to keep an indication of how many slides have been shown and how many we got ahead.

Fragment

Now we began with some intra-slides properties.

A Fragment lives inside a Slide or Subslide and it is constrained at the cell level.

You can have multiple Fragments inside a slide, which will rendered in descending order following the flow of the cells.

Press the right arrow.

  • I am a Fragment.
  • I am another one.

Skip

If you want to skip some cell, just label it as Skip.

I will be in the final html slideshow source but it will not be rendered in your browser.

Notes

We provided speaker notes through the Notes label.

These cells will not be rendered in your browser.

You want to test it?

Just press "s" in you keyboard and you will see a new emerging window containing the current slide, the next one, a simple timer and finally, the notes.

Do nothing cell, just render it: -

I think this does not need further explanation.

Ahh... I am a - cell.

And now... the reveal converter

After labelling properly the cells in your notebook, you save it (do not forget it!) and you are right to do the next step.

First of all, after cloning the nbconvert master, you have to initialize the reveal submodule.

Note: You will need to do this once... just to get the reveal library...

To do it:

$ cd nbconvert
$ git submodule update --init

Ok, now just copy your.ipynb inside the nbconvert folder and then:

$ python nbconvert.py -f reveal your.ipynb

Now you have a file: your_slides.html, then:

$ python -m SimpleHTTPServer 8000

Open it and voila!

Reveal is powerful... (I)

  • You want to see use some another themes? Go here: Sky, Beige, Serif, etc.

  • You want to see use some another transitions? Go here: Cube, Zoom, None, etc.

NOTE: Some themes do not fit the notebook style.

So we are working in some customized themes to provide a proper fit with the notebook-derived slideshows.

Also, some transitions are browser-dependent.

Reveal is powerful... (II)

  • You want to get a pdf from your slideshow, with chrome you can get it here.

  • You want to get a overview of the slideshow, just press "Esc" and Ctrl+/- to zoom in and zoom out.

  • You want to explain some thing, press "b" and your audience will not be distracted.

More Info

We support only some of the basic functionality provided by reveal... if you want go further, you can go here, get info, and customize some things.

Any question? Ping me: @damian_avila

And now a working example...

A brief tour of the IPython notebook

This document will give you a brief tour of the capabilities of the IPython notebook.
You can view its contents by scrolling around, or execute each cell by typing Shift-Enter. After you conclude this brief high-level tour, you should read the accompanying notebook titled 01_notebook_introduction, which takes a more step-by-step approach to the features of the system.

The rest of the notebooks in this directory illustrate various other aspects and capabilities of the IPython notebook; some of them may require additional libraries to be executed.

In [1]:
pwd
Out[1]:
u'/Users/minrk/dev/ip/mine/docs/examples/notebooks'
In [2]:
ls
00_notebook_tour.ipynb          callbacks.ipynb                 python-logo.svg
01_notebook_introduction.ipynb  cython_extension.ipynb          rmagic_extension.ipynb
Animations_and_Progress.ipynb   display_protocol.ipynb          sympy.ipynb
Capturing Output.ipynb          formatting.ipynb                sympy_quantum_computing.ipynb
Script Magics.ipynb             octavemagic_extension.ipynb     trapezoid_rule.ipynb
animation.m4v                   progbar.ipynb
In [3]:
message = 'The IPython notebook is great!'
# note: the echo command does not run on Windows, it's a unix command.
!echo $message
The IPython notebook is great!

Plots with matplotlib

IPython adds an 'inline' matplotlib backend, which embeds any matplotlib figures into the notebook.

In [4]:
%pylab inline
Welcome to pylab, a matplotlib-based Python environment [backend: module://IPython.zmq.pylab.backend_inline].
For more information, type 'help(pylab)'.
In [5]:
x = linspace(0, 3*pi, 500)
plot(x, sin(x**2))
title('A simple chirp');

You can paste blocks of input with prompt markers, such as those from the official Python tutorial

In [6]:
>>> the_world_is_flat = 1
>>> if the_world_is_flat:
...     print "Be careful not to fall off!"
Be careful not to fall off!

Errors are shown in informative ways:

In [7]:
%run non_existent_file
ERROR: File `u'non_existent_file.py'` not found.
In [8]:
x = 1
y = 4
z = y/(1-x)
---------------------------------------------------------------------------
ZeroDivisionError                         Traceback (most recent call last)
<ipython-input-8-dc39888fd1d2> in <module>()
      1 x = 1
      2 y = 4
----> 3 z = y/(1-x)

ZeroDivisionError: integer division or modulo by zero

When IPython needs to display additional information (such as providing details on an object via x? it will automatically invoke a pager at the bottom of the screen:

In [18]:
magic

Non-blocking output of kernel

If you execute the next cell, you will see the output arriving as it is generated, not all at the end.

In [19]:
import time, sys
for i in range(8):
    print i,
    time.sleep(0.5)
0 1 2 3 4 5 6 7

Clean crash and restart

We call the low-level system libc.time routine with the wrong argument via ctypes to segfault the Python interpreter:

In [*]:
import sys
from ctypes import CDLL
# This will crash a Linux or Mac system; equivalent calls can be made on Windows
dll = 'dylib' if sys.platform == 'darwin' else '.so.6'
libc = CDLL("libc.%s" % dll) 
libc.time(-1)  # BOOM!!

Markdown cells can contain formatted text and code

You can italicize, boldface

  • build
  • lists

and embed code meant for illustration instead of execution in Python:

def f(x):
    """a docstring"""
    return x**2

or other languages:

if (i=0; i<n; i++) {
  printf("hello %d\n", i);
  x += 4;
}

Courtesy of MathJax, you can include mathematical expressions both inline: $e^{i\pi} + 1 = 0$ and displayed:

$$e^x=\sum_{i=0}^\infty \frac{1}{i!}x^i$$

Rich displays: include anything a browser can show

Note that we have an actual protocol for this, see the display_protocol notebook for further details.

Images

In [1]:
from IPython.display import Image
Image(filename='../../source/_static/logo.png')
Out[1]:

An image can also be displayed from raw data or a url

In [2]:
Image(url='http://python.org/images/python-logo.gif')
Out[2]:

Embedded vs Non-embedded Images

As of IPython 0.13, images are embedded by default for compatibility with QtConsole, and the ability to still be displayed offline.

Let's look at the differences:

In [4]:
# by default Image data are embedded
Embed      = Image(    'http://scienceview.berkeley.edu/view/images/newview.jpg')

# if kwarg `url` is given, the embedding is assumed to be false
SoftLinked = Image(url='http://scienceview.berkeley.edu/view/images/newview.jpg')

# In each case, embed can be specified explicitly with the `embed` kwarg
# ForceEmbed = Image(url='http://scienceview.berkeley.edu/view/images/newview.jpg', embed=True)

Today's image from a webcam at Berkeley, (at the time I created this notebook). This should also work in the Qtconsole. Drawback is that the saved notebook will be larger, but the image will still be present offline.

In [5]:
Embed
Out[5]:

Today's image from same webcam at Berkeley, (refreshed every minutes, if you reload the notebook), visible only with an active internet connexion, that should be different from the previous one. This will not work on Qtconsole. Notebook saved with this kind of image will be lighter and always reflect the current version of the source, but the image won't display offline.

In [6]:
SoftLinked
Out[6]:

Video

And more exotic objects can also be displayed, as long as their representation supports the IPython display protocol.

For example, videos hosted externally on YouTube are easy to load (and writing a similar wrapper for other hosted content is trivial):

In [7]:
from IPython.display import YouTubeVideo
# a talk about IPython at Sage Days at U. Washington, Seattle.
# Video credit: William Stein.
YouTubeVideo('1j_HxD4iLn8')
Out[7]:

Local Files

The above examples embed images and video from the notebook filesystem in the output areas of code cells. It is also possible to request these files directly in markdown cells if they reside in the notebook directory via relative urls prefixed with files/:

files/[subdirectory/]<filename>

Linking to files and directories for viewing in the browser

It is also possible to link directly to files or directories so they can be opened in the browser. This is especially convenient if you're interacting with a tool within IPython that generates HTML pages, and you'd like to easily be able to open those in a new browser window. Alternatively, if your IPython notebook server is on a remote system, creating links provides an easy way to download any files that get generated.

As we saw above, there are a bunch of .ipynb files in our current directory.

In [1]:
ls
00_notebook_tour.ipynb          formatting.ipynb
01_notebook_introduction.ipynb  octavemagic_extension.ipynb
Animations_and_Progress.ipynb   publish_data.ipynb
Capturing Output.ipynb          python-logo.svg
Script Magics.ipynb             rmagic_extension.ipynb
animation.m4v                   sympy.ipynb
cython_extension.ipynb          sympy_quantum_computing.ipynb
display_protocol.ipynb          trapezoid_rule.ipynb

If we want to create a link to one of them, we can call use the FileLink object.

In [2]:
from IPython.display import FileLink
FileLink('00_notebook_tour.ipynb')

Alternatively, if we want to link to all of them, we can use the FileLinks object, passing '.' to indicate that we want links generated for the current working directory. Note that if there were other directories under the current directory, FileLinks would work in a recursive manner creating links to files in all sub-directories as well.

External sites

You can even embed an entire page from another site in an iframe; for example this is today's Wikipedia page for mobile users:

In [9]:
HTML('<iframe src=http://en.mobile.wikipedia.org/?useformat=mobile width=700 height=350></iframe>')
Out[9]:

Mathematics

And we also support the display of mathematical expressions typeset in LaTeX, which is rendered in the browser thanks to the MathJax library.

Note that this is different from the above examples. Above we were typing mathematical expressions in Markdown cells (along with normal text) and letting the browser render them; now we are displaying the output of a Python computation as a LaTeX expression wrapped by the Math() object so the browser renders it. The Math object will add the needed LaTeX delimiters ($$) if they are not provided:

In [10]:
from IPython.display import Math
Math(r'F(k) = \int_{-\infty}^{\infty} f(x) e^{2\pi i k} dx')
Out[10]:
$$F(k) = \int_{-\infty}^{\infty} f(x) e^{2\pi i k} dx$$

With the Latex class, you have to include the delimiters yourself. This allows you to use other LaTeX modes such as eqnarray:

In [11]:
from IPython.display import Latex
Latex(r"""\begin{eqnarray}
\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\
\nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\
\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\
\nabla \cdot \vec{\mathbf{B}} & = 0 
\end{eqnarray}""")
Out[11]:
\begin{eqnarray} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{eqnarray}

Or you can enter latex directly with the %%latex cell magic:

In [12]:
%%latex
\begin{aligned}
\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\
\nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\
\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\
\nabla \cdot \vec{\mathbf{B}} & = 0
\end{aligned}
\begin{aligned} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{aligned}

Loading external codes

In this notebook we've kept the output saved so you can see the result, but you should run the next cell yourself (with an active internet connection).

Let's make sure we have pylab again, in case we have restarted the kernel due to the crash demo above

In [12]:
%pylab inline
Welcome to pylab, a matplotlib-based Python environment [backend: module://IPython.zmq.pylab.backend_inline].
For more information, type 'help(pylab)'.
In [15]:
%load http://matplotlib.sourceforge.net/mpl_examples/pylab_examples/integral_demo.py