Realizato da

Pubblicato il

d3.js

javascript

grafico

barre

grafo

diagramma


creare un grafico a barre con d3.js e javascriptCiao 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…

L’unico elemento HTML di cui abbiamo bisogno è l’elemento 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 l’elemento <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)

Apriamo il file, e passiamo il suo contenuto alla nostra funzione callback, dove andremo a  creare le barre del grafico.
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 che saranno modificati dalle nostre funzioni di scala.

Infine assegniamo una larghezza ed un’altezza 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

Se hai una domanda puoi chiedere qualsiasi cosa nei commenti in basso

Grazie per aver letto questa guida su Devnews.it

Spero ti sia stata utile in qualche modo. Ti prego di supportare questa pagina mettendo mi piace alle nostre pagine social cliccando un basso, dove pubblichiamo regolermente notizie, tutorial e fatti curiosi sull'informatica. Grazie e ci vediamo alla prossima :)