Jan 1, 0001 00:00 · 492 words · 3 minute read

With the Corona crisis ongoing, the John Hopkins CSSE 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 practicing data visualization with Observable.

TODO: Insert visualization here

Obserable provides interactive JavaScript notebooks. They 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 founded by the creator of d3.js, the most popular data visualization library for JavaScript - this explains the focus on data visualization, I guess! 😄

My past experience with interactive notebooks in general is mostly with Jupyter Notebooks in Python. With Jupyter Notebooks, you can either self-host them or get them hosted, e.g. on Azure Notebooks or Google Notebooks. 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.

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:

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.

Not a big deal, but you need to read the docs to get this, even if you already now JavaScript.

All in all, this was a really cool learning experience and I 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!