D3.js

Desarrollador(es)	Mike Bostock , Jason Davies, Jeffrey Heer , Vadim Ogievetsky y la comunidad
Lanzamiento inicial	18 de febrero de 2011 ; hace 13 años ( 18-02-2011 )
Versión estable	7.9.0 [1] / 12 de marzo de 2024 ; hace 7 meses ( 12 de marzo de 2024 )
Repositorio	github.com/d3/d3
Escrito en	JavaScript
Tipo	Visualización de datos , biblioteca de JavaScript
Licencia	BSD
Sitio web	es:d3js.org

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()

• Marco de JavaScript
• Biblioteca de JavaScript

Antecedentes sobre D3.js

• Bostock, Michael; Ogievetsky, Vadim; Heer, Jeffrey (octubre de 2011), "D3: Documentos basados ​​en datos", IEEE Transactions on Visualization and Computer Graphics , 17 (12), IEEE Press : 2301–2309, doi : 10.1109/TVCG.2011.185, PMID  22034350, S2CID  505461

Uso de D3.js: nivel principiante

• Murray, Scott (marzo de 2013), Visualización de datos interactivos para la Web: Introducción al diseño con D3 (1.ª ed.), Sebastopol, California: O'Reilly Media , ISBN 978-1-4493-3973-9
• Timms, Simon (septiembre de 2013), Visualización de datos sociales con HTML5 y JavaScript (1.ª ed.), Birmingham: Packt Publishing , ISBN 978-1-7821-6654-2

Usando D3.js – nivel intermedio

• Dewar, Mike (junio de 2012), Steele, Julie; Blanchette, Meghan (eds.), Introducción a D3, creación de documentos basados ​​en datos (1.ª ed.), Sebastopol, California: O'Reilly Media , ISBN 978-1-4493-2879-5
• Qi Zhu, Nick (octubre de 2013), Libro de recetas de visualización de datos con D3.js (1.ª ed.), Birmingham: Packt Publishing , ISBN 978-1-7821-6216-2

Otros

• Newton, Thomas; Villarreal, Oscar (2014), Aprendiendo a mapear D3.js, Birmingham: Packt Publishing , p. 126, ISBN 9781783985609
• Navarro Castillo, Pablo (2014), Mastering D3.js, Birmingham: Packt Publishing , pág. 352, ISBN 9781783286270
• Teller, Swizec (2013), Visualización de datos con d3.js, Birmingham: Packt Publishing , pág. 194, ISBN 9781782160007
• Viau, Christophe (2013), Desarrollo de un entorno D3.js: construcción de componentes y gráficos D3 reutilizables, Bleeding Edge Press, pág. 268, ISBN 9781939902023, archivado del original el 3 de septiembre de 2014 , consultado el 27 de agosto de 2014
• Meeks, Elijah (2014), D3.js en acción , Manning Publications , pág. 325, ISBN 9781617292118
• Maclean, Malcolm (2014), Consejos y trucos para D3, Leanpub, pág. 580
• King, Ritchie (2014), Narrativa visual con D3: Introducción a la visualización de datos en JavaScript, Addison-Wesley Data & Analytics Series, pág. 288, ISBN 978-0-321-93317-1

Vídeos

• Gopal, Nikhil (octubre de 2014), D3 y CoffeeScript: Introducción a las visualizaciones web para programadores de Python, Sebastopol, California: O'Reilly Media
• King, Ritchie (diciembre de 2014), D3 Visualization LiveLessons: Introducción a la visualización de datos en JavaScript, Addison-Wesley Professional

• Las gramáticas de visualización Vega y Vega-Lite son una especificación de visualización declarativa construida sobre partes de D3.js.

Wikimedia Commons tiene medios relacionados con D3.js .

• Sitio web oficial
• Galería D3.js
• Blocksplorer, búsqueda de bloques por métodos utilizados
• Bibliotecas de "gráficos reutilizables" D3:
  • C3 https://c3js.org
  • Trama https://plot.ly/javascript
• bl.ock.org Archivado el 7 de abril de 2017 en Wayback Machine y blockbuilder.org: un popular sistema de galería temprano.
• Observablehq.com: el principal patio de juegos de D3js.