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
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:
greetingsa select widget,
namea text input,
points_counta slider widget,
colora 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:
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.
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.
Join our newsletter
Subscribe to our newsletter to receive product updates