Hispanopedia Wiki
Articulo de referencia

D3.js

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 naveg...

Hispanopedia WikiContenido en espanolLectura gratuita

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 anterior framework Protovis. [ 2 ] Su desarrollo se observó en 2011, [ 3 ] cuando se lanzó la versión 2.0.0 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 ]

Contexto

Anteriormente se han realizado varios intentos para llevar la visualización de datos a los navegadores web. Los ejemplos más notables fueron los conjuntos de herramientas Prefuse, Flare y Protovis, que pueden considerarse predecesores directos de D3.js.

Prefuse era un conjunto de herramientas de visualización creado en 2005 que requería el uso de Java , y las visualizaciones se renderizaban en 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 renderización.

En 2009, basándose en la experiencia de desarrollar y utilizar Prefuse y Flare, Jeffrey Heer , Mike Bostock y Vadim Ogievetsky, del Grupo de Visualización de Stanford de la Universidad de Stanford, crearon Protovis, una biblioteca de JavaScript para generar gráficos SVG a partir de datos. La biblioteca era conocida entre los profesionales y académicos de la visualización de datos. [ 6 ]

En 2011, se detuvo el desarrollo de Protovis para centrarse en un nuevo proyecto, D3.js. Basándose en la experiencia 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 ]

Principios técnicos

La biblioteca D3.js utiliza funciones predefinidas para seleccionar elementos, crear objetos SVG, aplicarles estilos, transiciones, efectos dinámicos o información sobre herramientas . Estos objetos también pueden personalizarse con CSS. Se pueden vincular grandes conjuntos de datos a objetos SVG mediante las funciones de D3.js para generar gráficos y diagramas de texto e imágenes. Los datos pueden estar en diversos formatos, como JSON , valores separados por comas (CSV) o GeoJSON , pero, si es necesario, se pueden escribir funciones JavaScript para leer otros formatos de datos.

Trozos escogidos

El principio central del diseño de D3.js es permitir al programador usar primero un selector de estilo CSS para seleccionar un conjunto dado de nodos del Modelo de Objetos del Documento (DOM), y luego usar operadores para manipularlos de manera similar a jQuery . [ 8 ] Por ejemplo, se pueden seleccionar todos los elementos de párrafo HTML (representados por ), y luego cambiar el color de su texto, por ejemplo, a lavanda:<p>...</p>

d3 . selectAll ( "p" ) // selecciona todos los elementos <p> . style ( "color" , "lavender" ) // establece el estilo "color" al valor "lavender" . attr ( "class" , "squares" ) // establece el atributo "class" al valor "squares" . attr ( "x" , 50 ); // establece el atributo "x" (posición horizontal) al valor 50px

La selección puede basarse en una etiqueta HTML, una clase, un identificador, un atributo o su posición en la jerarquía. Una vez seleccionados los elementos, se pueden aplicar operaciones sobre ellos. Esto incluye obtener y establecer atributos, textos de visualización y estilos (como en el ejemplo anterior). También se pueden añadir 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.

Transiciones

Al declarar una transición, los valores de los atributos y estilos se pueden interpolar suavemente durante un período de tiempo determinado. El siguiente código hará que todos los elementos HTML de una página cambien gradualmente el color de su texto a rosa:<p>...</p>

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 suavizado de la transición es lineal... .style ( " color" , "pink" ); // ... a color: rosa

Enlace de datos

Para usos más avanzados, los datos cargados impulsan la creación de elementos. D3.js carga un conjunto de datos determinado y, a continuación, 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 = [ { name : "Irlanda" , income : 53000 , life : 78 , pop : 6378 , color : "negro" }, { name : "Noruega" , income : 73000 , life : 87 , pop : 5084 , color : "azul" }, { name : "Tanzania" , income : 27000 , life : 50 , pop : 3407 , color : "gris" } ]; // Crear contenedor SVG var svg = d3 . select ( "#hook" ). append ( "svg" ) . attr ( "ancho" , 120 ) . attr ( "alto" , 120 ) . style ( "color de fondo" , "#D0D0D0" ); // Crea elementos SVG a partir de datos svg . selectAll ( "circle" ) // crea un círculo virtual template . data ( countriesData ) // enlaza datos . join ( "circle" ) // une los datos a la selección y crea elementos de círculo para cada dato individual data . attr ( "id" , function ( d ) { return d . name }) // establece el id del círculo según el nombre del país name . attr ( "cx" , function ( d ) { return d . income / 1000 }) // establece la posición horizontal del círculo según los ingresos . attr ( "cy" ,función ( d ) { devolver d. vida }) // 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.

Agregar nodos usando datos

Una vez que un conjunto de datos se vincula 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 función implícita de "actualización" y una .exit()función explícita para cada elemento del conjunto de datos vinculado. Cualquier método encadenado después del .enter()comando se llamará para cada elemento del conjunto de datos que no esté representado por un nodo DOM en la selección (el anterior selectAll()). Del mismo modo, la función implícita de actualización se llama en todos los nodos seleccionados existentes para los que hay un elemento correspondiente en el conjunto de datos, y .exit()se llama en todos los nodos seleccionados existentes que no tienen un elemento en el conjunto de datos para vincularlos. La documentación de D3.js proporciona varios ejemplos de cómo funciona esto. [ 12 ]

Comunidad

D3.js es un conjunto de herramientas popular utilizado por muchas personas y organizaciones para la visualización de datos. Algunas organizaciones que lo utilizan incluyen The New York Times , Airbnb y MTV . [ 13 ] Mike Bostock creó bl.ocks como un sitio web para compartir visualizaciones y fragmentos de código de D3, que utilizaba GitHub Gist para alojar el código. Posteriormente creó Observable como un lugar donde los programadores podían crear y compartir visualizaciones. (Similar a bl.ocks, pero todo el código está alojado en el sitio de Observable). También existen comunidades de D3 en muchos sitios de programación como CodePen .

Véase también

Referencias

  1. ↑ "Versión 7.9.0" . 12 de marzo de 2024. Consultado el 22 de marzo de 2024 .
  2. ↑ "Para usuarios de Protovis" , Mbostock.github.com , archivado del original el 6 de agosto de 2012 , consultado el 18 de agosto de 2012.
  3. ↑ Myatt, Glenn J.; Johnson, Wayne P. (septiembre de 2011), "5.10 Lecturas adicionales" , Making Sense of Data III: A Practical Guide to Designing Interactive Data Visualizations , Hoboken, Nueva Jersey: John Wiley & Sons , pág. A–2, ISBN  978-0-470-53649-0Consultado el 23 de enero de 2013.
  4. ↑ "Notas de la versión" , D3.js , consultado el 22 de agosto de 2012
  5. ^ "Lanzamiento v4.0.0 · d3/d3" . GitHub . 28 de junio de 2016 . Consultado el 27 de diciembre de 2021 .
  6. ↑ Ejemplo académico: Savva, Manolis; Kong, Nicholas; Chhajta, Arti; Li, Feifei; Agrawala, Maneesh; Heer, Jeffrey (2011), "ReVision: Automated Classification, Analysis and Redesign of Chart Images" , ACM User Interface Software & Technology , consultado el 23 de enero de 2013.
  7. ↑ Bostock, Ogievetsky y Heer 2011
  8. ↑ Bostock, Ogievetsky y Heer 2011 , cap. 3
  9. ↑ Bostock, Mike (5 de febrero de 2012), Pensando con uniones
  10. ↑ "Un bolígrafo de López Hugo" . Codepen.io . Archivado del original el 22 de marzo de 2016. Consultado el 1 de agosto de 2016 .
  11. ↑ "Editar fiddle" . JSFiddle.net . Consultado el 1 de agosto de 2016 .
  12. ↑ "Three Little Circles" . Mbostock.github.io . Consultado el 1 de agosto de 2016 .
  13. ↑ "Por qué los líderes de la industria eligen D3.js para visualizaciones de datos impactantes" . 13 de abril de 2023.

Lecturas adicionales

Información general 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 interactiva de datos 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
Uso de 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), Visualización de datos con D3.js Cookbook (1.ª  ed.), Birmingham: Packt Publishing , ISBN 978-1-7821-6216-2
Otros
  • Newton, Thomas; Villarreal, Oscar (2014), Aprendiendo a mapear con D3.js , Birmingham: Packt Publishing , pág.  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), Developing a D3.js Edge: Constructing Reusable D3 Components and Charts , Bleeding Edge Press , p.  268, ISBN 9781939902023Archivado 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), Narración 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: An Introduction to Data Visualization in JavaScript , Addison-Wesley Professional
  • Sitio web oficialEdita esto en Wikidata
  • Galería D3.js
  • Blocksplorer , búsqueda de bloques por métodos utilizados
  • Bibliotecas de "gráficos reutilizables" de D3:
    • C3 https://c3js.org
    • Plotly https://plot.ly/javascript
  • bl.ock.org Archivado el 7 de abril de 2017 en Wayback Machine y blockbuilder.org : sistema de galería popular de los primeros tiempos.
  • Observablehq.com  : principal entorno de pruebas de D3js.