In questi giorni sto provando la potente libreria JavaScript D3: nel mio primo tentativo ho utilizzato gli open data della regione Liguria riguardanti le statistiche occupazionali. Sono un principiante e ho scelto di inserire i dati direttamente nello script, così come viene suggerito dal tutorial che ho seguito su recursion.org. Il passaggio successivo sarà tentare di scrivere un algoritmo capace di gestire in automatico il file .xml disponibile online.
Inizialmente ho realizzato una pagina Html statica scrivendo due script separati per ciascun grafico. Quindi ho installato su Viroproject.com il plugin Wp-D3 così da poter inserire i grafici realizzati negli articoli di WordPress.
Ecco il risultato!
Occupati totali settori Primario e Secondario – Regione Liguria
Anni 2005-2012, Dati Codice: Stat0106, Data Aggiornamento: 2013-11-03
Fonte Regione Liguria.
media annua in migliaia
media annua in migliaia
Stile css per i grafici:
svg {
padding-bottom: 30px;
}
.stile {
height: 250px;
}
.stile2 {
height: 660px;
}
Script grafico Agricoltura
var data = [{year: 2005, posti: 16.5},
{year: 2006, posti: 17.6},
{year: 2007, posti: 16.9},
{year: 2008, posti: 17.8},
{year: 2009, posti: 17.7},
{year: 2010, posti: 18.2},
{year: 2011, posti: 16.8},
{year: 2012, posti: 16.5}
];
var barWidth = 85;
var width = (barWidth + 10) * data.length;
var height = 200;
var x = d3.scale.linear().domain([0, data.length]).range([0, width]);
var y = d3.scale.linear().domain([0, d3.max(data, function(datum) { return datum.posti; })]).
rangeRound([0, height]);
// add the canvas to the DOM
var barDemo = d3.select("#agricoltura").
append("svg:svg").
attr("width", width).
attr("height", height);
barDemo.selectAll("rect").
data(data).
enter().
append("svg:rect").
attr("x", function(datum, index) { return x(index); }).
attr("y", function(datum) { return height - y(datum.posti); }).
attr("height", function(datum) { return y(datum.posti); }).
attr("width", barWidth).
attr("fill", "#86B404");
barDemo.selectAll("text").
data(data).
enter().
append("svg:text").
attr("x", function(datum, index) { return x(index) + barWidth; }).
attr("y", function(datum) { return height - y(datum.posti); }).
attr("dx", -barWidth/2).
attr("dy", "1.2em").
attr("text-anchor", "middle").
text(function(datum) { return datum.posti;}).
attr("fill", "white");
barDemo.selectAll("text.yAxis").
data(data).
enter().append("svg:text").
attr("x", function(datum, index) { return x(index) + barWidth; }).
attr("y", height).
attr("dx", -barWidth/2).
attr("text-anchor", "middle").
attr("style", "font-size: 16; font-family: Helvetica, sans-serif").
text(function(datum) { return datum.year;}).
attr("transform", "translate(0, 18)").
attr("class", "yAxis");
Script grafico Industria
var data = [{year: 2005, posti: 130.4},
{year: 2006, posti: 134.6},
{year: 2007, posti: 140.9},
{year: 2008, posti: 137.3},
{year: 2009, posti: 133.8},
{year: 2010, posti: 130.2},
{year: 2011, posti: 129.2},
{year: 2012, posti: 120}
];
var barWidth = 85;
var width = (barWidth + 10) * data.length;
var height = 600;
var x = d3.scale.linear().domain([0, data.length]).range([0, width]);
var y = d3.scale.linear().domain([0, d3.max(data, function(datum) { return datum.posti; })]).
rangeRound([0, height]);
// add the canvas to the DOM
var barDemo = d3.select("#industria").
append("svg:svg").
attr("width", width).
attr("height", height);
barDemo.selectAll("rect").
data(data).
enter().
append("svg:rect").
attr("x", function(datum, index) { return x(index); }).
attr("y", function(datum) { return height - y(datum.posti); }).
attr("height", function(datum) { return y(datum.posti); }).
attr("width", barWidth).
attr("fill", "#0489B1");
barDemo.selectAll("text").
data(data).
enter().
append("svg:text").
attr("x", function(datum, index) { return x(index) + barWidth; }).
attr("y", function(datum) { return height - y(datum.posti); }).
attr("dx", -barWidth/2).
attr("dy", "1.2em").
attr("text-anchor", "middle").
text(function(datum) { return datum.posti;}).
attr("fill", "white");
barDemo.selectAll("text.yAxis").
data(data).
enter().append("svg:text").
attr("x", function(datum, index) { return x(index) + barWidth; }).
attr("y", height).
attr("dx", -barWidth/2).
attr("text-anchor", "middle").
attr("style", "font-size: 16; font-family: Helvetica, sans-serif").
text(function(datum) { return datum.year;}).
attr("transform", "translate(0, 18)").
attr("class", "yAxis");
