D3.js (también conocido como D3 , abreviatura de Data-Driven Documents ) es una biblioteca de JavaScript para producir visualizaciones de datos dinámicas e interactivas en navegadores web . Utiliza los estándares Scalable Vector Graphics (SVG), HTML5 y Cascading Style Sheets (CSS). Es el sucesor del marco Protovis anterior. [2] Su desarrollo se notó en 2011, [3] ya que la versión 2.0.0 se lanzó en agosto de 2011. [4] Con el lanzamiento de la versión 4.0.0 en junio de 2016, D3 pasó de ser una única biblioteca a una colección de bibliotecas modulares más pequeñas que se pueden usar de forma independiente. [5]
Ha habido varios intentos previos de llevar la visualización de datos a los navegadores web. Los ejemplos más notables fueron los kits de herramientas Prefuse, Flare y Protovis, que pueden considerarse predecesores directos de D3.js. [ cita requerida ]
Prefuse era un conjunto de herramientas de visualización creado en 2005 que requería el uso de Java y las visualizaciones se representaban en los navegadores con un complemento de Java. Flare era un conjunto de herramientas similar de 2007 que utilizaba ActionScript y requería un complemento de Flash para la representación. [ cita requerida ]
En 2009, basándose en la experiencia de desarrollo y utilización de Prefuse y Flare, Jeffrey Heer , Mike Bostock y Vadim Ogievetsky del Stanford Visualization Group de la Universidad de Stanford crearon Protovis, una biblioteca de JavaScript para generar gráficos SVG a partir de datos. La biblioteca era conocida por los profesionales y académicos de la visualización de datos. [6]
En 2011, el desarrollo de Protovis se detuvo para centrarse en un nuevo proyecto, D3.js. Basándose en las experiencias con Protovis, Bostock, junto con Heer y Ogievetsky, desarrollaron D3.js para proporcionar un marco más expresivo que, al mismo tiempo, se centra en los estándares web y ofrece un rendimiento mejorado. [7]
La biblioteca D3.js utiliza funciones predefinidas para seleccionar elementos, crear objetos SVG, aplicarles estilo o agregar transiciones, efectos dinámicos o información sobre herramientas . Estos objetos también pueden ser estilizados usando CSS. Se pueden vincular grandes conjuntos de datos a objetos SVG usando funciones D3.js para generar gráficos y diagramas de texto. Los datos pueden estar en varios formatos, como JSON , valores separados por comas (CSV) o geoJSON , pero, si es necesario, se pueden escribir funciones de JavaScript para leer otros formatos de datos.
El principio central del diseño de D3.js es permitir al programador utilizar primero un selector de estilo CSS para seleccionar un conjunto dado de nodos del Modelo de Objetos de Documento (DOM), y luego utilizar operadores para manipularlos de manera similar a jQuery . [8] Por ejemplo, uno puede seleccionar todos los elementos de párrafo HTML (representados por <p>...</p>), y luego cambiar su color de texto, por ejemplo a lavanda:
d3 . selectAll ( "p" ) // seleccionar todos los elementos <p> . style ( "color" , "lavender" ) // establecer el estilo "color" con el valor "lavender" . attr ( "class" , "squares" ) // establecer el atributo "class" con el valor "squares" . attr ( "x" , 50 ); // establecer el atributo "x" (posición horizontal) con el valor 50px La selección puede basarse en una etiqueta HTML, una clase, un identificador, un atributo o un lugar en la jerarquía. Una vez seleccionados los elementos, se les pueden aplicar operaciones, como obtener y configurar atributos, mostrar textos y estilos (como en el ejemplo anterior). También se pueden agregar y eliminar elementos. Este proceso de modificación, creación y eliminación de elementos HTML puede depender de los datos, que es el concepto básico de D3.js.
Al declarar una transición, los valores de los atributos y estilos se pueden interpolar de forma gradual durante un tiempo determinado. El siguiente código hará que todos <p>...</p>los elementos HTML de una página cambien gradualmente el color de su texto a rosa:
d3 . selectAll ( "p" ) // selecciona todos los elementos <p> . transition ( "trans_1" ) // transición con el nombre "trans_1" . delay ( 0 ) // transición que comienza 0 ms después del disparador . duration ( 500 ) // transición durante 500 ms . ease ( d3 . easeLinear ) // la progresión de la transición es lineal... . style ( "color" , "pink" ); // ... a color:pink Para usos más avanzados, los datos cargados impulsan la creación de elementos. D3.js carga un conjunto de datos determinado y luego, para cada uno de sus elementos, crea un objeto SVG con propiedades asociadas (forma, colores, valores) y comportamientos (transiciones, eventos). [9] [10] [11]
// Datos var countriesData = [ { nombre : "Irlanda" , ingresos : 53000 , vida : 78 , población : 6378 , color : "negro" }, { nombre : "Noruega" , ingresos : 73000 , vida : 87 , población : 5084 , color : "azul" }, { nombre : "Tanzania" , ingresos : 27000 , vida : 50 , población : 3407 , color : "gris" } ]; // Crear contenedor SVG var svg = d3 . select ( "#hook" ). append ( "svg" ) . attr ( "ancho" , 120 ) . attr ( "alto" , 120 ) . style ( "background-color" , "#D0D0D0" ); // Crea elementos SVG a partir de datos svg . selectAll ( "circle" ) // crea una plantilla de círculo virtual . data ( countryData ) // enlaza datos . join ( "circle" ) // une datos a la selección y crea elementos de círculo para cada individuo . attr ( "id" , function ( d ) { return d.name }) // establece el id del círculo según el nombre del país . attr ( " cx" , function ( d ) { return d.income / 1000 }) // establece la posición horizontal del círculo según income . attr ( " cy" ,función ( d ) { devolver d . life }) // establece la posición vertical del círculo según la esperanza de vida . attr ( "r" , function ( d ) { return d . pop / 1000 * 2 }) // establece el radio del círculo según la población del país . attr ( "fill" , function ( d ) { return d . color }); // establece el color del círculo según el color del país Los gráficos SVG generados se diseñan de acuerdo con los datos proporcionados.
Una vez que un conjunto de datos está vinculado a un documento, el uso de D3.js generalmente sigue un patrón en el que se invoca una .enter()función explícita, una "actualización" implícita y una función explícita para cada elemento del conjunto de datos vinculado. Cualquier método encadenado después del comando se llamará para cada elemento del conjunto de datos que no esté representado por un nodo DOM en la selección (el anterior ). De la misma manera, la función de actualización implícita se llama en todos los nodos seleccionados existentes para los que hay un elemento correspondiente en el conjunto de datos, y se llama en todos los nodos seleccionados existentes que no tienen un elemento en el conjunto de datos al que vincularse. La documentación de D3.js proporciona varios ejemplos de cómo funciona esto. [12].exit().enter()selectAll().exit()
.svg/1280px-Free_and_open-source_software_logo_(2009).svg.png){kind=logo}