Cómo implementar una nube de etiquetas con D3.js
0. Índice de contenidos.
1. Introducción.
D3.js (Data-Driven Documents) es una librería Javascript para visualización de datos. Utiliza estándares web (HTML5, Javascript, SVG, CSS3) para visualizar los datos de multitud de formas diferentes: en mapas, gráficos estadísticos, calendarios, grafos, termómetros, barras, etc… y lo mejor de todo, que es opensource.
D3.js puede recoger los datos desde varias fuentes: CSV, XML, JSON, strings, etc. Permite personalizar las gráficas a nuestras necesidades: tamaños, colores, tipos de fuentes, etc.
En este tutorial vamos a utilizar uno de los gráficos de D3.js concretamente el que crea una nube de palabras. Este tipo de componente es muy útiles para visualizar de forma gráfica términos junto al peso que ocupan en un texto, a mayor número de veces que aparecen más grande será su peso en el gráfico.
2. Entorno.
El tutorial se ha realizado con el siguiente entorno:
- MacBook Pro 15′ (2.4 GHz Intel Core i5, 8GB DDR3 SDRAM).
- D3.js v3
3. Código fuente
Lo primero será crear el código de la página HTML e incluir las librerías Javascript. Son necesarias las librerías de d3.js por lo que incluimos la librería d3.v3.min.js. Para el componente que pinta la nube de etiquetas nos la descargamos de la web oficial. La implementación de la nube de etiquetas irá en el fichero cloud.js
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Nube de etiquetas</title> </head> <body onload="javascript: loaded();"> <script src="/wp-content/uploads/tutorial-data/http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="/wp-content/uploads/tutorial-data/./js/d3.layout.cloud.js"></script> <script src="/wp-content/uploads/tutorial-data/./js/cloud.js"></script> </body> </html>
En el fichero cloud.js añadimos el código del componente. Lo primero será crear el array de objetos json que representarán los datos de nuestra nube. Tomaré para ello las categorías de los tutoriales de adictosaltrabajo. No pongo todas porque son bastantes.
var words = [{"text": "Ajax", "size": 2},
{"text": "Android", "size": 3},
{"text": "Applets/Swing", "size": 2},
{"text": "ASP/.NET", "size": 4},
{"text": "BBDD", "size": 3},
{"text": "Big Data", "size": 6},
{"text": "BPM", "size": 3},
{"text": "C/C++", "size": 1},
{"text": "CRM", "size": 1},
{"text": "Cultura de Empresa/Efectividad personal", "size": 1},
{"text": "DCOM / ActiveX", "size": 1},
{"text": "Diseño Gráfico", "size": 1},
{"text": "Dispositivos móviles", "size": 1},
{"text": "EJBs/RMI ESB", "size": 3},
{"text": "Gestión Contenidos", "size": 4},
{"text": "Herramientas", "size": 1},
{"text": "Hibernate", "size": 5},
{"text": "HTML5", "size": 4},
...
];
Y ahora el código del componente:
var wordcloud, size = [700, 300];
var fillColor = d3.scale.category20c();
var fontSize = d3.scale.log().range([15, 100]);
function loaded() {
d3.layout.cloud()
.size(size)
.words(words)
.font("Impact")
.fontSize(function(d) { return fontSize(+d.size); })
.rotate(function() { return ~~(Math.random() * 5) * 30 - 60; })
.on("end", draw)
.start();
}
function draw(words) {
wordcloud = d3.select("body")
.append("svg")
.attr("width", size[0])
.attr("height", size[1])
.append("g")
.attr("transform", "translate(" + (size[0]/2) + "," + (size[1]/2) + ")");
wordcloud.selectAll("text")
.data(words)
.enter().append("text")
.style("font-size", function(d) { return d.size + "px"; })
.style("fill", function(d) { return fillColor(d.text.toLowerCase()); })
.attr("text-anchor", "middle")
.attr("transform", function(d) { return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; })
.text(function(d) { return d.text; });
}
En la carga de la página se ejecuta la función loaded que configura la nube de d3, tamaño del componente, tipo de fuente, tamaño de la fuente, ángulo de rotación de las palabras y por último la función draw encargada de pintar el componente. Esta función se llamará cuando se dispare el evento end que se llamará tras la carga de las palabras. La función draw se encarga de añadir al DOM el componente a partir de la etiqueta body. Se configuran las distintas opciones de manera declarativa.
El resultado tras la ejecución del código es el siguiente:
4. Referencias
La documentación más extensa tanto de D3 como del componente cloud la podrás encontrar en los siguientes enlaces:
5. Conclusiones.
Hemos visto cómo integrar un componente para visualizar datos en nuestra web sin mucho esfuerzo. El proyecto Data-Driven Documents (D3.js) contiene cientos de componentes que se configuran de una forma similar ya que todos comparten el mismo núcleo.
Espero que te haya sido de ayuda.
Un saludo.
Juan
