Exploring Observable's interactive JavaScript Notebooks

With the Corona/Covid-19 crisis ongoing, the John Hopkins CSSE (Center for Systems Science and Engineering) provides a dataset on the number of infections per country. The dataset is compiled from information by the WHO, and publicly available as a CSV on GitHub.

I took it as a chance for trying out Observable & visualize the number of infections in Germany:

Observable provides interactive JavaScript notebooks. You can find my notebook here.

Observable’s notebooks can be used for any kind of JavaScript development, but one of the primary use cases is data visualization. Notebooks can be easily published and shared. As the code (not just the result) is part of the notebook, viewers can reproduce the results, and make their own modifications. It was co-founded by Mike Bostok, the creator of D3.js, the most popular data visualization library for JavaScript - this explains the focus on data visualization, I guess! 😄

Regarding interactive notebooks, I have some experience with Jupyter, focussing on Python. With Jupyter Notebooks, you can either self-host them or get them hosted, e.g. on Azure Notebooks or Google Colab. Python has better libraries for data science and Machine Learning - this is a plus for Jupyter. On the other hand, using Observable & JavaScript enables me to directly use the code on any of my websites. Also, using JavaScript makes it easier to add interactivity, e.g. let the user set parameters on what should be visualized. This is why I find Observable especially interesting.

My take on Observable

Trying out Observable was cool and I will definitively use it again, but I find it less intuitive to use than Jupyter. The most confusing factor was that code does not run from top to bottom. Instead, it is similar to a spreadsheet - individual cells get updated when one of their referencing values changes. So, changing a cell can impact quite a lot of other cells, without you having to trigger a recalculation. You can see the relations between cells by clicking on the “minimap” in the top right.

In general, it is a bit confusing that “Observable’s not JavaScript”. It has some slightly different characteristics. For example, each cell can just have one expression by default, because in the end, each cell will have exactly the value of this expression. The way to have multiple expressions in one cell is to nest them in curly braces and then return at the end - the cell will have this value. You can, but don’t need to give this value a name:

1
2
3
4
5

name = {
  const a = 3;
  const b = 4;
  return a + b; 
}

Then, you can refer to the cell’s value in other cells by using this name.

These differences are not a big deal, but you need to read the docs to get this - even if you already know JavaScript.

All in all, this was a really cool learning experience and I can see myself using Observable often in the future. I especially liked the clean looks and how snappy everything was. And I think it’s awesome that they themselves are using their notebooks for documenting their own platform!