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
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 …) .
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
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
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.
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.
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.
For example, we write the following text. You can use the * symbol to enclose italic (italic) text.
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.
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.
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.