Introduzione

Per chi lavora nel settore dell’analisi dei dati si troverà spesso a lavorare con linguaggi come Python o JavaScript. Gestire le analisi, la programmazione, e la visualizzazione dei risultati in modo interattivo e allo stesso tempo produrre report leggibili tutto nello stesso momento è oggi possibile grazie ai Notebook interattivi. In particolare, per chi lavora con le librerie JavaScript è disponibile gratuitamente Observable, il Notebook interattivo. In questo articolo vedremo una breve introduzione all’uso di Observable e a comprendere meglio cosa sono i Notebook interattivi e a come usarli.

Che cosa sono i Notebook interattivi?

Per comprendere cosa siano i Notebook interattivi e come siano indispensabili, focalizziamo tre punti particolari sull’attività di un analista di dati:

• lavorare programmaticamente in modo interattivo
• focalizzare la o le parti del codice da modificare/testare/studiare
• stesura della documentazione

Chiunque lavori con JavaScript e con librerie grafiche come D3.js, avrà avuto spesso bisogno di lavorare con il codice in modo interattivo: modificare il codice in modo graduale e controllandone ogni volta i risultati dell’esecuzione, fino a cercare di arrivare ai risultati desiderati. Spesso si utilizza un browser per osservare i risultati di tali modifiche.

Inoltre spesso nel codice si prendono in considerazione solo alcune parti più piccole di codice (snippet) all’interno di un contesto generale eseguibile. In questo modo si possono focalizzare i punti importanti da modificare o studiare responsabili di una data funzionalità senza dover ogni volta considerare l’intero codice.

Infine, per chi lo fa per lavoro o per studio, al completamento del codice e del grafico, dovrà perdere ulteriore tempo a copiare ed incollare immagini e frammenti di codice per preparare la documentazione.

A questo punto possiamo introdurre i Notebook interattivi, come Observable e su come questi strumenti si occupino proprio di questo. Un Notebook interattivo permette di lavorare e modificare interattivamente parti di codice, vederne i risultati in tempo reale, e allo stesso tempo scrivere il tutto come un vero e proprio documento, ottimo per essere pubblicato, condiviso o stampato (dopotutto è un Notebook….).

Altro aspetto fondamentale da tenere in considerazione è che un Notebook interattivo è strutturato come una sequenza di celle. Ciascuna cella può essere utilizzata o a scopo testuale (con tutte le ricchezze dei formati HTML) oppure come “snippet” (un frammento di codice) in JavaScript. Grazie quindi a questa strutturazione, un Notebook come Observable apparirà come un vero e proprio quaderno dove testare i tuoi codici in JavaScript, rappresentando graficamente i risultati con immagini interattive, ed annotare descrizioni e spiegazioni.

Altri aspetti importanti

Per comprendere al meglio il funzionamento di Observable come Notebook, e prendere familiarità con la sua struttura a celle, vediamo qualche esempio pratico.

• salvataggio in qualsiasi momento dello status del lavoro (dati, codice, ecc..)
• concentrare tutte le attività in un solo ambiente/applicazione
• accessibilità online e trasferibilità: lavorare ovunque e con qualsiasi cosa abbia accesso online.

Aprire una pagina del notebook su Observable

Observable non si installa sul proprio computer, ma è disponibile online. E’ sufficiente collegarsi alla pagina https://observablehq.com e fare login o registrarsi. E’ possibile fare login direttamente utilizzando gli account di Twitter, GitHub o Google.

Una volta entrati in Observable, cliccate sul pulsante

Per aprire una nuova pagina del nostro notebook. All’inizio avremo una sola cella attiva con su scritto “Untitled”

Prima di cominciare, cambiamo il titolo del nostro Notebook, sostituendo “Untitled” con un testo più significato, per esempio “My first page”. Come potete vedere, la cella è divisa in due parti. La parte superiore, a sfondo bianco, è il risultato visuale dello snippet presente nella parte sottostante, in cui si andranno ad inserire i comandi o lo snippet in JavaScript.

Quindi sostituiamo il testo “Untitled” nella parte sottostante con “My first page”, poi clicchiamo sulla freccia blu al margine destro per eseguire le modifiche.

Assegnare il nome ad una cella

Per vedere il funzionamento di una cella come JavaScript, una delle operazioni più semplici che si fa è quella della definizione e dell’uso di variabili. Facciamo lo stesso con il Notebook Observable. Cliccate sul simbolo + sul margine inferiore sinistro della cella con il titolo per aprirne una nuova sottostante.

Dichiarate direttamente una variabile.

Cliccate sulla freccia blu per eseguire e vedrete nella parte bianca superiore apparire il medesimo comando. In questo caso, abbiamo dichiarato una variabile il cui valore sarà accessibile per tutte le altre celle del notebook. Con Observable, abbiamo però una peculiarità. Il dichiarare una variabile direttamente nella cella è come dichiarare il nome della cella.

Quindi ogni volta che farete riferimento a quella variabile, o se preferite il nome della cella, all’interno di un’altra cella, accederete al suo contenuto. Per ora il comportamento è quello di una semplice variabile.

Fin qui nessun problema, ma se proverete a definire due variabili all’interno di una cella vi darà errore.

Questo è il motivo per cui una variabile espressa direttamente deve essere vista come il nome della cella, e quindi univoca per ciascuna cella.

Celle JavaScript

Se invece vogliamo vedere una cella come uno snippet JavaScript lo possiamo vedere in due modi diversi:

• espressione
• blocco

Per quanto riguarda l’espressione è molto semplice, si usa una cella per effettuare un semplice calcolo numerico, in cui si possono usare anche variabili (nome di celle) definite altrove.

Mentre per avere un blocco JavaScript (un vero e proprio snippet) sarà sufficiente dichiarare il codice all’interno delle parentesi graffe.

L’istruzione let dichiara il blocco della visibilità di una variabile e, facoltativamente la inizializza ad un valore. In questo caso, infatti, x ed y sono variabili locali e non sono accessibili (visibili) all’esterno della cella. Per restituire il valore all’esterno della cella si usa return.

Nell’esempio precedente il valore restituito viene visualizzato in output. In casi più pratici, viene immagazzinato in una variabile, che poi, in Observable, assumiamo come nome della cella.

Celle Markdown

Abbiamo precedentemente detto che le celle possono essere utilizzate per inserire degli snippet di codice JavaScript o per parti testuali dove inserire i nostri commenti, descrizioni o altro. Prima di cominciare con gli esempi, abbiamo modificato il titolo della pagina, sostituendo il testo racchiuso tra apici. Ma prima degli apici vi era il comando md. Questo comando sta per Markdown, un linguaggio di markup che ci permette di inserire testi che possono essere poi convertiti facilmente in formato HTML.

Scriviamo per esempio il testo seguente. Potete utilizzare il simbolo * per racchiudere testo in corsivo (italico).

Celle DOM

Ma la funzionalità delle celle del Notebook non si limitano a questo. Infatti le celle possono generare oggetti DOM (HTML, SVG, Canvas, WebGL). Per esempio per visualizzare contenuto in HTML, è sufficiente aggiungere il template built-in html (in modo simile a md per il markdown).

All’interno di questi template html si possono utilizzare delle variabili al posto dei valori.

Le Promise – importare le librerie JavaScript

Per poter utilizzare al meglio il linguaggio JavaScript, ed in particolar modo nell’analisi dei dati e della loro visualizzazione, è necessario utilizzare delle librerie. Quindi anche in Observable, si renderà necessario doverle importare e questo è possibile tramite le promise.

Si possono quindi importare le librerie da npm con la funzione require.

I Generator – utilizzare le iterazioni nelle celle

Un altro concetto utile è quello dei generator. Questi non sono altro che celle che lavorano iterativamente, aggiornandosi ad ogni step (generalmente anche 60 volte al secondo).

Vediamo un esempio di cella generator

Non appena premerete la freccia blu, vedrete il contatore cominciare ad incrementare il suo valore in modo continuo. La variabile della cella generatore è i (come fosse il suo nome) e può quindi essere utilizzata anche in altre celle.

Per esempio anche la cella seguente verrà aggiornata con la stessa velocità del generator, riportando un valore sempre diverso.

Importare delle Celle da altri Notebook Observable

Observable è un vero e proprio quaderno interattivo, e come tale deve essere il più utile possibile non solo in termini di rappresentazioni grafiche ma anche di riutilizzabilità.

Infatti un’esigenza molto comune potrebbe essere quella di voler inserire nel nostro Notebook una cella contenuta in un altro Notebook. In questo caso, invece di riscrivere totalmente il codice, è possibile importarla direttamente tramite il comando import.

Adesso che abbiamo importato la cella con il nome ramp (variabile) dal notebook color-ramp di mbostock possiamo utilizzarla nelle celle seguenti. Per esempio, inserendo la cella seguente.

Conclusioni

Questo articolo è solo un’introduzione all’uso di questo splendido strumento che Observable. Sono state presentate solo alcune linee guida ed alcuni concetti fondamentali per comprendere la programmazione sui Notebook. In altri articoli approfondiremo l’uso di questo Notebook interattivo con casi pratici.