Have you ever tried to make notebooks and the JavaScript environment work together well?
I'd like to share my story of how I was trying to make JavaScript and notebooks friends.
But why would anyone want to use JavaScript in Jupyter? Let's reveal the motivation behind this idea.
Working in the notebook with Python, you may face the need to use the data visualization library that might not have a version for Python. Sure, Python has a rich ecosystem and chances that you'll find an alternative solution are quite high. But what if above all other libraries you'd like to use exactly this one you like most?
The first thing that comes to mind is to use a JavaScript kernel. And this sounds absolutely logical. But following this approach and trying importing npm modules to my notebook, I encountered a lot of troubles in doing so. JavaScript kernels seemed to be great for running code that doesn't depend on third-party library's usage.
There can be many other reasons to use JavaScript instead of Python. And regardless of the nature of these reasons, JavaScript developers deserve to experience the benefits of using this environment in full.
Searching for other approaches to use a JavaScript-based data visualization library in a notebook, I almost became despair. And that was the moment when I came across Observable.
What is Observable
As its creators say, Observable is a magic notebook that helps you make the most of your data. For me, it's indeed magical: running JavaScript code in this web-based environment turned out to be easy, as well as importing a custom library.
For the sake of accuracy, it's worth saying that Observable uses not plain JavaScript but rather its "flavor". You can read about all the syntax features here.
Observable notebooks offer features you'd expect from a traditional notebook:
- Quick prototyping of visualizations
- Running code in cells is accompanied by visual outputs
But the thing that makes Observable different is the concept of reactivity.
How often do you face an exception once you run a cell and it didn't contain a variable which the current code is dependent on? I bet quite often. This is what can be solved by bringing reactivity to the cells. Reactivity means the following: once a certain cell is changed, every other cell that references it is updated as well to reflect the applied modifications. Plus, there is no need to refresh the page once you edit code. The output is changed in real-time.
To dig deeper, you can read about topological order. I hope you’ll find it fascinating and innovative as I do.
Differences between Jupyter Notebooks and Observable
Before we dive into the practical part of this article, here are fundamental differences you should pay attention to:
The first difference that you may find unusual is that the output is always above the code you run.
The way you write a multi-line statement. To run it in a single cell, you need to surround it with curly braces.
In contrast to Jupyter, cells are not executed in top-to-bottom order. As previously mentioned, the order depends on the connections between cells' contents.
Data visualization with Flexmonster and Observable
I was surprised at how gracefully this project stitches together the paradigm of notebooks and JavaScript development. Out of curiosity, I started experimenting.
Firstly, I imported Flexmonster - the library for web reporting using the module for importing external libraries to Observable.
Next, I've defined a <div> container using an HTML template literal. After, I've created an instance of a pivot table which would help me to summarize raw data. To see the pivot table tool rendered, I've run the cell. Then I set a report by dragging and dropping the fields on the grid, filtered the records and highlighted values with colors. And all this interactively.
Note that if you're editing the report interactively, you need to save the results to JSON via the Toolbar button. This JSON can be inserted into the pivot table configuration or uploaded via the setReport API call.
Let’s check out the results we achieved so far:
Live demo
The code is worth a thousand words. You can fork my notebook and play with it. I encourage you to come with your unique ways of exploring data with Flexmonster and Observable.
Feedback
Please share your thoughts in the comments below. I'd be happy if you shared your experience in using Observable and other ways to avoid clumsy workarounds on making third-party libraries work in the Jupyter environment.
Further reading
- If you just like me have a Jupyter background, you may find this quick start guide handy. It covers the basics of working with Observable.
- The quick start guide on using Flexmonster Pivot Table.
- Get familiar with D3.js in Observable notebooks: there are plenty of examples to get you started.
Top comments (0)