D3.js (o simplemente D3 por las siglas de Data-Driven Documents) es una biblioteca (informática) de JavaScript para producir, a partir de datos, infogramas dinámicos e interactivos en navegadores web. Hace uso de tecnologías bien sustentadas como SVG, HTML5, y CSS. Esta biblioteca es sucesora de la biblioteca Protovis. En contraste con muchas otras bibliotecas, D3.js permite tener control completo sobre el resultado visual final. La primera versión de la biblioteca fue distribuida en agosto de 2011.
Los primeros navegadores de web aparecieron a principios de la década de 1990. Eran inicialmente capaces de mostrar solo páginas web estáticas: la única forma que los usuarios podían interactuar con la web era haciendo clic en enlaces y desplazando las páginas. Hubo muchos esfuerzos para vencer tales limitaciones. El más significativo fue la integración de JavaScript como el lenguaje para escribir algoritmos ejecutados en los navegadores de web. JavaScript gradualmente se convirtió en el lenguaje estándar de facto para crear páginas web interactivas y es por esto que JavaScript fue seleccionado para escribir la biblioteca D3.js.
Por otra parte, muchos investigadores, ingenieros, e interesados en otras ramas de la ingeniería han estado por mucho tiempo en búsqueda de herramientas que habiliten los navegadores web con presentaciones de datos. Hubo muchos proyectos con el mismo objetivo con diferentes niveles de éxito. Los más notables son las herramientas Prefuse, Bengala, y Protovis, los cuales pueden todos ser considerados como predecesores directos de D3.js.
Prefuse fue un grupo de herramientas de visualización creado en 2005 que requería el uso de Java para la creación de los infogramas, de un plug-in en el navegador para la visualización. Bengala fue un grupo similar de herramientas creado en 2007 basado en ActionScript, el cual requería un plug-in en Flash.
En 2009, basado en la experiencia en el desarrollo y uso Prefuse y Bengala, el profesor Jeff Heer del grupo de visualización de la Universidad de Stanford, su estudiante de doctorado Mike Bostock, y su estudiante de maestría Vadim Ogievetsky crearon Protovis, una biblioteca de JavaScript para generar gráficos SVG a partir de datos. La biblioteca ha recibido notable aceptación entre creadores de infogramas y académicos.
En 2011, el desarrollo de Protovis fue interrumpido para centrar esfuerzos en un nuevo proyecto, D3.js. Basado en las experiencias con Protovis, Bostock, junto con Heer y Ogievetsky, desarrollaron D3.js para ofrecer un marco más expresivo que, al mismo tiempo, se centra en estándares de la web y proporciona rendimiento mejorado.
Embebido dentro de una página web de HTML, la biblioteca D3.js utiliza funciones JavaScript predefinidas construidas para seleccionar elementos, crea objetos SVG, les da estilo, o añade transiciones, efectos dinámicos o les agrega información. A estos objetos también se les puede aplicar estilos utilizando CSS. Grandes grupos de datos pueden ser fácilmente asociados a objetos SVG de forma sencilla con funciones de D3.js para generar textos extendidos o infogramas elaborados. Los datos pueden tener formatos variados, más generalmente JSON, CSV o geoJSON, aunque cuando hace falta, se puede escribir otras funciones JavaScript para la captura de otros formatos de datos.
El principio central del diseño de D3.js es habilitar al programador para que utilice preferentemente selectores al estilo de CSS para seleccionar elementos del Modelo de objeto del documento (DOM), luego aplicar operadores para manipular los elementos seleccionados de una manera similar a jQuery. Por ejemplo, con D3.js, se puede seleccionar todos los párrafos HTML (segmentos de la forma <p>...</p>) y cambiarles su color de texto, p. ej. a color lavanda (lavender): La selección puede estar basada en etiqueta (como en el ejemplo anterior), en clases, en identificadores, en atributos, o en ubicación en la jerarquía. Una vez los elementos son seleccionados, se puede aplicar operaciones sobre ellos, incluyendo consultar y cambiar atributos, mostrar textos, y cambiar estilos (como en el ejemplo anterior). Se puede también agregar o eliminar elementos. Este proceso de crear, modificar y eliminar elementos HTML puede hacerse dependiente de los datos, lo cual es el concepto básico de D3.js.
Las transiciones permiten interpolar en el tiempo valores de atributos, lo que produce cambios visuales en los infogramas. El código siguiente hará que todo párrafo HTML (<p>...</p>) de la página cambie gradualmente su color al rosa:
En ejemplos más avanzados la carga de datos puede dirigir la creación de elementos. D3.js carga un juego de datos asociando a cada elemento un objeto SVG con propiedades (forma, colores, valores) y comportamientos (transiciones, eventos) asociados.
El código SVG generado es la infografía diseñada según los datos proporcionados.
Una vez que un juego de datos es cargado en un documento, D3.js típicamente se utiliza siguiendo un patrón en donde se invoca una función de entrada .enter(), una actualización "implícita," y una función de salida .exit() para cada elemento del juego de datos asociado. Todos los métodos encadenados a continuación del comando .enter() son llamados para cada elemento del grupo de datos que no esté representado en la selección por un elemento del DOM previamente seleccionado (con selectAll()). De la misma forma, la función de actualización implícita es ejecutada sobre todos los nodos existentes que fueron seleccionados para los que ya hay un elemento correspondiente en el juego de datos, y .exit() ejecuta para cada nodo existente seleccionado que no tenga un elemento en el juego de datos. La documentación de D3.js proporciona varios ejemplos de la forma como este patrón trabaja.
La empresa de infografía Datameer oficialmente utiliza D3.js como su principal tecnología, The New York Times genera algunos de sus infogramas con D3.js. D3.js se utiliza en el editor iD para modificar OpenStreetMap. D3.js ha sido extensamente utilizado para desarrollo de mapas, usando archivos de entrada en GeoJSON y Topojson.
Escribe un comentario o lo que quieras sobre D3.js (directo, no tienes que registrarte)
Comentarios
(de más nuevos a más antiguos)