Grafici con D3.js su WordPress

martedì, settembre 9th, 2014. Scritto da Giulio Roberti

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.

AGRICOLTURA, SELVICOLTURA E PESCA

media annua in migliaia

INDUSTRIA

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");
  

Lascia un commento


Utilizzando il sito, accetti l'utilizzo dei cookie da parte nostra. maggiori informazioni

Questo sito utilizza i cookie per fornire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o cliccando su "Accetta" permetti il loro utilizzo.

Chiudi