presentation from jupyter notebook

presentation

Create Presentation from Jupyter Notebook

You don't need to install any additional framework to make a presentation from Jupyter Notebook. Jupyter is using Reveal.js library for creating slides. However, I strongly recommend to install RISE ( R eveal.js I Python S lideshow E xtension) extension. It greatly simplifies the process of slide creation with a live preview.

The outline for this article:

create a simple notebook with one chart,
convert notebook to a slideshow,
presentation development with RISE extension,
parameterized presentations,
publishing presentation.

Create Jupyter Notebook

Let's create a Jupyter notebook. It will have a few Markdown and Python cells.

Please notice that we can mix Python variables with Markdown thanks to IPython.display.Markdown() function:

The output of the above code cell will contain a Markdown. There is a simple scatter plot in the notebook for randomly generated points:

The matplotlib scatter plot:

It is a simple notebook created for example purposes. There is no limit on the number of slides or cells. From my experience, I was creating a presentation with more than 70 slides with many plots/images, and the slideshow was working smoothly, even with the presentation published as a website (hosted in the cloud).

Create Presentation

The notebook is saved in ipynb format . The next step is to convert it to a slideshow. We need to provide information on how to use cells in the presentation. Please click View ➡️ Cell Toolbar ➡️ Slideshow .

Cell Toolbar in Jupyter Notebook, Please select Slideshow

Each cell will have a toolbar with the select widget. You can select there how cells will be used in the presentation:

Slide - the cell will be a new slide;
Sub-Slide - the cell will be shown in the current slide as a replacement for previous content. It will be available in arrow-down navigation;
Fragment - the cell will appear in the current slide, it will append to the previous content. It will be available in arrow-down and arrow-right navigation;
Skip - the content will not be displayed in the presentation;
Notes - notes for slide, the cell content is not displayed in the presentation;

Please select the Slide Type for every cell and save the notebook.

How to create a presentation for Jupyter Notebook? We need to use the nbconvert tool. It is installed with Jupyter Notebook. There is a command for converting notebook to presentation:

You can open the output file presentation.slides.html in the web browser (just double-click on the file). Alternatively, you can serve slides with jupyter ; slides will be available at http://127.0.0.1:8000/presentation.slides.html :

There are several ways to hide the code in the presentation, one of them is to pass --no-input parameter to nbconvert :

The presentation with hidden code:

It is possible to convert the Jupyter Notebook presentation into PDF slides. One of the ways to do this is to add ?print-pdf in the URL in a web browser while displaying HTML format:

The presentation will be in a format ready to print. To save it as a PDF, just print the website with Save as PDF selected for the destination.

Jupyter Notebook Presentation save as PDF

RISE Extension

There is a RISE extension that may be helpful for developing presentations in Jupyter Notebook. It can be easily installed with pip or conda :

You get a small chart icon in the top toolbar after installation. You switch between the notebook and presentation views by clicking on the chart icon.

What is more, you can edit the code in presentation mode. The RISE extension doesn't have the option to hide the code ( GitHub issue discussion about hiding code feature in RISE repository ). If you would like to hide/show the code during the presentation development, you need to install an additional extension called hide_code .

Parameterized Presentation

What if you would like to change or recompute charts in the presentation based on user input? There is an open-source framework called Mercury that makes it possible.

You can easily add interactive widgets to the presentation and publish it with Mercury . Widgets are added based on the YAML header. They are directly connected with Python variables in the notebook. User changes, tweak widgets, and execute the notebook with new values. The slides in the presentation will be automatically recomputed.

The video from an interactive presentation about Mercury :

Publishing Presentation

The final presentation is in HTML format. You can publish it as a static website. There are several ways to publish Jupyter Notebook; you can host it on GitHub Pages, Netlify, or Vercel. If you are using Mercury framework for parameterized presentations, you can host it in the cloud (soon, there will be available online service runmercury.com for hosting notebooks).

Jupyter Notebook Presentations might be a great alternative to traditional presentation software. You will save time by building the presentation in the same environment where your code is. Any update in code or chart change will immediately affect the presentation - no need to manually copy-paste results. The parameterized presentation can take your slides one step further. Imagine your supervisor or manager playing with your slides and recomputing new charts.

Python Basics
Interview Questions
Python Quiz
Popular Packages
Python Projects
Practice Python
AI With Python
Learn Python3
Python Automation
Python Web Dev
DSA with Python
Python OOPs
Dictionaries

Creating Interactive Slideshows in Jupyter Notebooks

We all have been very well acquainted with the creation of slideshows by using Microsoft PowerPoint for our schools, colleges, or offices in our day-to-day lives. But, have we ever wondered how would it be to create a slideshow through the Jupyter Notebook? The advantages of creating slideshows with Python and Jupyter are its version control capability, dynamicity in the slideshows, easy sharing of codes with others in the groups, and a single presentation document, but the only con with this is that it doesn’t have many themes to apply in the slides, due to which it may look sort of a little plain.

In this article, we will walk through the different methods used for creating interactive slideshows in Jupyter Notebook like through RISE, with Jupyter’s built-in slideshow feature, Jupyter widgets, and ipywidgets and voila and voila-reveal. Also, we will read about the importance of creating interactive slideshows, how to customize our slides in the slideshows, and the processes involved in exporting the slideshow.

Now, coming to the basic query to ask everyone, and which every individual has in their mind is

Why Interactive SlideShow?

Some of the reasons why interactive slideshows are appreciated are mentioned below:

1. It easily helps in capturing audiences’ attention because of its interactive clickable elements, colours, images, videos, etc. making the presentation more memorable.

2. Users can delve further into data visualization s, charts, and graphs in interactive slideshows for data-driven presentations. To acquire deeper insights, they might filter data or zoom in on particular data points.

3. Interactive slideshows possess features like surveys and quizzes to collect feedback and gauge audience comprehension in real-time, which can be useful for training or instructional purposes.

4. Presenters can adapt their information to their audience’s demands by using interactive slideshows. Users can take their own route through the content by concentrating on the subjects that are most interesting or important to them, creating a more individualized experience.

Customizing Slides in Jupyter Notebook

Customizing slides refers to applying uniqueness to the appearance, content, and behaviour of individual slides to meet specific preferences. Similarly, we can also customize our slides in Jupyter Notebook. This can be done by adding metadata to the individual slides in the cells. Metadata is specified in the cell’s metadata tag, present under the “Cell Toolbar” option. From there you can customize the slide according to your own choice (Metadata is here referred to the information about the book, it is used to control the features and behavior of the notebook).

The above image will apply “Edit Metadata” to all the slides.

You can now add any metadata to customize your slides as shown in the above image.

Exporting SlideShows in Jupyter Notebook

Once you are done with the creation and customization of the slides, you can export your slideshow from the Jupyter Notebook to your local machine. The slides can be exported in different formats such as HTML, PDF, LaTex, Reveal JS, Markdown (md), ReStructured Text (rst) and executable script. After exporting the file, save it in the same folder as that of where your Jupyter Notebook is installed. Finally, you will be able to easily present your slideshow from your local system to the outside world.

You can do so with the help of nbconvert tool. The nbconvert tool, is a Jupyter Notebook tool that converts notebooks to various other formats via Jinja templates. In order to used the nbconvert tool, you need to follow its basic command.

From the Command Line, use nbconvert to convert a Jupyter Notebook (input) to a different format (output). The basic command structure is given below:

where <output format> is the desired format in which the notebook is converted and <input notebook> is the filename of your own Jupyter Notebook which you want to convert.

For example: CONVERT JUPYTERNOTEBOOK SLIDESHOW TO HTML

This command creates an HTML file named as slideshow.ipynb.

Creating Interactive Slideshows in Jupyter Notebook using RISE

Step 1: set up all the requirements.

Installing Python and Jupyter Notebook

In order to start with the slideshows, firstly you need to install Python and Jupyter Notebook, using Anaconda Navigator.

Installing RISE

RISE , is an acronym which stands for Reveal.js IPython/Jupyter Slideshow Extension and as the name suggests RISE is a Jupyter Notebook extension that enables you to create dynamic presentation slides from your Jupyter Notebook. Through RISE, a notebook is rendered as a Reveal.js based slideshow during which you can execute code, display plots or show your audience any actions you would perform inside the notebook itself.

To use rise, first you need to install this. If you are using Anaconda then, use the command

or if you are using Command Prompt then use the command

You won’t be able to interact directly with RISE, instead you will be access it through your Jupyter Notebook.

Step 2: How to Create a SlideShow

Enabling slideshow mode.

To start with the creation of slideshows, you will need to start the Jupyter Notebook and open a new Notebook in it (must do this after installing RISE). Once you’re in the new fresh Notebook, you will need to enable the slideshow. For doing this, follow the following steps given below:

1. Click on the “View” tab in the Jupyter Notebook.

2. A dropdown menu will appear. Hover and select over the “Cell Toolbar” option.

3. Another dropdown appears. Now, select the “Slideshow” option in the “Cell Toolbar” menu.

You’ve now enabled the slideshow mode.

Creating the slides with cells

Now, at this point, start working with the cell toolbar present in the dropdown menu.

Once, you open the first cell in the Notebook, you’ll observe a “ Slide Type ” option present at the top right corner of the cell. This contains different types options which determines how each slide would fit in the slideshow. Those are:

slide – designates the selected cell as the first of a new slide.

sub-slide – indicates that the selected cell should be the start of a new sub-slide, which appears in a new frame beneath the previous slide.

fragment – denotes that the chosen cell should be added to the previous slide as a build.

skip – indicates that the selected cell should not be included in the slideshow and should instead be skipped.

notes – indicates that the selected cell should just be the presenter notes.

– – indicates that the selected cell should follow the behavior of the previous cell, which is useful when a markdown cell and a code cell should appear simultaneously.

Step 3: Viewing and Operating the SlideShows

Viewing the slideshow.

The slideshow can be seen directly from the notebook once the slide material has been created using cells for the slideshow.

There are two options to view the slideshow:

1. Using the shortcut ALT + R on Windows to enter and exit into the presentation mode within the notebook.

2. Clicking the “Presentation Mode” button from the notebook (Note that it would only appear if you’ve successfully installed RISE) as present at the right most, shown in the image given below.

Once you choose enter into the slideshow presentation mode, a window will open as shown below

This means the presentation is active now.

Operating the slideshow

Changing the slides.

When you enter in the slideshow window, you will see four different types of arrows in the bottom-right corner for controlling the slides. Although using the keys <- and -> may look attractive, but it can lead to skip of many sub-slides. Instead, its recommended to use SPACE for moving the slides forward and SPACE+SHIFT for moving the slides backward, respectively.

Apart from this, you may also access many other keyboard shortcuts within the slideshow by clicking the question mark (?) in the bottom-left corner.

Running and Editing the code

One of the best features of RISE is that you can update and run code while the presentation is in progress because it operates in a live Python session.

A code cell will show up in the slideshow as editable and runnable if it is identified as a slide, sub-slide, fragment, or -. Here’s an illustration:

Finally, you are done with the slideshow to showcase it to others.

Creating Interactive Slideshow using Jupyter’s built-in Slideshow Features

Until now, we learnt about the different ways of creating interactive slideshows in Jupyter Notebook with the help of RISE. But, there are some other methods too, which can be used for creating slideshows in Jupyter Notebook. One of them is “Jupyter’s built-in slideshow feature”. To create interactive slideshows in Jupyter Notebook with the help of its built-in feature, perform the following steps:

Step 1: Open a New Notebook

To start with, open a new notebook and rename it.

Step 2: Create new Slides

Once you are inside a new fresh notebook, start creating slides as much as you want to add in your slideshow.

Step 3: Enable SlideShow Mode

After you are done with the creation of all the slides, define them as specific slide-type such as “Slide”, “Sub-Slide”, “Fragment”, “Skip”, “Notes”, “Markdown”. Also, enable the slideshow mode through the “Cell Toolbar” in the Notebook toolbar.

Step 4: Run the Notebook for SlideShow

Next, save your notebook and close it. Open the Command Prompt, and run the below mentioned command to see your notebook as a slideshow.

Replace myslideshow.ipynb with your notebook filename. The above command will convert your Jupyter Notebook to a slideshow.

Creating Interactive Slideshow using Jupyter Widgets and IPYwidgets

Ipywidgets, is a python libraray, often termed as Jupyter widgets or simply widgets in short. With this, you can build interactive HTML widgets that will display in your Jupyter Notebook. They are interactive Graphical User Interface (GUI) elements which incorporate user interaction into your code, enhancing the interest and usefulness of your notebooks. They are especially beneficial for activities like data exploration, data analysis, parameter adjustment, and concept demonstration.

There are many different controls available with Jupyter widgets, including buttons, sliders, text input fields, dropdown menus, checkboxes, and more. These features allow for real-time data manipulation and display, parameter changes, and action triggering without the need to run code cells again.

Jupyter widgets or ipywidgets, also helps in building interactive slideshows. You just need to apply the following steps:

Step 1: Install IPYwidgetsINSTALL ‘IPYWIDGETS’

In order to start working with widgets, you need to first install it. For this, you can use Command Prompt or Anaconda.

Step 2: Import the Libraries

In the next step, import the necessary required libraries in your notebook.

Step 3: Create Interactive Widgets

Now, select the type of interactive widget, you want to include in your presentation. For example, here I have used the slider widget.

Here, we can assign the min and max value, step value and the description of the slider.

Step 4: Display the Widgets

This will display the widget which is applied to the slide.

Step 5: Run the SlideShow

Next, when you are done creating the widgets for all the specific slides, turn on the slideshow mode. To do this, go to View -> Cell Toolbar -> Slideshow. Thereafter, use the “Slide Type” dropdown menu in the toolbar to specify how each cell should be treated (e.g., slide, sub-slide, fragment, skip and notes).

Step 6: Start the Slideshow

Finally, start the slideshow by clicking the “Enter/Exit Live Reveal Slideshow” button in the toolbar. Your presentation will begin, and interactive widgets will be functional.

Creating Interactive Slideshow using Voila and Voila-Reveal

Voila is an open-source framework or we can say a web application, with the help of which one can convert Jupyter notebooks into dashboards and interactive online applications. Although it’s primarily responsible for creating web applications, it can also be used to create interactive slideshows for Jupyter notebooks.

On the other hand, Voila-Reveal is just an extension of voila. It allows to convert simple jupyter notebook into a Reveal.js based interactive slideshow.

In order to do so, one can follow the below mentioned steps:

Step 1: Install VOILA

To install voila, you can use Command Prompt

Step 2: Create the Slides

Then, create or open Notebook where you will build the presentation. If you want to customize the slides using Reveal.js features like slide backgrounds, transitions, and themes, then do so by adding appropriate metadata to Markdown cells.

Step 3: Run VOILA

Once you created the slides, close your notebook. Then, in the command prompt, navigate to the path where your notebook is stored.

Replace C:\Users\hp with your folder path.

Then, start to run your notebook in the Command Prompt.

Rename Voila.ipynb with the name of your notebook file.

Once you run your file, voila will start a local server and generate the Reveal.js-based presentation from your notebook. It will provide you with a URL, which is typically something like http://localhost:8866 . Open this URL in a web browser to view your interactive slideshow presentation.

NOTE : Voila will convert all the slides in the cells in the notebook to a dashboard.

Please Login to comment...

Improve your coding skills with practice.

What kind of Experience do you want to share?

Create interactive slides with Python in 8 Jupyter Notebook cells

Creating presentations in Jupyter Notebook is a great alternative to manually updating slides in other presentation creation software. If your data changes, you just re-execute the cell and slide chart is updated.

Jupyter Notebook is using Reveal.js (opens in a new tab) for creating slides from cells. The standard approach is to write slides code and Markdown in the Jupyter Notebook. When notebook is ready, it can be exported to standalone HTML file with presentation.

What if, you would like to update slides during the slide show? What is more, it would be fantastic to have interactive widgets in the presentation. You can do this in Mercury framework.

In this tutorial, we will create an interactive presentation in Jupyter Notebook and serve it with Mercury.

Create presentation in notebook

Please enable Slideshow toolbar in Jupyter Notebook. It can be done by clicking View -> Cell Toolbar -> Slideshow . It is presented in the screenshot below:

We will need following packages to create presentation in Python notebook:

Please make sure that they are installed in your environment.

1. Import packages and App setup

The first step is to import packages and setup Mercury App :

We setup title and description for App object.

Please note that we set Slide Type to Skip . This cell will not appear in the presentation.

2. Add title

The second cell is a Markdown with title:

The Slide Type is set to Slide . It is our first slide!

3. Add slide with Markdown

Add new Markdown cell with the following cell.

Please set Slide Type to Slide . It will be a second slide. I'm using ## as slide title ( # will produce too large title in my opinion).

4. Add Mercury Widget

Please add code cell with Text widget. We will use it, to ask users about their name.

We set Slide Type as Skip , so this cell will not appear in the presentation.

5. Display name

Let's use the name.value in the slide. Please add a code cell. We will display a Markdown text with Python variables by using Markdown function from Mercury package.

Please set the Slide Type to Slide .

You can display Markdown with Python variables by calling mr.Markdown() or mr.Md() functions. Both do the same.

The first five cells of the notebook:

Notebook code for presentation in Jupyter Notebook

You can enter your name in the widget during the notebook development. There will be no change in other cells. If you want to update the cell with new widget value, please execute it manually.

6. More widgets

We can add more widgets to the presentation. They will be used to control chart in the next slide.

We have used Slider and Select widgets. They are displayed in the notebook. This cell will not be displayed in the presentation, so set Slide Type to Skip .

7. Scatter plot

We will add a new code cell. It will have Slide Type set to Slide .

We used widgets values by accessing them with samples.value and color.value .

Screenshot of the notebook with scatter plot:

8. Final slide

Please add a last Markdown cell. Its Slide Type will be set to Slide :

Please notice that link is added with HTML syntax. There is a target="_blank" used to open link in a new tab.

Run presentation in Mercury

Please run Mercury local server in the same directory as notebook:

The above command will open a web browser at http://127.0.0.1:8000 . Please click on a card with presentation.

You can navigate between slides with arrows in the bottom right corner. You can enter the full screen mode by pressing F on the keyboard. Please use Esc to exit full screen mode.

You can change widgets values in the sidebar and presentation slides will be automatically recomputed:

You can export your slides as PDF or HTML by clicking Download button in the sidebar.

Create a slide deck using Jupyter Notebooks

There are many options when it comes to creating slides for a presentation. There are straightforward ways, and generating slides directly from Jupyter is not one of them. But I was never one to do things the easy way. I also have high expectations that no other slide-generation software quite meets.

Why transition from slides to Jupyter?

I want four features in my presentation software:

An environment where I can run the source code to check for errors
A way to include speaker notes but hide them during the presentation
To give attendees a useful handout for reading
To give attendees a useful handout for exploratory learning

Using Jupyter Notebooks for presentations

I begin my presentations by using Markdown and code blocks in a Jupyter Notebook, just like I would for anything else in JupyterLab. I write out my presentation using separate Markdown sections for the text I want to show on the slides and for the speaker notes. Code snippets go into their own blocks, as you would expect.

Because you can add a "tag" to cells, I tag any cell that has "boring" code as no_markdown .

(Moshe Zadka, CC BY-SA 4.0 )

Then I convert my Notebook to Markdown with:

There are ways to convert Markdown to slides —but I have no idea how to use any of them and even less desire to learn. Plus, I already have my favorite presentation-creation tool: Beamer .

But Beamer requires custom LaTeX, and that is not usually generated when you convert Markdown to LaTeX. Thankfully, one Markdown implementation– Pandoc Markdown —has a feature that lets me do what I want. Its raw_attribute extension allows including "raw" bits of the target format in the Markdown.

This means if I run pandoc on the Markdown export from a notebook that includes raw_attribute LaTeX bits, I can have as much control over the LaTeX as I want:

The --listings makes pandoc use LaTeX's listings package, which makes code look much prettier. Putting those two pieces together, I can generate LaTeX from the notebook.

Through a series of conversion steps, I was able to hide the parts I wanted to hide by using:

LaTeX raw_attribute bits inside Jupyter Notebook's Markdown cells
Tagging boring cells as no_markdown
Jupyter's "nbconvert" to convert the notebook to Markdown
Pandoc to convert the Markdown to LaTeX while interpolating the raw_attribute bits
Beamer to convert the Pandoc output to a PDF slide-deck
Beamer's beamerarticle mode

All combined with a little bit of duct-tape, in the form of a UNIX shell script, to produce slide-deck creation software. Ultimately, this pipeline works for me. With these tools, or similar, and some light UNIX scripting, you can make your own customized slide created pipeline, optimized to your needs and preferences.

What is the most complicated pipeline you have ever used to build a slide deck? Let me know about it—and whether you would use it again—in the comments.

Edit images with Jupyter and Python

Who needs to learn an image-editing application when you can do the job with open source tools you already know?

How to write a web service using Python Flask

JupyterLab teaches Python developers magic

JupyterLab, the successor to Jupyter Notebook, feels like playing video games with the cheat codes enabled.

Markdown beginner's cheat sheet

Learn Markdown syntax to be ready to contribute to open source software.

Moshe sitting down, head slightly to the side. His t-shirt has Guardians of the Galaxy silhoutes against a background of sound visualization bars.

Natalie B. Hogg

Cosmologist

Using a Jupyter notebook to make presentation slides

Open a blank Jupyter notebook.
Add a cell and convert it to Markdown (either esc + m ) or by using the drop down menu at the top of the notebook.
Add your text, equation or image to the cell (images can be added via the edit menu, though some HTML tags may be needed to render and/or resize the image).
Choose a slide type in the drop down menu of the cell itself (slide, sub-slide, fragment, skip or notes).
Save the notebook.
In the terminal, run jupyter nbconvert *.ipynb --to slides .
Open the resulting .html file in a browser and use the arrow keys to navigate.

I turn coffee Lapsang Souchong tea into code; if you found this post useful you can contribute to my habit here: https://ko-fi.com/nataliebhogg .

I’m in a strange kind of limbo at the moment. I’m not being paid, since I can’t sign my new contract without being physically present in Spain. And, until the 30th of March, it was physically impossible to enter Spain unless you were a Spanish resident, since the borders were closed due to Covid restrictions. Due to Brexit, I also need a visa in order to be able to stay in Spain for more than ninety days and to legally work there. So, I have an appointment at the Spanish consulate in London on Friday to submit my visa application. I’m hoping for a quick decision so I can book a flight, get to Madrid, sign my contract and start working (and drawing a salary). But, until then, I’m in this strange, semi-working state.

I could have taken this time off completely, but with the UK in lockdown and everything shut, I know I would have quickly got bored in the face of a two or three month holiday with nothing to do and nowhere to go. So, I resolved to keep working, despite the lack of pay, albeit at a reduced pace. I’ve been attending journal clubs and mainly working on turning a chapter of my PhD thesis into a paper.

As a result, it was nice to take a full five days off over the Easter weekend. I finished reading three books: Island of Dreams by Dan Boothby (ok if you are interested in Gavin Maxwell, Scotland or otters), The Nine Tailors by Dorothy L. Sayers (which I highly recommend!) and Never Split the Difference by Chris Voss (probably only useful if you’re a hostage negotiator or someone working in big business). It was a conscious decision to try and read more and I’m glad it paid off. I always forget how refreshed I feel after even just a couple of days off from work.

This morning I finished making my slides for my talk at Britgrav next week. I’m going to be presenting my work from a few months ago on how the distance duality relation can be constrained with standard sirens and how modified gravity effects can bias this type of analysis. I tend to use either Google Slides or LaTeX Beamer to make presentations, depending on the content and audience, but this time I decided to use Markdown in a Jupyter Notebook which I then converted to HTML.

This produces very clean looking slides, and it’s easy to write LaTeX commands too (unlike in Google Slides).

The process I followed to create the slides is very simple.

The same week that I’m giving this talk, I’m also presenting the H0 review paper by Di Valentino et al (we’re having a special H0 tension week, as someone else is going to present Efstathiou’s recent offering on the same topic) and the following week I’ve been invited to give a seminar at my old undergraduate institution, Aberystwyth University, which I’m really looking forward to.