Introduction

For those working in the data analysis sector, you will often find yourself working with languages like Python or JavaScript. Manage the analysis, the programming, and the visualization of the results in an interactive way and at the same time produce readable reports all at the same time is now possible thanks to interactive notebooks. In particular, for those who work with JavaScript libraries, the interactive Notebook is available for free. In this article we will see a brief introduction to the use of Observable and to better understand what interactive notebooks are and how to use them.

What are interactive notebooks?

To understand what interactive notebooks are and how they are indispensable, let’s focus on three particular points about the activity of a data analyst:

• work programmatically interactively
• focus the part (s) of the code to be modified / tested / studied
• drafting of documentation

Anyone who works with JavaScript and with graphic libraries like D3.js, will often have needed to work with the code interactively: change the code gradually and check each time the results of the execution, until trying to get to the desired results . Often a browser is used to observe the results of these changes.

Furthermore, in the code only a few smaller pieces of code (snippets) are taken into consideration within a general executable context. In this way it is possible to focus the important points to be modified or studied responsible for a given functionality without having to consider the entire code each time.

Finally, for those who do it for work or study, upon completion of the code and the graphic, they will have to spend more time copying and pasting images and code fragments to prepare the documentation.

At this point we can introduce interactive notebooks, such as Observable, and how these tools deal with this. An interactive Notebook allows you to work and interactively modify parts of code, see the results in real time, and at the same time write everything as a real document, great to be published, shared or printed (after all it’s a Notebook …) .

Another key aspect to consider is that an interactive notebook is structured like a sequence of cells. Each cell can be used either for textual purposes (with all the riches of HTML formats) or as a “snippet” (a piece of code) in JavaScript. Thanks to this structure, a Notebook like Observable will appear as a real notebook where you can test your codes in JavaScript, graphically representing the results with interactive images, and annotating descriptions and explanations.

Other important aspects

To better understand Observable as a Notebook, and get familiar with its cellular structure, let’s see some practical examples.

• save the status of the job at any time (data, code, etc.)
• concentrate all activities in a single environment / application
• online accessibility and transferability: work anywhere and with whatever has online access.

Open a notebook page on Observable

Observable does not install on your computer, but is available online. Just log on to the https://observablehq.com page and log in or register. It is possible to login directly using Twitter, GitHub or Google accounts.

Once in Observable, click on the button

To open a new page on our notebook. At the beginning we will have only one active cell with “Untitled” written on it

Before starting, let’s change the title of our Notebook, replacing “Untitled” with a more meaningful text, for example “My first page”. As you can see, the cell is divided into two parts. The upper part, with a white background, is the visual result of the snippet in the lower part, where you will enter the commands or the snippet in JavaScript.

Then we replace the “Untitled” text in the lower part with “My first page”, then we click on the blue arrow on the right margin to make the changes.

Assign the name to a cell

To see how a cell works like JavaScript, one of the simplest operations you can do is to define and use variables. We do the same with the Observable Notebook. Click on the + symbol in the lower left margin of the cell with the title to open a new one below.

Directly declare a variable.

Click on the blue arrow to execute and you will see the same command appear in the upper white part. In this case, we declared a variable whose value will be accessible to all the other cells of the notebook. However, with Observable, we have a peculiarity. Declaring a variable directly in the cell is like declaring the name of the cell.

So every time you refer to that variable, or if you prefer the name of the cell, inside another cell, you will access its contents. For now the behavior is that of a simple variable.

So far no problem, but if you try to define two variables within a cell it will give you an error.

This is why a directly expressed variable must be seen as the name of the cell, and therefore unique for each cell.

JavaScript cells

If instead we want to see a cell as a JavaScript snippet we can see it in two different ways:

• expression
• block

As for the expression it is very simple, we use a cell to perform a simple numerical calculation, in which we can also use variables (cell names) defined elsewhere.

While to have a JavaScript block (a real snippet) it will be sufficient to declare the code inside the curly brackets.

The let statement declares the visibility block of a variable and optionally initializes it to a value. In this case, in fact, x and y are local variables and are not accessible (visible) outside the cell. To return the value outside the cell, use return.

In the previous example the returned value is displayed in output. In more practical cases, it is stored in a variable, which then, in Observable, we assume as the name of the cell.

Markdown Cells

We have previously said that the cells can be used to insert snippets of JavaScript code or for textual parts where to insert our comments, descriptions or other. Before starting with the examples, we modified the page title, replacing the text enclosed in quotes. But before the quotes there was the command md. This command stands for Markdown, a markup language that allows us to insert texts that can then be easily converted to HTML format.

For example, we write the following text. You can use the * symbol to enclose italic (italic) text.

DOM Cells

But the functionality of the Notebook’s cells is not limited to this. In fact the cells can generate DOM objects (HTML, SVG, Canvas, WebGL). For example, to display HTML content, simply add the built-in html template (similar to md for the markdown).

Within these html templates you can use variables instead of values.

Le Promise – import JavaScript libraries

279/5000In order to make the best use of the JavaScript language, and especially in the analysis of data and their visualization, it is necessary to use libraries. Therefore also in Observable, it will be necessary to import them and this is possible through the promises.

You can then import libraries from npm with the require function.

Generators – use iterations in the cells

Another useful concept is that of the generators. These are nothing more than cells that work iteratively, updating each step (usually 60 times per second).

Let’s look at an example of a cell generator

As soon as you press the blue arrow, you will see the counter start to increase its value continuously. The generator cell variable is i (as was its name) and can therefore also be used in other cells.

For example also the following cell will be updated with the same speed as the generator, reporting a value that is always different.

Import Cells from Other Observable Notebooks

Observable is a real interactive notebook, and as such must be as useful as possible not only in terms of graphic representations but also of reusability.

In fact a very common requirement could be to want to insert in our Notebook a cell contained in another Notebook. In this case, instead of completely rewriting the code, it is possible to import it directly via the import command.

Now that we have imported the cell with the ramp name (variable) from mbostock’s color-ramp notebook we can use it in the following cells. For example, entering the following cell.

Conclusions

This article is just an introduction to the use of this wonderful tool that Observable. Only a few guidelines and some basic concepts have been presented to understand the programming on the Notebooks. In other articles we will deepen the use of this interactive notebook with practical cases.