Benvenuti su questa nuova rubrica dedicata alla tecnologia, che sostituisce/arassorbe le rubriche su Raspberry, Python e Arduino che hanno costituito il settore tecnologico di questo blog negli scorsi anni.
Ci è sembrato giusto, però, dare una scossa al settore, spingendo per ampliare gli orizzonti sulla tecnologia tout court, sull’informatica e il web e sulle nuove etcnologie ecosostenibili, nella speranza di far cosa gradita ai nostri tecnologici lettori. Cominciano quindi questa rubrica dedicandoci al mondo della programmazione web con una libreria javascript per i grafici: D3.js.

D3.js (il nome di questa libreria deriva dall’acronimo di Data Driven Documents, ossia documenti guidati dai dati) è una potente libreria JavaScript di basso livello che crea grafici bellissimi e altamente personalizzabili, a partire da dati. Dati che possono essere forniti in molti modi:
1) all’interno della pagina web;
2) all’interno di un file CSV o JSON, sul PC o in remoto;
3) da altra fonte mediante javascript.

Si può scaricare la libreria dal sito oppure incorporarne l’URL direttamente usando un tag nella pagina HTML che contiene il codice JavaScript. Il codice si preoccupa di processare e creare la grafica, per cui non vi è alcun bisogno di scaricarlo in locale. Si può addirittura leggere il codice JavaScript di D3.js e modificarlo come si vuole (ma fatelo solo se siete esperti programmatori in Javascript, mi raccomando).

Scopo di questo e dei futuri articoli, comunque, non è smontare pezzo per pezzo la libreria, ma avviare i miei lettori ad un uso consapevole della stessa nelle loro pagine web, per endere più accattivanti e interattivi i grafici realizzati.

Punti di forza / Punti di debolezza

La libreria ha vari punti di forza. In primo luogo, permette di creare risultati professionali “on the fly”, come si dice in inglese, ovvero “al volo”, senza bisogno di salvare file PNG e PDF da integrare nel codice HTML.
Se si leggono dati da Internet o da un file locale che viene modificato, inoltre, basta ricaricare la pagina per aggiornare automaticamente i grafici, rendendo così più interattivi gli stessi grafici.
La libreria D3.js può anche creare grafici animati e interattivi anche se occorre dedicare del tempo a familiarizzare con la ricca API della libreria.
Ovviamente, però, ogni grafico di D3 richiede un file HTML che contiene l’albero del DOM (Document Object Model, ossia modello a oggetti del documento) e il codice JavaScript per manipolare il DOM e i dati. Il codice si può organizzare usando diversi file che potete richiamare con il tag come in un singolo file HTML.

Disegniamo con D3.js

Partiamo ora con un primo esempio di utilizzo della libreria. la prima cosa da fare è stabilire la tela su cui disegnare il grafico, ovvero il canvas.
Il canvas è infatti l’area assegnata a D3 per disegnare e, in genere, è più piccolo della finestra del browser. Per definire il canvas, occorre fornire le coordinate dei quattro angoli del canvas. Le coordinate del suo angolo in alto a sinistra sono (0,0), quelle dell’angolo in basso a sinistra sono (0, height), dove height è una variabile con il valore dell’altezza, dell’angolo in alto a destra sono (width, 0), sulla base del valore della variabile width che indica la larghezza, e quelle dell’angolo in basso a destra sono, ovviamente (width, height).
Il codice JavaScript di base è il seguente:

svg.append(“rect”)
.attr(“width”, width)
.attr(“height”, height)
.attr(“fill”, “yellow”);

SVG è un acronimo che sta per Scalable Vector Graphics ed è un formato per le immagini vettoriali basato su XML. Le dimensioni del canvas sono definite, come abbiamo già detto, dalle due variabili JavaScript width e height. Anche
i nomi degli attributi per creare rettangoli e quadrati sono width e height, mentre il rettangolo definito è appunto il canvas, colorato di giallo (“fill”, “yellow”).

Ed ecco il nostro primo file html con d3js:

E ora disegniamo qualcosa sul canvas.
Il codice JavaScript per disegnare un cerchio è come segue:

svg.append(“circle”)
.attr(“cx”, width/2-40)
.attr(“cy”, height/2-40)
.attr(“r”, 40)
.style(“fill”, “blue”);

Questo è il risultato.

Per scrivere del testo, invece, il codice è:

const message = "Benvenuti sul sito del CSB";
svg.append("text").text(message)
.attr('x', width/2)
.attr('y', height/2)
.style('fill', 'black');

svg.append("text").text(message)
.attr('x', 100)
.attr('y', 0+50)
.style('fill', 'red');


E questo è il risultato:

Analizziamo un po’ il codice.
Gli attributi per creare un cerchio sono cx, cy ed r, che corrispondono, rispettivamente, come può capire chi ha studiato al liceo geometria analitica, alle coordinate del centro del cerchio (in relazione al canvas) ed alla lunghezza del suo raggio.
Gli attributi x e y che compaiono nella maggior parte delle funzioni append() permettono di spostare la posizione del canvas attivo mettendola nelle coordinate desiderate, in modo da definire il punto in cui verrà posizionato il testo. Da notare che in attr(), il primo parametro è il nome dell’attributo (ad esempio, ‘x’), che è predefinito, mentre il secondo è il suo valore (ad esempio, width/2).

E per questa volta è proprio tutto. Alla prossima…