Ciao e benvenuti a questa guida su come creare un grafico a barre utilizzando il framework JavaScript: D3.js.
Se siete interessati nel funzionamento di questo grafico potete seguire questa guida, dove vi spiegherò passo per passo come creare il grafico. Se invece siete in cerca di una soluzione veloce per creare un diagramma a barre per il vostro sito, potete scaricare il codice completo e funzionante dalla repository ufficiale Devews.it.
Notate che questo codice può essere eseguito solamente tramite un web server come XAMP o WAMP. Dato che i browser, per motivi di sicurezza, non permettono a file html statici di avere accesso al File System.
Cominciamo con la guida!
Creare un diagramma a barre con JavaScript e D3.js
Cominciamo con il nostro codice HTML:
Nel nostro esempio andremo a leggere dei dati da un file .tsv e convertiremo i sui valori in un grafico a barre.
Il nostro file è strutturato in questo modo:
letter frequency
A .08167
B .01492
Etc
Lunico elemento HTML di cui abbiamo bisogno è lelemento svg, a cui daremo una altezza e larghezza nel seguente modo:
<svg width="960" height="500"></svg>
E importiamo D3.js con un link in fondo al nostro tag.
<script src="https://d3js.org/d3.v4.min.js"></script>
Passiamo al codice necessario per creare il nostro grafico dinamico. Per prima cosa selezioniamo lelemento <svg>, ed alcune costanti che definiscono le dimensioni del nostro grafico:
var svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 30, left: 40},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom;Ora creiamo delle variabili di Scala che assegneranno una scala agli assi del grafico:
var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
y = d3.scaleLinear().rangeRound([height, 0]);la scala X ha una scala di tipo scaleBand(), la quale generà un'asse diviso in bande. Proprio quello che ci serve per creare una grafo a barre.
Ora possiamo passare alla parte principale del nostro script: Aprire il nostro file di dati e disegnarli sul grafico.
Il mio file di dati è nel formato .tsv, quindi userò la funzione di D3 .tsv() per aprire il file. Ma potete usare anche formati .csv o json, (vedere questa guida per altri formati)
d3.tsv("data.tsv", function(d) {
return d;
}, function(error, data) {
if (error) throw error;
// resto del codice va qui nella funzione callback.
}
Il resto del codice lo andremo a inserire nella funzione callback. Vediamo come disegnare le barre.
Creiamo l'asse X a cui assegniamo la Scala creata precedentemente.
x.domain(data.map(function(d) { return d.letter; }));
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));Facciamo la stessa cosa con l'asse Y
y.domain([0, d3.max(data, function(d) { return d.frequency; })]);
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y).ticks(10, "%"));Bene! Per ora abbiamo un grafico composto da due assi, ma non abbiamo il contenuto del grafico. Andiamo a rimediare!
g.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.letter); })
.attr("y", function(d) { return y(d.frequency); })
.attr("width", x.bandwidth())
.attr("height", function(d) { return height - y(d.frequency); });Questa porzione di codice potrebbe sembrare la più spaventosa, ma insieme possiamo capire il suo funzionamento:
per ogni elemento nella variabile "data" creiamo un rect (rettangolo in D3.js). A questo rettangolo assegniamo i valori X e Y che saranno modificati dalle nostre funzioni di scala.
Infine assegniamo una larghezza ed unaltezza alle nostre barre.
Ci siamo! Ora potete caricare dei dati da un file e convertirli in un grafico a barre.
Notate che per aprire questo file, dovrete aprire il file index.html (che potete trovare sulla repository GitHub) con un server come WAMP o XAMP, etc. Questo è perché i browser non permettono a file statici HTML di avere acceso al file system del client per motivi di sicurezza.
Grazie e ricorda che sei libero di utilizzare questo esempio per il tuo sito, in cambio chiedo solamente che tu possa linkare questo tutorial sul tuo sito o di condividere il post su Facebook.
Grazie mille e alla prossima
