Jupyter for Javascript

ObservableHQ is an online script notebook for javascript. With ObservableHQ, you can quickly run and rerun each line. Document or explain side-by-side and display outputs as they are generated.

It’s like running Node inside Notion.

Example of writing a notebook in ObservableHQ

Having a notebook helps think aloud

Good writing is good thinking. When you write code using a notebook tool, it is like thinking aloud in code.

Better yet, you can rerun single parts or the entirety of your script once you want to trail back and rethink something.

It is like having a time machine, where you can go back, change an event and see how the future changes.

ObservableHQ is similar to Jupyter for Javascript

If you have written Python, chances are you have used Jupyter. If not, check it out. Jupyter is excellent for data science. Using libraries like pandas makes it dead simple to parse files, query data and output some results.

Do you want to try it with different inputs, just tweak it and run again? It’s like a step-by-step debugger in your favourite IDE, but you can also go backwards.

How ObservableHQ works

You sign up/in. Probably using your GitHub account. Then you add notebooks. You add some markdown where needed or just lines of code, one by one.

Execute your entire script or rerun a single step, and the outputs of that step will be used to rerun the following steps.

Check out my published notebooks or perhaps an implementation mergesort

Implementation of mergesort in ObservableHQ

Using javascript libraries like d3 we can also plot inside the notebook similarly to how we can do using plotly in Jupyter

Using d3 to render a binary search tree

There are so many examples available on ObservableHQ or from ObservableHQ themselves, for example, their d3 visualization gallery.

Other alternative notebooks

I wanted to highlight ObservableHQ here because I only got a few hits when I googled for this exact title. Only this quora thread, was where I found ObservableHQ.

I also found notebookJS among the results, but this is built to run javascript inside jupyter which is different from what I was looking for.

ObservableHQ is a hidden gem. Perhaps it is more well known in other circles (data scientists).

I hope you’ll try it and that it helps shortcut your scripting experience.