D3.js (también conocido como D3 , abreviatura de documentos basados en datos ) es una biblioteca de JavaScript para producir visualizaciones de datos dinámicas e interactivas en navegadores web . Utiliza los estándares de gráficos vectoriales escalables (SVG), HTML5 y hojas de estilo en cascada (CSS). Es el sucesor del marco anterior de Protovis. [2] Su desarrollo se observó en 2011, [3] ya que la versión 2.0.0 se lanzó en agosto de 2011. [4]
Desarrollador (es) | Mike Bostock , Jason Davies, Jeffrey Heer , Vadim Ogievetsky y la comunidad |
---|---|
Versión inicial | 18 de febrero de 2011 |
Lanzamiento estable | 6.7.0 / 15 de abril de 2021 [1] |
Repositorio | |
Escrito en | JavaScript |
Tipo | Visualización de datos , biblioteca JavaScript |
Licencia | BSD |
Sitio web | d3js |
Contexto
Ha habido varios intentos anteriores 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.
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 usaba ActionScript y requería un complemento de Flash para renderizar.
En 2009, basándose en la experiencia de desarrollar y utilizar Prefuse y Flare, Jeffrey Heer , Mike Bostock y Vadim Ogievetsky del Stanford Visualization Group de la Universidad de Stanford crearon Protovis, una biblioteca JavaScript para generar gráficos SVG a partir de datos. La biblioteca era conocida por los profesionales de la visualización de datos y los académicos. [5]
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 proporciona un rendimiento mejorado. [6]
Principios tecnicos
La biblioteca D3.js utiliza funciones predefinidas para seleccionar elementos, crear objetos SVG, aplicarles estilo o agregarles transiciones, efectos dinámicos o información sobre herramientas . Estos objetos también se pueden diseñar 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 / gráficos. Los datos pueden estar en varios formatos, como JSON , valores separados por comas (CSV) o geoJSON , pero, si es necesario, las funciones de JavaScript se pueden escribir para leer otros formatos de datos.
Trozos escogidos
El principio central del diseño de D3.js es permitir que el programador use primero un selector de estilo CSS para seleccionar un conjunto dado de nodos del Modelo de objetos de documento (DOM), luego use operadores para manipularlos de manera similar a jQuery . [7] Por ejemplo, uno puede seleccionar todos los ...
elementos HTML y luego cambiar el color del texto, por ejemplo, a lavanda:
d3 . selectAll ( "p" ) // selecciona todos los elementos
. style ( "color" , "lavanda" ) // establece el estilo "color" en el valor "lavanda" . attr ( "clase" , "cuadrados" ) // establece el atributo "clase" en el valor de "cuadrados" . attr ( "x" , 50 ); // establece el atributo "x" (posición horizontal) al valor 50px
La selección puede basarse en una etiqueta HTML, clase, identificador, atributo o lugar en la jerarquía. Una vez seleccionados los elementos, se pueden aplicar operaciones. Esto incluye 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.
Transiciones
Al declarar una transición, los valores de los atributos y estilos se pueden interpolar sin problemas durante un tiempo determinado. El siguiente código hará que todos los ...
elementos HTML de una página cambien gradualmente el color del texto a rosa:
d3 . selectAll ( "p" ) // selecciona todos los elementos
. transición ( "trans_1" ) // transición con el nombre "trans_1" . delay ( 0 ) // inicio de la transición 0ms después del disparo . duración ( 500 ) // transición durante 500 ms . la facilidad ( d3 . easeLinear ) // transición progresión aliviando es lineal ... . estilo ( "color" , "rosa" ); // ... para colorear: rosa
El enlace de datos
Para usos más avanzados, los datos cargados impulsan la creación de elementos. D3.js carga un conjunto de datos dado, luego, para cada uno de sus elementos, crea un objeto SVG con propiedades asociadas (forma, colores, valores) y comportamientos (transiciones, eventos). [8] [9] [10]
// Los datos var countriesData = [ { nombre : "Irlanda" , los ingresos : 53000 , la vida : 78 , pop : 6378 , de color : "negro" }, { nombre : "Noruega" , los ingresos : 73000 , la vida : 87 , pop : 5084 , de color : "azul" }, { nombre : "Tanzania" , los ingresos : 27000 , la vida : 50 , pop : 3407 , colores : "gris" } ]; // Crea un contenedor SVG var svg = d3 . seleccione ( "#hook" ). añadir ( "svg" ) . attr ( "ancho" , 120 ) . attr ( "altura" , 120 ) . estilo ( "color de fondo" , "# D0D0D0" ); // Crea elementos SVG a partir de datos svg . selectAll ( "circle" ) // crea una plantilla de círculo virtual . data ( countriesData ) // enlazar datos . join ( "círculo" ) // une datos a la selección y crea elementos circulares para cada dato individual . attr ( "id" , function ( d ) { return d . name }) // establece la identificación del círculo de acuerdo con el nombre del país . attr ( "cx" , function ( d ) { return d . income / 1000 }) // establece la posición horizontal del círculo de acuerdo con los ingresos . attr ( "cy" , function ( d ) { return d . life }) // establece la posición vertical del círculo de acuerdo con 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 ( "llenar" , función ( d ) { retorno 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 está vinculado a un documento, el uso de D3.js normalmente sigue un patrón en el que se invoca una .enter()
función explícita , una "actualización" implícita 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 aún no esté representado por un nodo DOM en la selección (el anterior selectAll()
). Asimismo, la función de actualización implícita se invoca en todos los nodos seleccionados existentes para los que hay un elemento correspondiente en el conjunto de datos, y .exit()
se invoca en todos los nodos seleccionados existentes que no tienen un elemento en el conjunto de datos para vincularse a ellos. La documentación de D3.js proporciona varios ejemplos de cómo funciona. [11]
Estructura API
La API de D3.js contiene varios cientos de funciones y se pueden agrupar en las siguientes unidades lógicas: [12]
- Trozos escogidos
- Transiciones
- Matrices
- Matemáticas
- Color
- Escamas
- SVG
- Hora
- Diseños
- Geografía
- Geometría
- Comportamientos
Matemáticas
- Generación de números pseudoaleatorios con distribuciones normal , log-normal , Bates e Irwin-Hall .
- Transformaciones en 2D: traslación , rotación , sesgo y escalado.
Matrices
Las operaciones de matriz de D3.js están diseñadas para complementar el soporte de matriz existente en JavaScript (métodos de mutación: ordenar, revertir, empalmar, cambiar y deshacer; métodos de acceso: concat, join, slice, indexOf y lastIndexOf; métodos de iteración: filter, every, forEach, map, some, reduce y reduceRight). D3.js amplía esta funcionalidad con:
- Funciones para encontrar mínimo, máximo, extensión, suma, media, mediana y cuantil de una matriz.
- Funciones para ordenar, barajar, permutar, fusionar y bisecar matrices.
- Funciones para anidar matrices.
- Funciones para manipular matrices asociativas.
- Soporte para colecciones de mapas y conjuntos.
Geometría
- Calcular el casco convexo de un conjunto de puntos.
- El cálculo de Voronoi teselación de un conjunto de puntos.
- Soporte para estructura de datos de quadtree de puntos .
- Soporte para operaciones básicas en polígono.
Color
- Soporte para representación de color RGB , HSL , HCL y L * a * b * .
- Aclaración, oscurecimiento e interpolación de colores.
Referencias
- ^ "Lanzamientos · d3 / d3" . github.com . Consultado el 11 de mayo de 2021 .
- ^ "For Protovis Users" , Mbostock.github.com , consultado el 18 de agosto de 2012
- ^ Myatt, Glenn J .; Johnson, Wayne P. (septiembre de 2011), "5.10 Otras lecturas" , Cómo comprender los datos III: Una guía práctica para diseñar visualizaciones de datos interactivas , Hoboken, Nueva Jersey: John Wiley & Sons , p. A – 2, ISBN 978-0-470-53649-0, consultado el 23 de enero de 2013
- ^ "Notas de la versión" , D3.js , consultado el 22 de agosto de 2012
- ^ Ejemplo académico: Savva, Manolis; Kong, Nicholas; Chhajta, Arti; Li, Feifei; Agrawala, Maneesh; Heer, Jeffrey (2011), "ReVision: Clasificación automatizada, análisis y rediseño de imágenes de gráficos" , Software y tecnología de interfaz de usuario de ACM , consultado el 23 de enero de 2013
- ^ Bostock, Ogievetsky y Heer 2011
- ^ Bostock, Ogievetsky y Heer 2011 , cap. 3
- ^ Bostock, Mike (5 de febrero de 2012), Thinking with Joins
- ^ "Un bolígrafo de López Hugo" . Codepen.io . Consultado el 1 de agosto de 2016 .
- ^ "Editar violín" . JSFiddle.net . Consultado el 1 de agosto de 2016 .
- ^ "Tres pequeños círculos" . Mbostock.github.io . Consultado el 1 de agosto de 2016 .
- ^ d3 (30 de junio de 2016). "Referencia API · d3 / d3 Wiki · GitHub" . Github.com . Consultado el 1 de agosto de 2016 .
Otras lecturas
- Antecedentes sobre D3.js en sí
- Bostock, Michael; Ogievetsky, Vadim; Heer, Jeffrey (octubre de 2011), "D3: Documentos basados en datos" , IEEE Transactions on Visualization and Computer Graphics , IEEE Press , 17 (12): 2301–2309, doi : 10.1109 / TVCG.2011.185 , PMID 22034350
- Usando 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
- 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), Visualización de datos con el libro de cocina D3.js (1ª ed.), Birmingham: Packt Publishing , ISBN 978-1-7821-6216-2
- Otros
- Newton, Thomas; Villarreal, Oscar (2014), Learning D3.js Mapping , Birmingham: Packt Publishing , p. 126, ISBN 9781783985609
- Navarro Castillo, Pablo (2014), Mastering D3.js , Birmingham: Packt Publishing , p. 352, ISBN 9781783286270
- Teller, Swizec (2013), Visualización de datos con d3.js , Birmingham: Packt Publishing , p. 194, ISBN 9781782160007
- Viau, Christophe (2013), Developing a D3.js Edge: Constructing Reusable D3 Components and Charts , Bleeding Edge Press , p. 268, ISBN 9781939902023, archivado desde el original el 3 de septiembre de 2014 , consultado el 27 de agosto de 2014
- Meeks, Elijah (2014), D3.js en acción , Publicaciones Manning , p. 325, ISBN 9781617292118
- Maclean, Malcolm (2014), D3 Tips and Tricks , Leanpub , p. 580
- King, Ritchie (2014), Visual Storytelling with D3: An Introduction to Data Visualization in JavaScript , Addison-Wesley Data & Analytics Series , p. 288
- Videos
- Gopal, Nikhil (octubre de 2014), D3 y CoffeeScript: Introducción a las visualizaciones web de un programador 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
Proyectos relacionados
- Las gramáticas de visualización Vega y Vega-Lite son una especificación de visualización declarativa construida sobre partes de D3.js.
enlaces externos
- Página 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
- Plotly https://plot.ly/javascript
- bl.ock.org y blockbuilder.org : sistema de galería temprano popular.
- Observablehq.com : área de juegos principal de D3js.