3 hvid sum up Introducción a D3.js

Introducción a D3.js

• D3.js es una librería de JavaScript altamente flexible que permite diseñar gráficos detallados.
• Se utiliza JavaScript para la programación y se abordan conceptos avanzados que normalmente no se ven en la programación HTML.
• Permite crear visualizaciones sin ser diseñador experto.
• Se pueden encontrar y modificar ejemplos en GitHub.

Galería de GitHub

• Se puede acceder a la galería de GitHub para buscar ejemplos de visualizaciones en: https://github.com/d3/d3/wiki/Gallery
• El objetivo del curso es que los estudiantes puedan diseñar e implementar sus propias visualizaciones basadas en los conceptos básicos de D3.js.

Definición e instalación

• D3.js (Data-Driven Documents) es una librería JavaScript que utiliza datos digitales para impulsar la creación y control de gráficas dinámicas e interactivas en los navegadores.
• Es compatible con los estándares W3C, SVG (Scalable Vector Graphics), JavaScript, HTML5 y CSS3 (Cascading Style Sheets).
• Permite un gran control sobre el resultado visual final, a diferencia de otras librerías.

Conceptos relevantes de D3.js

• Data driven documents: Permite reutilizar visualizaciones existentes, adaptando los datos o la forma en que D3 los lee.
• Documentos orientados a datos: Ayuda a adaptar los datos o cambiar la forma en que D3 los lee, brindando control absoluto sobre la visualización.
• Scalable Vector Graphics (SVG): Permite adaptar la visualización a diferentes resoluciones, desde monitores grandes hasta dispositivos móviles.
• Compatible con estándares: Funciona con JavaScript, HTML5 y CSS3, lo que permite su uso en diversos navegadores y dispositivos.

Funcionalidades de D3.js

• Loading: Carga información en la memoria del navegador.
• Binding: Añade información a elementos HTML, vinculando datos y objetos HTML.
• Transforming: Lee datos y proporciona una respuesta visual, transformando el código HTML para mostrar la visualización.
• Transitioning: Reacciona a la entrada del usuario y proporciona una respuesta diferente.

Instalación de D3.js

• No requiere instalación de software.
• Es una librería open source disponible en: https://d3js.org/
• Se puede integrar llamando a la librería JavaScript de D3 desde el código fuente de dos maneras:
  • Incluir la librería D3 desde el ordenador descargando la última versión disponible en d3js.org a través del fichero d3.zip.
  • Incluir la librería D3 desde CDN (Content Delivery Network).
• Ejemplo de código para usar la librería D3: <script src="https://d3js.org/d3.v5.min.js"></script>

Generando elementos HTML

• D3 es capaz de transformar el código HTML y vincular datos con objetos HTML.
• La sintaxis de D3 sigue el concepto de encadenamiento (chaining) concatenando varias funciones.

Funciones de D3

La sentencia HTML realiza las siguientes funciones:

• Select: Selecciona el elemento body del HTML.
• Append: Añade un elemento al body y define qué tipo de elemento HTML es.
• Text: Define el texto que se añadirá, es decir, el contenido textual.

Modificando elementos HTML

• D3 permite modificar elementos HTML y sus atributos.
• Añadir un atributo: Se puede añadir un atributo a un elemento y asignarle un valor.
• Se usa la función style para modificar estilos en elementos HTML..

Modificando varios elementos HTML al mismo tiempo

• Se refiere a un ejemplo del libro "Data Visualization with D3.js Cookbook" (Zhu, 2013).
• Muestra cómo aplicar conceptos a varios elementos HTML al mismo tiempo.
• Para iterar sobre elementos y realizar acciones diferentes en cada uno, se utiliza la función each, que opera sobre los diferentes elementos.
• La función each itera sobre los diferentes elementos refiriéndose al elemento div como "this".

Trabajando con subelementos

• Explica cómo seleccionar un subelemento HTML dentro de otro elemento.
• Se puede seleccionar un subelemento de dos maneras:
  • Identificador > elemento html (p.ej., d3.select("#section1 > div")).
  • Doble select (p.ej., d3.select("#section2").select("div")). También es posible reemplazar la sección body y dejarla completamente limpia.

Ventajas de D3.js

• Requiere conocimientos de JavaScript.
• Es una biblioteca de JavaScript que se puede usar con cualquier marco JS (Angular.js, React.js, etc.).
• Es una herramienta especializada para la visualización de datos.
• Es de código abierto, permitiendo trabajar con el código fuente y añadir características propias.
• Funciona con estándares web sin necesidad de plugins, solo un navegador.
• No requiere nuevas herramientas de aprendizaje o depuración.
• Proporciona control completo sobre la visualización.
• Es ligero, rápido y funciona bien con grandes conjuntos de datos.