Visualizzare i dati con D3 (Italiano)

Fino ad ora i dati erano inclusi nel file script.js. È possibile (e anche raccomandato) mettere i suoi dati in un file separato.

D3 accetta molti formati di file di dati: CSV, TSV, JSON…(se necessario, per saperne di più su questi formati, controllate queste attività).

D3 fornisce metodi per recuperare questi dati:

  • il metodo d3.csv() recupera dati in formato CSV
  • il metodo d3.tsv() recupera i dati in formato TSV
  • il metodo d3.json() recupera i dati in formato JSON

In tutti i casi, questi metodi accettano due parametri: il percorso del file che contiene i dati e una funzione anonima.

Fai da te 12.1

Scarica il file dati.csv

Apri con un foglio elettronico o un editor di testo.

Nel resto di questa attività useremo il file dati.csv, mettilo nella stessa directory del file script.js

Fai da te 12.2

script.js

var body=d3.select("body");d3.csv("donnees.csv",function(data){ var para=body.selectAll("p").data(data); para.enter() .append("p") .text(function(d,i){ return ("Le "+d.jour+" il y a eu "+d.nbre_visiteurs+" visiteurs") });}); 

Analizzare e testare questo codice

La funzione di callback (d3.csv(“data.csv”,function(data)) prende un parametro: dati, questo parametro contiene i “dati” che sono stati appena scaricati.

Nella funzione .text(function(d,i) il parametro d, corrisponde a una riga del file CSV (la prima riga corrisponde alle intestazioni delle colonne). Ci sono tanti tag &ltp&gl quante sono le righe nel file CSV (eccetto la riga che contiene le intestazioni). d.day recupera i dati contenuti nella colonna che ha il giorno come intestazione (lo stesso per d.nbre_visitors).

Riprendiamo la struttura dei dati. Nel nostro caso, abbiamo:

 

Come potete vedere, abbiamo un array di oggetti JavaScript. Ogni oggetto nell’array corrisponde a una riga del file CSV.

Nelle funzioni di callback il parametro d corrisponde a uno degli oggetti dell’array, quindi usare la notazione punteggiata (ad esempio d.nbre_visitors) ha senso.

Fare da soli 12.3

Utilizzando quanto appena visto, completate il seguente programma in modo da visualizzare il numero totale di visitatori.

 var body=d3.select("body");d3.csv("donnees.csv", function(data) {var somme=0;for (i=0;i&ltdata.length;i++){.....................}body.append("p").text("Il y a eu "+somme+" visiteurs");}); 

Come potete vedere, abbiamo un piccolo problema poiché otteniamo una concatenazione invece di una somma.

I valori dell’array di dati sono considerati stringhe e non numeri. Vedremo un po’ più avanti come risolvere questo problema.

Nell’esempio precedente, abbiamo usato un ciclo “classico” per passare attraverso tutti gli elementi dell’array, D3js offre un’altra soluzione con i dati.forEach

Fare da soli 12.4

script.js

var body=d3.select("body");d3.csv("donnees.csv", function(data) {var somme=0;data.forEach(function(d){somme=somme+d.nbre_visiteurs;});body.append("p").text("Il y a eu "+somme+" visiteurs");}); 

Analizza e testa questo codice

Come puoi vedere, forEach è un metodo che prende come parametro una funzione anonima. Questa funzione anonima prende come parametro d che corrisponde a un elemento dell’array di dati. forEach permette di fare un ciclo su tutti gli elementi dell’array.

data.forEach(function(d){ somme=somme+d.nbre_visiteurs;}); 

è equivalente a

for (i=0;i&ltdata.length;i++){ somme=somme+data.nbre_visiteurs;} 

Dobbiamo ancora risolvere il problema di concatenazione (d.nbre_visitors è una stringa non un numero).

Anche qui, D3js ci facilita la vita fornendo una “istruzione” per trasformare “automaticamente” la stringa in un numero (quando possibile, ovviamente):

d.nbre_visiteurs= +d.nbre_visiteurs 

permette di trasformare le stringhe in numeri in tutto l’array di dati.

Per fare da sé 12.5

script.js

var body=d3.select("body");d3.csv("donnees.csv", function(data) {var somme=0;data.forEach(function(d){ d.nbre_visiteurs= +d.nbre_visiteurs;somme=somme+d.nbre_visiteurs;});body.append("p").text("Il y a eu "+somme+" visiteurs");}); 

Analizza e prova questo codice

Come puoi vedere, tutto funziona normalmente.6

Utilizzando il file data.csv, crea un programma per ottenere questo:

Per aiutarti:

Puoi basarti su quanto fatto nell’attività 8 (“Do it yourself 8.5”)

Si può evitare di dover scrivere tutti i giorni della settimana:

var echelleX=d3.scale.ordinal() .domain() .rangeBands(); 

scrivendo:

var echelleX=d3.scale.ordinal() .rangeBands();....................echelleX.domain(data.map(function(d,i) { return d.jour; })); 

data.map(function(d,i) { return d.day; }) restituisce un array

Similmente, poiché si può non conoscere il valore massimo, è possibile sostituire:

var echelleY=d3.scale.linear() .domain() .range(); 

con:

var echelleY=d3.scale.linear() .range();....................echelleY.domain(); 

d3.max(data, function(d,i) { return d.nbre_visitors; }) è equivalente a .domain(). Il metodo d3.max restituisce il valore massimo.

Come già detto sopra, è anche possibile lavorare con dati in formato TSV o JSON, il principio è esattamente lo stesso.

Lascia un commento

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