Notebooks have always been a tool for the incremental development of software ideas. Data scientists use Jupyter to journal their work, explore and experiment with novel algorithms, quickly sketch new approaches and immediately observe the outcomes.

This interactivity is what makes Jupyter so appealing. To take it one step further, Data Scientists use Jupyter widgets to visualize their results or create mini web apps that facilitate navigating through the content or encourage user interaction.

However, IPyWidgets are not always easy to work with. They do not follow the declarative design principles pioneered by front-end developers, and the resulting components cannot be transferred as is in a browser environment. Also, the developers created these libraries mostly to cover the visualization needs of Data Scientists. Thus, they fall short of features that popular front-end frameworks like React and Vue bring to the table.

It is time to take the next step; This story introduces IDOM: a set of libraries for defining and controlling interactive webpages or create visual Jupyter components. We will discuss the latter.

Learning Rate is a newsletter for those who are curious about the world of AI and MLOps. You’ll hear from me every Friday with updates and thoughts on the latest AI news and articles. Subscribe here!

IDOM: React design patterns in Python

So, let’s get started with IDOM. For those familiar with React, you’ll find many similarities in the way IDOM does things.

We will create a simple TODO application inside Jupyter. Yes, I don’t know how this would help a Data Scientist, but what I’m trying to do is showcase IDOM’s capabilities. If you find any Data Science use cases, please leave them in the comments!

First, the code. Then, we will walk through one line at a time to understand how it works.

The idom.component decorator creates a Component constructor. This component is rendered in the screen using the function below it (e.g., todo()). Then, to display it, we need to call this function and create an instance of this component at the end.

Now, let’s get into what this function does. First, The use_state() function is a Hook. Calling this method returns two things: a current state value and a function that we can use to update this state. In our case, the current state is just an empty list.

Then, we can use the update function inside an add_new_task() method to do whatever we want. This function takes an event and checks if the event was produced by hitting your keyboard’s Enterkey. If that’s true, it retrieves the event’s value and appends it to the list of tasks.

To store the tasks that the user creates, we append their name in a separate tasks Python list, alongside a simple delete button. The delete button, when pressed, calls the remove_task() function, which updates the state just like the add_new_task() function. However, instead of adding a new item to the current state, it removes the selected one.

Finally, we create an input element to create TODO tasks and an HTML table element to hold them. In the last step, we render them using a div HTML tag.

It gets better

So far, so good. However, the power that IDOM gives us is not limited to displaying HTML elements. The real power of IDOM comes from its ability to install and use any React ecosystem components seamlessly.

In this example, let’s use victory, a set of React components for modular charting and data visualization. To install victory, we can use the IDOM CLI:

!idom install victory

Then, let’s use it in our code:

Congrats! You’ve just created a Pie chart with victory in a Jupyter Notebook! Of course, it is also straightforward to import and use your existing JavaScript modules. See how in the documentation.

Conclusion

Data Scientists use Jupyter widgets to visualize their results or create mini web apps that facilitate navigating through the content or encourage user interaction.

However, IPyWidgets are not always easy to work with. They also have some drawbacks: they do not follow declarative design principles, and the resulting components cannot be transferred as is in a browser environment.

It is time to take the next step; This story examined IDOM: a set of libraries for defining and controlling interactive webpages or create visual Jupyter components.

The IDOM API is described more exhaustively in the documentation. Also, you can play with idom-jupyter on Binder, before installing.

About the Author

My name is Dimitris Poulopoulos, and I’m a machine learning engineer working for Arrikto. I have designed and implemented AI and software solutions for major clients such as the European Commission, Eurostat, IMF, the European Central Bank, OECD, and IKEA.

If you are interested in reading more posts about Machine Learning, Deep Learning, Data Science, and DataOps, follow me on Medium, LinkedIn, or @james2pl on Twitter. Also, visit the resources page on my website, a place for great books and top-rated courses, to start building your own Data Science curriculum!