Descripción
D3, acrónimo de Data-Driven Documents, es una librería de alto nivel JavaScript para la creación de gráficos y visualizaciones de datos interactivos que se ejecutan como una página web. Para ello utiliza HTML, CSS, DOM y SVG como tecnologías web base. Fue creada por Mike Bostock y Jeffrey Heer en 2011.
La principal característica de D3 es que permite un control total sobre todos los elementos que componen la visualización, así como la interacción con cada uno de ellos. D3 permite crear gráficos interactivos combinando elementos de las diferentes capas que componen una página web: lenguaje HTML, manipulación de los objetos que constituyen el documento mediante nodos DOM (Document Object Model), aplicación de estilos mediante CSS (Cascading Style Sheets) y, obviamente, JavaScript, con lo que se obtienen gráficos en formato SVG (Scalable Vector Graphics) que pueden ser visualizados directamente por cualquier navegador web. Así, el acrónimo D3 hace referencia al hecho de enlazar directamente datos con elementos del DOM, que permite su actualización inmediata según los cambios que se produzcan en los datos y genera de esta manera visualizaciones interactivas y dinámicas. Los datos pueden provenir de diferentes fuentes y formatos, como CSV o JSON, por ejemplo.
Uno de los aspectos más interesantes de D3 es la existencia de diferentes layouts para crear visualizaciones, como si fueran plantillas, incluyendo la mayoría de los más habituales, entre otros diagramas de Sankey, treemaps, grafos de fuerza dirigidos y mapas, por ejemplo.
Enlace al recurso
Ejemplo de uso
El código siguiente, que usa la versión v3 de D3.js, muestra un gráfico de barras horizontal e incluye una mínima interactividad cuando el usuario sitúa el cursor por encima de una de las barras. Básicamente, este código define dos estilos para las barras, uno de color azul acero y otro de color naranja cuando la barra está bajo el cursor (operación hover). Después de definir los datos de ejemplo en el array data, se crea un elemento llamado svg, que es el canvas donde se dibuja la visualización, y es entonces donde se aprovechan algunas de las características más potentes de D3, como es el cargar los datos (las líneas .data(data) y .enter() que las «introducen» en el documento), o crear los elementos gráficos y determinar su posición y valor usando los datos cargados.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Minimal D3 Example</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
.bar {
fill: steelblue;
}
.bar:hover {
fill: orange;
}
</style>
</head>
<body>
<script type="text/javascript">
var data = [150, 230, 180, 90];
var svg = d3.select("body")
.append("svg")
.attr("width", 300)
.attr("height", 200);
svg.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr({
class : "bar",
width : function(d) {return d;},
height: "40",
y : function(d, i) {return i*50 + 10;},
x : "10"
});
</script>
</body>
</html>
Enlaces relacionados
Ejemplo mínimo: http://bl.ocks.org/alexsb/8565055
Galería de ejemplos: https://github.com/d3/d3/wiki/Gallery
Análisis visual con D3: http://oer.uoc.edu/VIS/D3/ES/