jupyter presentation

Create Presentation from Jupyter Notebook

October 04, 2022 by Aleksandra Płońska, Piotr Płoński Jupyter Presentation October 04, 2022 by Aleksandra Płońska, Piotr Płoński -->

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.

Example Notebook

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:

Scatter Plot from Notebook

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:

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

Cells with selected Slide Type

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.

Robots Integration

Join our newsletter

Subscribe to our newsletter to receive product updates

jupyter presentation

Share your Python Notebooks with others

jupyter presentation

Articles you might find interesing

Check our open-source AutoML framework for tabular data!

Towards Data Science

5 Slides for Tips on Presentation Mode in Jupyter Notebook

A tutorial to create an html slideshow with jupyter notebook, let’s jump into it.

You’re here, you’re reading this article, and you already have jupyter notebook installed and ready to go.

The presentation slides option from jupyter notebook speaks for itself. This is an alternative to copy-and-pasting screen captures into other presentation software.

The first step is to enable the Slideshow option in the View > Cell Toolbar options. Just click on the Slideshow option and continue reading.

Each cell in the Jupyter Notebook will now have a Slide Type option in the upper-right corner.

An Example Notebook with Slideshow

Here’s an image of the full Jupyter Notebook that we’ll walk through next. The notebook is also available on GitHub if you’d like to follow along.

The next steps will contain the slide outputs to illustrate the results, although there will be references made to this notebook.

The Slideshow

Once you have a notebook that you’d like to send to an HTML slideshow presentation, run the following one-line command from the terminal. Since you may already have Jupyter Notebook running on your existing terminal window, you might open another terminal window to run the one-line command.

The command generated and opened a file called “Presentation Slides with Jupyter Notebook.slides.html” in the browser running Jupyter Notebook.

The First Slide

The first slide has the type “Slide” and an arrow on the bottom-right corner to move on to the next slide.

The Second Slide

The second slide also has the type “Slide” but has three options in the bottom-right corner.

The Third Slide (or Third Image if You Prefer)

After clicking the down arrow above, we are now on the third image, which is of the type “Sub-Slide.” This option enabled a different grouping of slides. But that’s not all that is left. There’s another down arrow option, so let’s click that again.

The Fourth Slide (or Fourth Image if You Prefer)

When clicking the down button this time, the Sub-Slide remained on the screen while the next Slide Type “Fragment” appeared.

Additionally, the Slide Type of “-” appeared at the bottom, as “-” will appear after the last execution on that Slide or Sub-Slide.

The Fifth Slide

Then when you press the right arrow, the last slide appears. That is to say, the Slide Type of “Notes” was skipped over, similar to how the Slide Type of “Skip” was skipped over at the beginning of the notebook. That’s correct- we already used the “Skip” Slide Type at the beginning, for the statement to import pandas.

Recap Slide Types

To recap, there are a few Slide Types for the Jupyter Notebook Slideshow.

Additional Tips and Reflection

In order to add headers or footers to a slide, utilize the markdown options for Jupyter Notebook.

If there is too much content on a slide, some of the content will not appear at the bottom and will be cut out of the slide.

The Jupyter Notebook Slideshow can be very helpful for certain presentations, as the Slideshows can be constructed without transporting Jupyter Notebook information to a presentation software. But other software exist for good reasons and may be better options for certain situations.

If you enjoyed this article and would like to read (and write) more articles like this, please consider clicking the Follow button by my profile picture and/or subscribing to a medium membership using my referral link: https://sabolch-horvat.medium.com/membership

More from Towards Data Science

Your home for data science. A Medium publication sharing concepts, ideas and codes.

About Help Terms Privacy

Get the Medium app

Sabi Horvat

Data Scientist | Operations Researcher in Oregon who enjoys learning and writing articles with Python & R 🇺🇸 🇭🇺

Presenting Code Using Jupyter Notebook Slides

When you make a slide presentation, there are a few programs you likely think of: Microsoft PowerPoint, Google Slides, Prezi (just kidding). PPT and Slides are great applications, to be sure. They offer tons of formatting and style options and integrate well with other software developed by Microsoft and Google, respectively. But there is another great program for making slides, and it is especially useful for anyone interested in presenting code. I’m talking about Jupyter Notebook Slides. Most coders know Jupyter Notebooks as an environment for writing code, but it can do even more!

The main advantage of Jupyter Notebook slides is that you can take that very same Jupyter Notebook you used to model and visualize a dataset, and turn it into a slideshow for a technical presentation. It is easy to choose individual cells to present as well as which ones to skip. And formatting is virtually a non-issue for anyone who already knows how to use Markdown.

The rest of this blog will be a short tutorial on turning a Jupyter notebook into a slideshow.

Walkthrough

So, to start off, I’ve got my Jupyter notebook:

In order to get my notebook into a slideshow format, I go to View → Cell Toolbar → Slideshow

After clicking slideshow, a light gray bar will appear above each cell with a scroll down window on the top right.

At this point, I can select what type of slide each cell should be. I can make something a regular slide, or a sub-slide if it is a continuation of the previous slide. I can also skip slides or make them be notes, which is helpful when you’ve got lots of code that you don’t necessarily need for your presentation.

Now that I’ve got my slides, there’s one final step. In order to open this notebook as a slideshow I need to run a command in Terminal:

‘Jupyter\ Slides.ipynb’ was just the name of my notebook.

So let’s see how the notebook looks.

There are three main things to notice. First, since my overview slide was labeled as a sub-slide, I hit the down arrow to get to it. Next, my Notes cell did not appear. Lastly, in order to see all my slides at the end I pressed the esc key.

Jupyter notebook slides offer a simple, clear layout and are incredibly easy to create. While they do not offer the amount of formatting and design features as other presentation applications, they do a very good job of presenting code and data visualizations for technical audiences.

More from Matthew Speck

Teaching humans to learn machine learning @GA_DC | Washington Capitals fan | Fordham ‘16

About Help Terms Privacy

Get the Medium app

Matthew Speck

Reveal.js - Jupyter/IPython Slideshow Extension

What is RISE? ¶

As you know… we love Jupyter and we like reveal.js too.

With RISE, a Jupyter notebook extension, you can instantly turn your jupyter notebook into a live reveal.js -based presentation.

Detailed Contents ¶

If you have any feedback, or find any bugs, please open an issue .

Jupyter slideshow extension

Quick search

Creating Presentations with Jupyter Notebook

Jupyter Notebook can be turned into a slide presentation that is kind of like using Microsoft Powerpoint, except that you can run the slide’s code live! It’s really neat how well it works. The only con in my book is that there isn’t a lot of theming that can be applied to your slides, so they do end up looking a bit plain.

In this article, we will look at two methods of creating a slideshow out of your Jupyter Notebook. The first method is by using Jupyter Notebook’s built-in slideshow capabilities. The second is by using a plug-in called RISE .

Let’s get started!

Note: This article assumes that you already have Jupyter Notebook installed. If you don’t, then you might want to go to their website and learn how to do so.

The first thing we need to do is to create a new Notebook. Once you have that done and running, let’s create three cells so that we can have three slides. Your Notebook should now look like the following:

jupyter presentation

Now let’s turn on the “slideshow” tools. Go to the View menu and then click on the Cell Toolbar menu option. You will find a sub-menu in there that is called Slideshow . Choose that. Now your Notebook’s cell should look like this:

jupyter presentation

There are now little comboboxes on the top right of each cell. These widgets give you the following options:

You can just create a series of Slides if you like, but you can make the slideshow a bit more interesting by adding Sub-Slides and Fragments. Sub-slides are just slides that are below the previous one while Fragments are basically fragments within the previous slide. As an aside, I have actually never used Fragments myself. Anyway you can also set a slide to Skip, which just allows you to skip a slide or Notes, which are just speaker notes.

Let’s add some text to our first cell. We will add the text “# Hello Slideshow” to it and set the cell type to Markdown. Note the pound sign at the beginning of the text. This will cause the text to be a heading.

In cell two, we can add a simple function. Let’s use the following code:

For the last cell, we will add the following text:

Make sure you set that to be a Markdown cell as well. This is what my cells ended up looking like when I was done:

jupyter presentation

To make things simple, just set each of the cell’s individual comboboxes to Slide .

Now we just need to turn it into an actual slideshow. To do that, you will need save your Notebook and shut down the Jupyter Notebook server. Next you will need to run the following command:

jupyter presentation

To navigate your slideshow, you can use your left and right arrow keys or you can use spacebar to go forward and shift_spacebar to go back. This creates a pretty nice and simple slideshow, but it doesn’t allow you to run the cells. For that, we will need to use the RISE plugin!

Getting Started with RISE

Reveal.js – Jupyter/IPython Slideshow Extension (RISE) is a plugin that uses *reveal.js* to make the slideshow run live. What that means is that you will now be able to run your code in the slideshow without exiting the slideshow. The first item that we need to learn about is how to get RISE installed.

Installing rise with conda

If you happen to be an Anaconda user, then this is the method you would use to install RISE:

This is the easiest method of installing RISE. However most people still use regular CPython, so next we will learn how to use pip!

Installing rise with pip

You can use Python’s pip installer tool to install RISE like this:

You can also do `python -m pip install RISE` is you want to. Once the package is installed, you have a second step of installing the JS and CSS in the proper places, which requires you to run the following command:

If you somehow get a version of RISE that is older than 5.3.0, then you would also need to enable the RISE extension in Jupyter. However, I recommend just using the latest version so you don’t have to worry about that.

Using RISE for a SlideShow

Now that we have RISE installed and enabled, let’s re-open the Jupyter Notebook we created earlier. Your Notebook should now look like this:

jupyter presentation

You will notice that I circled a new button that was added by RISE to your Notebook. If you mouse over that button you will see that it has a tooltip that appears that says “Enter/Exit RISE Slideshow”. Click it and you should see a slideshow that looks a lot like the previous one. The difference here is that you can actually edit and run all the cells while in the slideshow. Just double-click on the first slide and you should see it transform to the following:

jupyter presentation

After you are done editing, press SHIFT+ENTER to run the cell. Here are the primary shortcuts you will need to run the slideshow effectively:

You can view all the Keyboard shortcuts by going to the Help menu when not in Slideshow mode and clicking the Keyboard Shortcuts option. Most if not all of these shortcuts should work inside of a RISE slideshow.

If you want to start the slideshow on a specific cell, just select that cell and then press the Enter Slideshow button.

RISE also works with Notebook widgets. Try creating a new cell with the following code:

Now start the slideshow on that cell and try running the cell (SHIFT+ENTER). You should see something like this:

jupyter presentation

You can use RISE to add neat widgets, graphs and other interactive elements to your slideshow that you can edit live to demonstrate concepts to your attendees. It’s really quite fun and I have used RISE personally for presenting intermediate level material in Python to engineers.

RISE also has several different themes that you can apply as will as minimal support for slide transitions. See the documentation for full information.

Wrapping Up

In this chapter we learned about two good methods for creating presentations out of our Jupyter Notebooks. You can use Jupyter directly via their nbconvert tooling to generate a slideshow from the cells in your Notebook. This is nice to have, but I personally like RISE better. It makes the presentations so much more interactive and fun. I highly recommend it. You will find that using Jupyter Notebook for your presentations will make the slides that much more engaging and it is so nice to be able to fix slides during the presentation too!

Related Reading

4 thoughts on “Creating Presentations with Jupyter Notebook”

Pingback: Jupyter Notebook Extension Basics | The Mouse Vs. The Python

Pingback: Creating Jupyter Notebook Widgets with interact - The Mouse Vs. The Python

Pingback: How to Export Jupyter Notebooks into Other Formats - The Mouse Vs. The Python

Pingback: Jupyter Notebook Extension Basics - The Mouse Vs. The Python

Comments are closed.

Things Michael Thinks

Data science in learning, creating an interactive presentation with jupyter notebook and plotly.

Let’s say you have performed some analysis using Jupyter notebook and produced some great visualisations to back up your finding. How would you present this to your stakeholders and other people? One great way to ace this is to convert your jupyter notebook and plotly graphs to an interactive presentation that can impress people.

Introduction

I learned on creating slides using Jupyter Notebook from Tahsin Mayeesha’s medium post . However, I was curious to see if I can incorporate interactive graphs from Plotly in the slides. Therefore, I wrote this post to share what I’ve learned.

For this post, I will use the Titanic dataset from Kaggle . This dataset is a classic dataset used to learn machine learning models on classification problems.

In this case, my aim was to present my finding from an Exploratory Data Analysis on the Titanic dataset. I would include several visualisations and slides to show what you can do with Jupyter markdown and slides. Although I would use Plotly mostly for the slides, I have also included one plot with Seaborn and one plot from Pandas Profiling library to show the possibilities you can do.

For my presentation, I imported the following visualisation libraries.

All the libraries above are not required to make the slides work, you can just simply use Plotly , Seaborn , or even simply Matplotlib . You can check the full notebook on my GitHub repo here .

Jupyter Notebook Slideshow View and Setting

Changing the view will allow you to set what type of slides you want for each cell. There are 5 Slide Types you can select:

Skip type for Non-Visualisation Code Cell

Slide type for Title and Markdown Cell

For the first slide or the cover, I will only use one markdown cell with title, subtitle, and author.

Slide + Fragment types for Mixture of Markdown and Code Cells

Hiding the Codes on the Slide

Specific for Plotly

If you use plotly, then you need to pay attention in this section. Otherwise, your plotly graphs won’t show up in the slides.

Plotly will require its JavaScript file ( plotly.js ) to produce the graph. There are three options you can choose:

The get_plotlyjs function would return the whole minified Plotly JS script and by using the Javascript function from IPython we include this in the notebook. The resulting file would be 3MB larger because of the inclusion. However, you will only have one HTML file that you can just send or use anytime.

Converting the Notebook to Slides

To produce the slides from the jupyter notebook, run the following code on your command prompt or bash:

Here we are calling nbconvert function that can be used to convert the notebook into slides (HTML format with Reveal.js) or other formats as can be referred on the documentation .

The TagRemovePreprocessor will remove any code with to_remove tag as we specified. Again, this can be replaced with any other tag you specified before hand.

If you check your directory, the html version of your notebook will be there. You can open this on the web browser and use the directional pad on the screen or arrow keys on your keyboard to navigate. I was able to open the file and interact with Plotly graphs successfully using Chrome, Firefox, Opera, and Microsoft Edge. I heard this might not work so well with Safari but I can’t confirm this.

For me personally, I found that using --post serve , I could not terminate the server using Ctrl-C as described even after many tries. However, I also found that I can omit this in my command prompt and still get the HTML slides file.

Final Output of the Slides

Here are the following slides I produced from my jupyter notebook that you can find on GitHub

Subscribe to our newsletter.

Privacy Statement

Create a slide deck using Jupyter Notebooks

Person reading a book and digital copy

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:

More Great Content

There is nothing more uncomfortable about giving a talk than having someone in the audience point out that there is a coding mistake on one of my slides. Often, it's misspelling a word, forgetting a return statement, or doing something else that becomes invisible as soon as I leave my development environment, where I have a linter running to catch these mistakes.

After having one too many of these moments, I decided to find a way to run the code directly from my slide editor to make sure it is correct. There are three "gotchas" I needed to consider in my solution:

As is often the case, to solve this issue, I found myself reaching for JupyterLab and its notebook management capabilities.

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 .

Using tags in Jupyter Notebook

(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:

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.

Polaroids and palm trees

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.

Blender Hotkey Cheat Sheet

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.

Related Content

Digital images of a computer desktop

Subscribe to our weekly newsletter

IMAGES

Jupyter Notebooks Meet the Challenge of Reproducibility
Present Your Data Science Projects with Jupyter Notebook Slides!
Presenting Code Using Jupyter Notebook Slides
Create Parameterized Presentation in Jupyter Notebook
JupyterCon 2020
Presenting Code Using Jupyter Notebook Slides

VIDEO

16 جنوری، 2023
Introduction to Python and Jupyter- Lecture 1- Day 1
Census Data Presentation
4. Learn how to work with Python in Jupyter Lab
Jupyter for uncertainty quantification and parameter estimation of computational models
Learning python; tips from cognitive science, jupyter and community

COMMENTS

Create Presentation from Jupyter Notebook
You can create a presentation directly from Jupyter Notebook. The presentation slides can be constructed from single, multi-code or Markdown
5 Slides for Tips on Presentation Mode in Jupyter Notebook
The presentation slides option from jupyter notebook speaks for itself. This is an alternative to copy-and-pasting screen captures into other presentation
Presenting Code Using Jupyter Notebook Slides
The main advantage of Jupyter Notebook slides is that you can take that very same Jupyter Notebook you used to model and visualize a dataset
RISE
With RISE, a Jupyter notebook extension, you can instantly turn your jupyter notebook into a live reveal.js-based presentation. basic_usage
Creating Presentations with Jupyter Notebook
Jupyter Notebook can be turned into a slide presentation that is kind of like using Microsoft Powerpoint, except that you can run the
How to Create Presentation Slides from Jupyter Notebooks
... Jupyter Notebook Slideshow with Just One Click | Jupyter Magic Commands, shows how to turn your Jupyter notebook into presentation s...
Create Presentation Slides from Jupyter
Jamie Whitacre demonstrates how to create dynamic presentation slides from your Jupyter Notebook using RISE (Reveal js Jupyter/IPython
Creating a Presentation with Jupyter Notebook and RISE
In this tutorial, you will learn how to use Jupyter Notebooks to create slide show presentations. This allows you to run and edit live code
Creating an Interactive Presentation with Jupyter Notebook and Plotly
In Jupyter Notebook, each cell can play a part in the presentation slides. To set the role each cell play, you have to change the cell toolbar
Create a slide deck using Jupyter Notebooks
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