Tema 03 — D3.js. Introducción y funcionalidades

🎧 Narración del Tema 03 (ElevenLabs Matilda)

Voz generada por IA (ElevenLabs Matilda) basada en la guía de estudio narrada. Tu celular puede reproducir este audio mientras lees, o mientras haces otras cosas.

TL;DR: D3.js permite crear visualizaciones web dinámicas, interactivas y altamente personalizables vinculando datos con HTML, SVG, CSS y JavaScript.

Puntos clave:

D3.js significa Data-Driven Documents: la visualización se construye a partir de datos, no solo desde una plantilla gráfica fija. Esto permite adaptar tanto la lectura de datos como la forma visual resultante.
La librería trabaja con estándares web como HTML5, CSS3, SVG y JavaScript, por lo que funciona directamente en el navegador sin plugins adicionales.
D3 permite crear, seleccionar y modificar elementos HTML desde código. Por ejemplo, d3.select("body").append("p").text("Párrafo nuevo") añade dinámicamente un párrafo al documento.
La sintaxis habitual de D3 usa encadenamiento de funciones, o chaining. Una misma instrucción puede seleccionar un elemento, añadir otro y definir su texto o atributos.
D3 también permite modificar atributos y estilos de elementos existentes. Por ejemplo, se puede añadir un atributo descr a un párrafo o cambiar su tamaño de fuente con .style("font-size", "40px").
Con selectAll y each, D3 puede aplicar cambios a varios elementos e iterar sobre ellos. El tema muestra tres cajas div que reciben clases CSS y luego un encabezado con el índice de cada iteración.
La selección de subelementos puede hacerse con selectores jerárquicos o con dobles llamadas a select. Esto permite trabajar con estructuras HTML más complejas, como secciones que contienen cajas de distintos colores.
La principal ventaja de D3 es su control fino sobre la visualización. Requiere conocimientos de JavaScript, pero ofrece mucha flexibilidad frente a herramientas más cerradas como Tableau o QlikView.

Términos técnicos clave: D3.js, Data-Driven Documents, JavaScript, SVG, HTML5, CSS3, Loading, Binding, Transforming, Transitioning, CDN, chaining

Fórmulas, procesos o ejemplos relevantes:

Instalación por archivo local: descargar d3.zip desde d3js.org, descomprimirlo, ubicar la librería en un directorio local y llamarla desde el código JavaScript.
Instalación por CDN: enlazar la librería desde una URL, por ejemplo https://d3js.org/d3.v5.min.js.
Código base de trabajo: crear un documento HTML con una etiqueta <script> que cargue D3 dentro de <head> y un <body> donde se generarán los elementos.
Creación dinámica de un párrafo: seleccionar body, añadir un elemento p y asignarle el texto "Párrafo nuevo".
Modificación de un elemento existente: seleccionar p#target y cambiar su contenido con .text("Añadiendo contenido").
Modificación de atributos: usar .attr("descr", "primer_descriptor") para añadir un atributo a un elemento HTML.
Modificación de estilos: usar .style("font-size", function(){ return "40px"; }) para aplicar estilos dinámicamente.
Iteración sobre varios elementos: usar d3.selectAll("div").attr("class", "red box").each(...) para asignar clases y añadir contenido distinto a cada caja.

Resumen narrativo

Este tema introduce D3.js como una librería central para la visualización de datos en la web. La razón por la que el curso le dedica varios temas es su enorme flexibilidad: D3 no se limita a generar gráficos prefabricados, sino que permite diseñar visualizaciones hasta un nivel de detalle muy fino. El objetivo inicial no es correr, sino comprender bien los fundamentos, porque serán la base de visualizaciones más avanzadas.

D3.js se define como una librería JavaScript que usa datos digitales para crear y controlar gráficas dinámicas e interactivas en navegadores. Su nombre, Data-Driven Documents, resume una idea clave: los documentos se orientan a los datos. En lugar de forzar siempre los datos a una estructura visual cerrada, D3 permite adaptar la visualización o modificar la forma en que la librería interpreta esos datos.

Una de sus fortalezas es que trabaja con estándares web ya conocidos: HTML5, CSS3, SVG y JavaScript. Esto significa que no requiere plugins especiales ni tecnologías externas al navegador. Además, el uso de SVG facilita que las visualizaciones se adapten a distintos tamaños de pantalla, desde monitores grandes hasta dispositivos móviles.

El tema muestra los primeros pasos prácticos con ejemplos sencillos. D3 puede seleccionar el cuerpo de una página, añadir un párrafo y escribir texto dentro de él mediante una cadena de funciones. Esta forma de escribir, llamada chaining, permite concatenar operaciones como seleccionar, añadir, modificar atributos o definir estilos en una misma secuencia.

Después se avanza hacia la modificación de elementos existentes. D3 puede seleccionar un párrafo por su identificador, cambiar su contenido, añadirle atributos personalizados o modificar estilos como el tamaño de fuente. Lo importante no es solo que cambie el HTML, sino que estos cambios podrían depender de variables o datos reales, abriendo la puerta a visualizaciones dinámicas.

El material también introduce el trabajo con varios elementos a la vez. Con selectAll, D3 puede aplicar clases CSS a varios div, y con each puede recorrerlos uno por uno para añadir contenido específico, como un número de iteración. Luego se muestran formas de seleccionar subelementos dentro de secciones, ya sea mediante selectores jerárquicos o encadenando llamadas a select.

En conjunto, D3 aparece como una herramienta potente, abierta y muy flexible. Exige una curva de aprendizaje porque requiere programar en JavaScript, pero a cambio ofrece control completo sobre el resultado visual. Por eso es especialmente útil cuando se necesitan visualizaciones personalizadas, interactivas y estrechamente vinculadas a los datos.

Para profundizar

Revisar la galería oficial de ejemplos de D3 en GitHub: https://github.com/d3/d3/wiki/Gallery.
Consultar la página oficial de D3.js: https://d3js.org/.
Leer D3 for the Impatient: Interactive Graphics for Programmers and Scientists.
Explorar Data Visualization with D3.js Cookbook.
Practicar con los recursos “Creando un mapa sencillo con D3” y “Learn D3.js in 5 minutes”.