Ir al contenido
VIDAMA · Curso

Tema 04 — D3.js. Datos, SVG y gráficas

🎧 Narración del Tema 04 (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 cargar datos CSV/JSON y convertirlos en gráficos SVG básicos como barras y diagramas de dispersión.

Puntos clave:

  • El tema introduce el paso de manipular datos con D3 a dibujar visualizaciones reales. La recomendación central es avanzar despacio, practicando cada instrucción antes de modificar gráficos más complejos.
  • D3 puede cargar datos desde archivos CSV y JSON mediante d3.csv() y d3.json(). En CSV se accede a los valores por cabeceras, mientras que en JSON se recorren propiedades del objeto.
  • La función callback es esencial al cargar archivos externos. Si D3 no encuentra el archivo, por ejemplo porque la ruta es incorrecta, la función no se ejecuta.
  • SVG es el formato recomendado para crear gráficos vectoriales en HTML. Permite dibujar círculos, rectángulos, elipses, líneas y texto con atributos como posición, tamaño, relleno, borde y opacidad.
  • En SVG el punto (0,0) está en la esquina superior izquierda. Esto afecta especialmente a los gráficos de barras, porque los rectángulos crecen hacia abajo si no se ajusta la coordenada y.
  • Un Bar Chart puede construirse primero con elementos div, pero SVG ofrece mayor control visual y compatibilidad. Con D3, cada dato del array se enlaza a un rectángulo mediante .data(), .enter() y .append().
  • El Scatter Plot usa una estructura de datos en pares [x, y] y representa cada punto como un círculo SVG. Cada par alimenta los atributos cx y cy.

Términos técnicos clave: D3.js, CSV, JSON, callback, SVG, HTML, d3.csv(), d3.json(), append(), Bar Chart, Scatter Plot, opacidad

Fórmulas, procesos o ejemplos relevantes:

  • Carga de CSV: crear comida.csv, llamar a d3.csv("comida.csv", callback), recorrer cada fila con forEach() y mostrar valores usando las cabeceras Comida y Preferencia.
  • Carga de JSON: crear coordenadas.json, llamar a d3.json("coordenadas.json", callback), recorrer objetos y acceder a propiedades como x_axis, y_axis, radius y color.
  • Creación de un Bar Chart con div: definir una clase .bar, enlazar dataset con .data(dataset), crear un div por dato y ajustar height con return d + "px".
  • Creación de un Bar Chart con SVG: definir w y h, crear el elemento svg, añadir rectángulos, calcular x con i * (w / dataset.length), calcular width con w / dataset.length - 1, y ajustar y con h - d.
  • Ejemplo de ajuste visual: usar fill: teal o un color calculado como rgb(0, 0, d * 10) para crear variación cromática según el dato.
  • Creación de un Scatter Plot: usar datos como [[5, 20], [480, 90], ...], crear círculos y asignar cx = d[0], cy = d[1], r = 5.

Resumen narrativo

Sección titulada «Resumen narrativo»

El Tema 4 marca el paso desde conocer D3.js como biblioteca hasta usarlo para construir visualizaciones básicas. La idea de fondo es que antes de modificar gráficos complejos conviene dominar los fundamentos: cómo entran los datos, cómo se recorren y cómo se transforman en elementos visibles dentro de una página HTML. Por eso el material insiste en practicar cada bloque de código y no precipitarse, incluso si ya se tienen nociones de programación o JavaScript.

El primer bloque práctico se centra en las estructuras de datos CSV y JSON. Con CSV, el ejemplo de comidas y preferencias muestra que D3 no trata el archivo como una matriz genérica, sino como una colección de filas cuyos valores se leen a partir de las cabeceras. Con JSON, el ejemplo de coordenadas permite ver una estructura más cercana a objetos con propiedades como posición, radio y color. En ambos casos, el patrón es parecido: cargar el archivo, esperar la callback y recorrer los datos con forEach().

Después, el tema introduce SVG como el soporte gráfico principal para trabajar con D3. Aunque es posible crear visualizaciones con elementos div, SVG resulta más adecuado para gráficos porque ofrece precisión, escalabilidad y compatibilidad entre dispositivos y navegadores. A partir de formas simples como círculos, rectángulos, elipses y líneas, se construye el vocabulario visual necesario para representar datos.

Un punto importante es comprender el sistema de coordenadas de SVG. El origen (0,0) está en la esquina superior izquierda, lo que puede resultar contraintuitivo al crear barras, porque los rectángulos se dibujan hacia abajo. Por eso, en un Bar Chart SVG, no basta con asignar la altura del rectángulo al valor del dato: también hay que desplazar su posición vertical mediante y = h - d para que las barras parezcan crecer desde una línea base común.

El Bar Chart se presenta primero con div, como una forma sencilla de entender la relación entre datos y altura visual. Luego se reconstruye con SVG, usando rectángulos generados dinámicamente con D3. Esta segunda versión permite controlar mejor la posición, la anchura, la separación, el color y la incorporación de etiquetas de texto sobre las barras.

Finalmente, el Scatter Plot muestra cómo cambiar la lógica visual sin abandonar el mismo patrón de trabajo. En vez de usar un array simple de valores, se emplean pares de coordenadas [x, y], y cada par se representa como un círculo. Aunque el gráfico aún no incluye ejes ni otros elementos más avanzados, el ejercicio deja claro el principio central: D3 conecta datos con elementos gráficos y permite que sus atributos dependan directamente de esos datos.

Para profundizar

Sección titulada «Para profundizar»