Create Parameterized Presentation in Jupyter Notebook

Presentation created with Jupyter Notebook is a great way to show your results computed based on data. Wouldn't it be amazing if there were a way to parameterize presentation with interactive widgets? There is an open-source framework called Mercury that can serve Jupyter Notebook presentations with interactive widgets. Users can recompute charts and values in slides during watching the presentation.

In this article, I will show you how you can easily add interactive widgets to the presentation with Mercury framework.

Jupyter Notebook Presentation

In the previous article, I describe how to create a Jupyter Notebook presentation with Reveal.js. The notebook is presented below:

It can be converted to a static HTML file with nbconvert application:

jupyter nbconvert --to slides --no-input presentation.ipynb

The HTML presentation can be published as static HTML website.

You can check the code of Jupyter Notebook with a presentation in the GitHub repository.

Add widgets to the presentation

The Mercury framework can be used to add interactive widgets to the presentation easily. The widgets are added based on the YAML header inserted in the notebook's first raw cell. You can read more about available YAML parameters in Mercury's documentation.

Below the YAML header adding four widgets to the presentation:

---
title: Parametrized Presentation 📊
description: Presentation with widgets
output: slides
show-code: False
params:
    greetings:
        input: select
        label: Select greetings
        value: Hello
        choices: [Hello, Hi, Salut, Cześć]
    name:
        input: text
        label: Who are you?
        value: World
    points_count:
        input: slider
        label: How many points?
        value: 10
        min: 5
        max: 20
    color: 
        input: select
        label: Points color
        value: blue
        choices: [blue, red, green]
---

There are added four widgets to the presentation:

• greetings a select widget,
• name a text input,
• points_count a slider widget,
• color a select widget.

Please note that widgets have the same names as Python variables. The important update in the notebook is to move all variables that are controlled by external widgets into the same cell. The cell with variables should be just below the YAML header.

All variables that are controlled with widgets are in one cell:

greetings = "Hello"
name = "World"
points_count = 10
color = "blue"

Please install the mljar-mercury package to check the presentation:

pip install mljar-mercury

Mercury server can be run locally with the following command:

mercury run

The server will automatically detect all notebooks in the directory and serve them as interactive web applications. Here is a preview of how the presentation looks in the Mercury app:

The User can change widgets values and click the Run button to recompute slides:

It is possible to update the chart during the slideshow:

You can open the presentation in full-screen mode by pressing the F on the keyboard. Please press Esc to exit the full-screen view.

Summary

The Jupyter Notebook presentations can be very helpful for sharing your results with non-technical stakeholders. You can create a presentation with a mix of code and Markdown. There is no need to copy & paste charts in slides manually. The presentation update is just rerunning all cells. You can go one step further with Mercury open-source framework and create interactive presentations. The widgets can be added to the presentation. The user can tweak widgets values and recompute slides during the slideshow. What is more, Mercury gives you nice features like:

• export slides to PDF format,
• restricted access for authenticated users only,
• scheduled execution of slides.