Nodebooks: Visualising Data the Node.js Way

Generating charts in Python notebooks using only Node.js code (part 3)

In part one of this series we saw how we could:

• Use Node.js code inside of Jupyter notebooks by adding pixiedust_node
• Use print and display in JavaScript and Python code to output and visualise data
• Add npm modules into our notebook and build functions using callbacks or promises

Part two added:

• Using store to move Node.js variables into the Python address space
• Using the silverlining library to access a Cloudant database
• Using print/display/store to show, visualise, and move data in a notebook

In this blog, we’re going to add some more npm modules into our notebook and show how you can create your own visualisations using only Node.js code.

There are two more Node.js pixiedust_node helper functions we haven’t introduced yet. Let’s fix that now.

Displaying HTML and images in notebook cells

We can use the html function to render HTML code in a cell:

The html function, rendered in a Jupyter Notebook cell.

If we have an image we want to render, we can do that with the image function:

The image function, rendered in a Jupyter Notebook cell.

We can use these tools to programmatically create custom visualizations for our data.

Making a chart

Let’s install another npm library called quiche:

Then we can generate QR codes on the fly:

We can fetch some data from our Cloudant database and visualise the data using the quiche library:

Using the *quiche* library in a Jupyter Notebook cell.

There’s no graphical pull-down menu to edit the visualisation as you get with PixieDust’s display function, but if you prefer generating charts programmatically, this is certainly an option.

Fetching from Redis

The are many Node.js modules available to help you. If you want to fetch real-time information from a remote Redis database, then the redis npm module is there to help:

Playing nicely together

Notebooks are great for experimenting with code in an interactive environment, where you can see code, data, visualisations, and documentation together on the same page. This overall view is useful for:

• Creating training scripts that guide users through a new API or service
• Prototyping code to perfect algorithms, explore the data you are working with, and sketch ideas before diving into the real code
• Building reports and dashboards that pull data from various sources

Easily visualising a data set with a single function call (PixieDust display) makes data exploration a breeze. As convenient as that is, sometimes it's better to collaborate with tools others find more familiar. Adding the power of the Node.js package management system brings a host of libraries into the mix to access, process, and visualise data.

Whether you’re using Python or Node.js, I hope the pixiedust_node extension helps you get your ideas out faster. Try it out and let me know what you build here in the comments, and please submit issues and pull requests. Cheers.