Tecnologie per il domani puntata 2: Introduzione a D3.js parte 2 – Un grafico è sempre un grafico

Nella scorsa puntata, abbiamo visto come disegnare sul canvas con D3.js. Ma abbiamo appena scalfito il potere di questa libreria.
Passiamo ora a rappresentare graficamente un singolo gruppo di valori interi generati causalmente con del codice JavaScript. Ogni volta che caricheremo il file dati.html otterremo un output diverso.

Prima di iniziare, ricordo che, come molte librerie, non solo javascript, D3.js ha diverse versioni. Quella usata in questo articolo è la v5. per cui, prima del nostro script, nella parte all’interno dei due tag , bisogna inserire il rfieirmento alla libreria, ovvero

Ovviamente, si può anche scaricare la libreria e puntare al filedella libreria in locale, ma la sintassi è per il resto la stessa.
I dati sono inoltre salvati in una variabile JavaScript che chiamiamo dataSet e generati casualmente.
Il numero di data point in dataSet è contenuto, invece, nella variabile totalPoints.

I valori degli elementi nella variabile dataSet vanno da 0 a un valore che non possiamo definire a priori, così lo indichiamo con max, un’altra variabile definita dall’utente. Questi valori sono visualizzati sull’asse y, mentre l’asse x usa tutti i valori da 0 a un valore non prevedibile indicato con una variabile denominata in questo caso totalPoints, variabile che contiene il numero di punti di dataSet. Dato che entrambi gli assi usano valori numerici, la funzione d3.scaleLinear() viene usata sia per xScale sia per yScale. L’asse x viene creato con una chiamata a d3.axisBottom(xScale) mentre per l’asse y viene fatta una chiamata a d3.axisLeft(yScale). Come si può intuire, con la funzione d3.axisBottom() viene posizionato un asse alla base del grafico, mentre d3.axisLeft() ne mette uno sul lato sinistro. Ovviamente, si può anche modificare la posizione degli assi usando, ad esempio, d3.axisRight() e d3.axisTop() per mettere il vostro asse a destra o in alto, rispettivamente.
Invece yScale = d3.scaleLinear().domain([0, max]).range([height, 0]); è usato per dire a D3.js che i valori dell’asse y saranno rappresentati usando valori compresi tra 0 e quello della variabile height. Il range dei valori reali viene restituito dalla chiamata a domain(). xScale = d3.scaleLinear(). domain([0, totalPoints-1]).range([0, width]); dice invece a D3.js che i valori reali sull’asse x andranno da 0 a totalPoints-1, che questo è il lavoro di xScale.domain() e che i valori saranno rappresentati da cifre comprese tra 0 e width, ovvero quelli validi nel canvas. xScale e yScale, infine, gestiscono i valori reali e come saranno rappresentati sullo schermo. Anche se i valori reali non cambiano, le dimensioni del canvas e dell’area in cui si possono rappresentare i valori possono variare. In termini tecnici, questi oggetti Scale mappano un dominio di input in un range di output. Il dominio di input deriva dai dati, l’output è legato al computer e al suo schermo. Gli oggetti Scale sono funzioni che accettano un valore dal dominio di input e ne restituiscono uno che appartiene al range di output. Oltre alla scala lineare, in cui sia input sia output sono spazi lineari,vi sono anche altre soluzioni: D3.js offre anche d3.scaleIdentity(), d3.scaleTime(), d3.scaleLog(), d3.scaleSqrt(), d3.scalePow(), d3.scaleSequential(), d3.scaleQuantize(), d3.scaleQuantile(), d3.scaleThreshold(), d3.scaleBand(), d3.scalePoint() e d3.scaleOrdinal() .
Le più utili sono:
d3.scaleTime(), il cui input è una data mentre il suo output è un valore numerico e, come si può intuire, viene usato per rappresentare date e orari, e d3.scaleOrdinal(), che è utilizzato quando l’input è un dominio discreto, ad esempio un gruppo di categorie, da mappare con valori predefiniti.
Gli altri oggetti sono usati meno di frequente.
La chiamata d3.line() viene usata per tracciare una linea. Il dataset viene aggiunto all’output usando un blocco
svg.append(“path”) con una classe line alla fine del codice JavaScript.
Il codice CSS ha un ruolo chiave in questo caso, perché specifica le caratteristiche della riga da visualizzare.

Questo è il listato dello script, da inseriee dopo il link alla libreria:

E questo è il risultato:

E anche per questa puntata è proprio tutto.
Alla prossima…

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.