Brought to you by NumFOCUS Foundation and O’Reilly Media
The official Jupyter Conference
Aug 21-22, 2018: Training
Aug 22-24, 2018: Tutorials & Conference
New York, NY

nbinteract: Shareable interactive web pages from notebooks

Sam Lau (UC Berkeley), Caleb Siu (UC Berkeley)
4:10pm–4:50pm Friday, August 24, 2018
Community, Extensions and customization, Usage and application
Location: Beekman/Sutton North Level: Intermediate

Who is this presentation for?

  • Instructors, students, data scientists, bloggers, and journalists

Prerequisite knowledge

  • A working knowledge of Python
  • Familiarity with Jupyter

What you'll learn

  • Learn how using Jupyter notebooks with nbinteract simplifies authoring of interactive web pages


Jupyter widgets provide simple ways to add interactivity into notebooks. However, sharing these interactive notebooks is challenging since potential viewers need to open the notebook and run cells in order to interact with widgets. Although nbconvert can convert notebooks with widgets into HTML files, the widgets in the HTML files lose functionality because browsers typically don’t natively run Python.

The nbinteract Python package converts a notebook with widgets into a standalone HTML page that keeps widget functionality, enabling authors to create interactive web pages using Jupyter notebooks. These web pages can either display the original Python code or hide it to only present interactive elements. When a viewer interacts with a widget, a Binder kernel runs Python code behind the scenes to display the result. Combining widgets with plotting gives authors a function-driven, flexible way to create interactions on the plot’s data. Although matplotlib-based plotting is possible, interactions are laggy because images are too large to send over the network in real time. Nbinteract addresses this issue by supporting a set of plotting functions that generate Javascript-based plots. The reduced data sent through the network enables smooth, real-time interactions.

Sam Lau and Caleb Siu offer an overview of nbinteract and walk you through the steps to publish an interactive web page from a Jupyter notebook. To demonstrate how nbinteract’s set of functionality is particularly useful for creating materials to teach data science, Sam and Caleb share how they have used nbinteract for the online textbook of a popular UC Berkeley data science course. They conclude by opening up the floor to discuss other possible applications and use cases for the library.

Photo of Sam Lau

Sam Lau

UC Berkeley

Sam Lau is a graduate student at UC Berkeley, where he is working on a master of science, advised by Josh Hug. Sam is interested in improving data science education. Currently, he’s building tools to make it easy to create and publish interactive educational content online.

Photo of Caleb Siu

Caleb Siu

UC Berkeley

Caleb Siu is studying computer science and economics at UC Berkeley. Caleb is interested in applying data science in the context of education and social good. He’s currently working on nbinteract, a project that allows users to easily create interactive visualizations with just a few lines of Python.