Ben ritrovati, nella nostra serie di articoli sulla libreria d3.js siamo arrivati al come realizzare il famosissimo grafico a barre interattivo.

Un grafico a barre è una tipologia utilizzata per visualizzare la relazione tra una variabile numerica e una variabile categoriale. Fra questi vi sono anche grafici a barre impilate e raggruppate.

La creazione di grafici a barre in d3.js si basa sostanzialmente sull’aggiunta di diversi oggetti rect, uno per ogni gruppo nella variabile categoriale. Vediamone un esempio.
Preliminarmente, occorre ricordare che, prima ancora di costruire il nostro grafico, è necessario ordinare i gruppi con precisione, studiando la classificazione in modo da rendere evidente ciò che si vuole illustrare con il grafico.

La parte in html del codice serve per creare un file div che chiamiamo, con molta originalità, miei_dati, e che la libreria d3.js modificherà in seguito.

Vediamo ora il codice javascript.
La prima parte del codice javascript imposta un’area di tipo svg in cui costruire il grafico, specificandone le dimensioni e il margine.


var margin = {top: 30, right: 30, bottom: 70, left: 60},
width = 460 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;


Occorre poi fornire i dati del nostro grafico alla libreria. In questo caso, preleviamo i dati dal repository della libreria, da uno degli esempi. l file è in formato csv, per cui alla libreria occorre indicare la natura del file, con il modulo d3.csv:


var svg = d3.select("#miei_dati")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");

d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/7_OneCatOneNum_header.csv", function(data) {


Ora occorre creare il grafico partendo, come in tutta la Geometria analitica, dagli Assi cartesiani, creando una scala di tipo numerico che sarà il nostro asse Y e una scala di categorie che diverrà l’asse X.


var x = d3.scaleBand()
.range([ 0, width ])
.domain(data.map(function(d) { return d.Country; }))
.padding(0.2);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
.selectAll("text")
.attr("transform", "translate(-10,0)rotate(-45)")
.style("text-anchor", "end");

var y = d3.scaleLinear()
.domain([0, 13000])
.range([ height, 0]);
svg.append("g")
.call(d3.axisLeft(y));


Infine collochiamo le barre con una serie di rettangoli che la libreria costruisce partendo dai dati presenti nel nostro file:


svg.selectAll("mybar")
.data(data)
.enter()
.append("rect")
.attr("x", function(d) { return x(d.Country); })
.attr("y", function(d) { return y(d.Value); })
.attr("width", x.bandwidth())
.attr("height", function(d) { return height - y(d.Value); })
.attr("fill", "#69b3a2")


Se poi vogliamo uno schema ribaltato, con andamento orizzontale, cioè, occorre solo costruire l’asse al contrario.


var x = d3.scaleLinear()
.domain([0, 13000])
.range([ 0, width]);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
.selectAll("text")
.attr("transform", "translate(-10,0)rotate(-45)")
.style("text-anchor", "end");

// Y axis
var y = d3.scaleBand()
.range([ 0, height ])
.domain(data.map(function(d) { return d.Country; }))
.padding(.1);
svg.append("g")
.call(d3.axisLeft(y))


Questo è il codice

var margin = {top: 30, right: 30, bottom: 70, left: 60},
width = 460 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;

var svg = d3.select("#miei_dati")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");

d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/7_OneCatOneNum_header.csv", function(data) {

var x = d3.scaleBand()
.range([ 0, width ])
.domain(data.map(function(d) { return d.Country; }))
.padding(0.2);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
.selectAll("text")
.attr("transform", "translate(-10,0)rotate(-45)")
.style("text-anchor", "end");

var y = d3.scaleLinear()
.domain([0, 13000])
.range([ height, 0]);
svg.append("g")
.call(d3.axisLeft(y));

svg.selectAll("mybar")
.data(data)
.enter()
.append("rect")
.attr("x", function(d) { return x(d.Country); })
.attr("y", function(d) { return y(d.Value); })
.attr("width", x.bandwidth())
.attr("height", function(d) { return height - y(d.Value); })
.attr("fill", "#69b3a2")

})

E questo è tutto. Alla prossima…