D3.JS (Documentos controlados por datos)

Introducción: D3 es una abreviatura de Data Driven Documents, y D3.js es una biblioteca JavaScript de recursos para administrar documentos basados ​​en datos. D3 es uno de los marcos más efectivos para trabajar en la visualización de datos. Permite al desarrollador crear visualizaciones de datos dinámicas e interactivas en el navegador con la ayuda de HTML, CSS y SVG. La visualización de datos es la representación de datos filtrados en forma de imágenes y gráficos. Representaciones gráficas o pictóricas que presentan incluso conjuntos de datos complejos con facilidad. Además, los patrones o análisis comparativos se pueden rastrear fácilmente con la ayuda de la visualización de datos, lo que permite al cliente tomar decisiones sin mucha lluvia de ideas. Estas visualizaciones se pueden desarrollar fácilmente utilizando marcos como D3.js. mike bostockescribió el marco D3. Antes de D3, el kit de herramientas de Protovis se usaba ampliamente para visualizaciones de datos. Aunque hay muchos otros marcos para la visualización de datos, D3.js ha dejado su huella debido a su flexibilidad y capacidad de aprendizaje.
En lugar de funcionar como un marco monolítico que proporciona todas las funciones imaginables, D3 resuelve el núcleo de un problema al proporcionar una manipulación eficiente de los datos. Reduce los gastos generales y permite flexibilidad.

Características: hay muchas otras plataformas o marcos disponibles para administrar la visualización de datos, pero D3 ha dejado atrás a todos los demás marcos debido a que es extremadamente flexible. Las siguientes son las características principales que separan a D3 de otros marcos:

• Como D3 utiliza estándares web como HTML, CSS, SVG. Representa potentes gráficos de visualización.
• El enfoque basado en datos permite que D3 recupere los datos de diferentes Nodes o servidores web y los analice además para generar visualizaciones. Además, también puede utilizar datos estáticos para su procesamiento.
• D3 permite variaciones en las herramientas para la creación de gráficos. Es una tabla estructurada básica o un gráfico circular bien analizado. Sus bibliotecas varían desde las herramientas más básicas hasta un conjunto avanzado de recursos. Incluso el mapeo GIS complejo se puede hacer usando D3. Incluso permite personalizar las visualizaciones según la necesidad. Sin embargo, todo es posible gracias a su soporte a los Estándares Web.
• Incluso admite grandes conjuntos de datos y aprovecha al máximo sus bibliotecas predefinidas, lo que permite a los usuarios reutilizar el código.
• Se admiten transiciones y animaciones y D3 gestiona la lógica implícitamente. Por lo tanto, uno no necesita administrarlos o crearlos explícitamente. La representación de animación responde y admite una transmisión rápida entre estados internos.
• Una de las características clave de D3 es que admite la manipulación de DOM y es lo suficientemente flexible como para administrar dinámicamente las propiedades de sus controladores.

Sintaxis:
D3 utiliza las funciones de JavaScript para llevar a cabo la mayoría de las tareas de selección, transición y enlace de datos . CSS también juega un papel clave en el estilo de los componentes. Además, las funciones de JavaScript se pueden programar de tal manera que puedan leer datos presentes en otros formatos.

• Selección: antes de trabajar en un conjunto de datos, la principal tarea que se debe realizar es la selección, es decir, la recuperación de datos del conjunto de datos. D3 habilita la tarea de selección al pasar una etiqueta predeterminada como parámetro a la función de selección.

  d3.selectAll("pre")   // It select all elements defined under the <pre> tag   .style("color", "cyan"); // set style "color" to value "cyan" color

  De manera similar, uno puede trabajar en varios conjuntos de datos definidos bajo etiquetas específicas. Los parámetros de selectAll() pueden ser etiquetas, clases, identificadores o atributos. Los elementos se pueden modificar, agregar, eliminar o manipular, y todo esto se basa completamente en datos.

• Transiciones: las transiciones pueden hacer que los valores y atributos de un conjunto de datos sean dinámicos.

  d3.selectAll("pre")     // select all <pre> elements    .transition("transitionEx") // Declaring transition named as "transitionEx"      .delay(10)          // transition starting after 10ms      .duration(50);      // transitioning during 50ms

  En el escenario anterior, observe que para todos los elementos que vienen como un subconjunto de la etiqueta previa, se realizó la transición en consecuencia.

Para usos más avanzados, D3 hace uso de datos cargados para la creación de objetos y la manipulación, la adición de atributos y la transición se realizan en consecuencia. Todas estas operaciones se incluyen en la parte de enlace de datos.

Configuración del entorno D3.js: para utilizar D3 para un sitio web o una página web, lo primero que debe tenerse en cuenta es su instalación o importación de la biblioteca en la página web.

1. El D3 es una biblioteca de código abierto. El código fuente está disponible gratuitamente en el sitio web de D3.js. Descargue la última versión de la biblioteca. (5.7.0 actualmente)
   Descargue la biblioteca D3 desde el enlace de origen[/caption]
2. Descomprima el archivo .zip que obtuvo después de completar la descarga. Localice el archivo d3.min.js, que es la versión mínima del código fuente de D3. Copie ese archivo e inclúyalo en la carpeta raíz o en el directorio de la biblioteca principal de la página web. En la página web, incluya el archivo d3.min.js como se muestra.

   <!DOCTYPE html> <html lang="en">     <head>                    <!--Adding the source file of D3 here -->         <script src="../d3.min.js"></script>     </head>            <body>         <script>                        // write your own d3 code here          </script>     </body> </html>

   Nota: D3 no es compatible con Internet Explorer 8 o sus versiones anteriores. Preferiblemente use Safari/Mozilla Firefox o Chrome.

3. Ejemplo: El ejemplo básico que se muestra a continuación demuestra el uso de D3 para la creación de objetos SVG, es decir, un círculo en un escenario dentro de un documento HTML.

   <!DOCTYPE html> <htm> <meta charset="utf-8"> <body> <svg width="960" height="500"></svg> <script src="https://d3js.org/d3.v4.min.js"></script>     <body>     <div id="circle"></div>                // Declaring the script type      <script type="text/javascript">                    // Creating a variable to store SVG attributes         var myGraphic = d3.select("#circle")                    // applying the svg type attribute          .append("svg")                      // initializing the width of the object pane         .attr("width", 500)                      // initializing the height of the object pane         .attr("height", 500);              myGraphic.append("circle")                // Outline color attribute set to blue         .style("stroke", "blue")                     // Fill color attribute set to red         .style("fill", "red")                      // Radius attribute set to 100         .attr("r", 100)                    // X-coordinate set to 300px         .attr("cx", 300)                     // Y-coordinate set to 100px         .attr("cy", 100)                       // applying action when the mouse pointer hovers over the circle         .on("mouseover", function(){d3.select(this).style("fill", "lavender");})         .on("mouseout", function(){d3.select(this).style("fill", "red");});             </script> </body> </html>

   Salida:
   antes de que el mouse se mueva:
   
   después de que el mouse se mueva:
   

Además, las animaciones, las transiciones y los atributos se pueden agregar y manipular con menos esfuerzo utilizando un marco D3. Todo el trabajo de manejo de acciones se puede hacer usando funciones auxiliares. En el ejemplo anterior, la función select() realiza la tarea de recuperación de un argumento, mientras que append() agrega un atributo como elemento secundario al argumento seleccionado. D3 se centra en la abstracción y, por lo tanto, la mayoría de las acciones o ejecuciones internas están ocultas para el usuario final, lo que facilita su uso. La tarea de vincular el evento se realiza en el caso anterior con la ayuda de la función .on() que pasa los eventos del mouse como argumento. Notablemente, los conceptos de funciones anónimas se utilizan en el marco D3. Aquí, la función anónima se pasa como argumento.
Se pueden realizar acciones más complejas utilizando el marco D3, como la recuperación de datos de un formato diferente de conjunto de datos, como un archivo .csv o JSON.

ventajas:

• D3 admite estándares web como HTML, CSS, SVG, que son conocidos por todos los programadores, por lo que cualquiera puede usarlo fácilmente. En resumen, D3 expone las capacidades de los estándares web como HTML5, CSS3 y SVG.
• Es bastante ligero y flexible con el código que es reutilizable, por lo que es preferible.
• Brinda un control más amplio al usuario para administrar la visualización y los datos que las otras API o marcos disponibles.
• Al ser un marco de código abierto, uno puede manipular fácilmente el código fuente de D3 según sus necesidades.

Desventajas:

• D3 no es compatible con versiones anteriores de navegadores. En caso de que alguien desee visualizar los datos con compatibilidad hacia atrás, la visualización puede ser necesariamente estática, debido a la mala compatibilidad.
• La seguridad sigue siendo un desafío para D3. Los datos no se pueden ocultar o proteger fácilmente con D3.

Aplicaciones: Sus ventajas son preferibles en varios campos de visualización de datos. Algunos de los principales dominios en los que se usa D3 son los siguientes:

• Gráficos básicos y visualizaciones analíticas de gráficos.
• Visualizaciones de red.
• Módulos de desarrollo de paneles de datos.
• Creación y síntesis de mapas web.
• Representación interactiva de datos.

Artículo relacionado: HTML | Conceptos básicos de SVG