Un poco de D3

D3.js es una librería Javascript para manejar datos de forma usable, para eso D3 usa HTML, SVG y CSS.

D3 permite mapear cualquier tipo de datos a un DOM (Document Object Model) y desde ahí aplicar transformaciones data-driven permitiendo generar documentos como estos:

Ver Galería completa (vais a flipar!).

A mí me ha encantado este ejemplo:

http://www.jasondavies.com/wordcloud/#http%3A%2F%2Fen.wikipedia.org%2Fwiki%2F%7Bword%7D=cloud

Veamos algo de código para que os hagáis una idea de como funciona:

Tabla HTML:

A partir de un Excel con este contenido:

Con este código D3:

D3 genera una tabla HTML como esta que cambia de color la celda sobre la que nos colocamos:

Y ahora veamos algo más visual!

Gráfico de barras simple:

Con este código:

var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];

d3.select("body").selectAll("div")

.data(dataset)

.enter()

.append("div")

.attr("class", "bar")

.style("height", function(d) {

var barHeight = d * 5;

return barHeight + "px";

});

D3 genera:

En esta URL podéis ver este ejemplo y como ir ampliando la funcionalidad para añadir labels, colores,…

En esta url podéis ver unos ejemplos de tipos de gráficos generados con D3 como:

Que en Javascript (+SVG) queda:

<div id="paired-bar-chart">

<script type="text/javascript">

<!– Data for bar chart: Two time-series, alternating to form a single series. Bar Color will switch back & forth –>

var data = d3.range(10).map(Math.random);

var data = [23, 85, 67, 38, 70, 30, 80, 18 ];

var colorlist = ["maroon", "darkblue"];

var labellist = ["Reagan (1982/84/87)", "", "Bush I (1990)", "", "Clinton (1993/1997)", "", "Obama (proposed, 2011)", ""];

var w = 815,

h = 260,

labelpad = 165,

x = d3.scale.linear().domain([0, 100]).range([0, w]),

y = d3.scale.ordinal().domain(d3.range(data.length)).rangeBands([0, h], .2);

var vis = d3.select("#paired-bar-chart")

.append("svg:svg")

.attr("width", w + 40)

.attr("height", h + 20)

.append("svg:g")

.attr("transform", "translate(20,0)");

var bars = vis.selectAll("g.bar")

.data(data)

.enter().append("svg:g")

.attr("class", "bar")

.attr("transform", function(d, i) { return "translate(" + labelpad + "," + y(i) + ")"; });

bars.append("svg:rect")

.attr("fill", function(d, i) { return colorlist[i % 2]; } ) //Alternate colors

.attr("width", x)

.attr("height", y.rangeBand());

bars.append("svg:text")

.attr("x", 0)

.attr("y", 10 + y.rangeBand() / 2)

.attr("dx", -6)

.attr("dy", ".35em")

.attr("text-anchor", "end")

.text(function(d, i) { return labellist[i]; });

var rules = vis.selectAll("g.rule")

.data(x.ticks(10))

.enter().append("svg:g")

.attr("class", "rule")

.attr("transform", function(d) { return "translate(" + x(d) + ", 0)"; });

rules.append("svg:line")

.attr("y1", h)

.attr("y2", h + 6)

.attr("x1", labelpad)

.attr("x2", labelpad)

.attr("stroke", "black");

rules.append("svg:line")

.attr("y1", 0)

.attr("y2", h)

.attr("x1", labelpad)

.attr("x2", labelpad)

.attr("stroke", "white")

.attr("stroke-opacity", .3);

rules.append("svg:text")

.attr("y", h + 8)

.attr("x", labelpad)

.attr("dy", ".71em")

.attr("text-anchor", "middle")

.text(x.tickFormat(10));

</script>

<br/>

</div>

D3 nos permite trabajar con CSV, JSON, XML,…

Para este CSV:

Con este script:

D3 genera:

Esto mismo en JSON:

Con este script:

D3 tiene numerosos tutoriales y ejemplos por lo que conseguir el tipo de representación que buscáis consiste en adaptar alguno de estos ejemplos en la mayor parte de los casos ;):

Por ejemplo aquí podéis acceder a gran cantidad de ellos: https://github.com/mbostock/d3/wiki/Tutorials

Podéis descargar D3 desde aquí ,y acceder al código fuentes y ejemplos, para usarlo basta importar en vuestro HTML:

Y para acabar el post la opinión sobre D3 del tío más interesante del mundo (je,je!)

(Te lo debía Luis, aunque para ti llega ya muy tarde creo que a Mario le gustará ;))

Deja un comentario