Tema 05 — D3.js. Escalando y dibujando ejes de un gráfico

🎧 Narración del Tema 05 (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: Escalar correctamente en D3 permite traducir datos a píxeles con fidelidad y añadir ejes que hagan legible la visualización.

Puntos clave:

Las escalas en D3 son funciones que conectan un dominio de entrada con un rango de salida. En la práctica, convierten valores de datos en posiciones, tamaños o distancias dentro del SVG.
Escalar no es solo un ajuste técnico: afecta directamente a la veracidad de la visualización. Una escala mal definida puede reforzar interpretaciones erróneas de los datos.
En escalas lineales, el input domain viene de los datos y el output range lo define quien diseña la visualización. Por ejemplo, valores de ventas de manzanas pueden traducirse a alturas entre 10px y 350px.
D3 permite calcular automáticamente máximos con d3.max, evitando fijar manualmente los límites del dominio. Esto hace que el gráfico se adapte cuando cambia el dataset.
En un scatter plot, las coordenadas deben pasar por xScale e yScale antes de dibujarse. Para el eje Y, el rango suele invertirse con .range([h, 0]) porque el SVG crece hacia abajo.
Los ejes se construyen con d3.svg.axis(), se vinculan a una escala y se insertan en el SVG mediante .call(axis). Luego pueden posicionarse con transform y estilizarse con CSS.
Las escalas ordinales sirven para categorías discretas, no para valores continuos. En un bar chart, permiten distribuir barras según el orden del array y calcular automáticamente el ancho de cada banda.
Funciones como .ticks(5), .rangeBand() y .rangeRoundBands() ayudan a controlar la legibilidad del gráfico: número de divisiones, ancho de barras y separación visual.

Términos técnicos clave: D3.js, escalas, dominio de entrada, rango de salida, normalización, escala lineal, d3.max, scatter plot, SVG, ejes, escala ordinal, rangeRoundBands

Fórmulas, procesos o ejemplos relevantes:

Proceso para crear una escala lineal:
1. Crear la función con d3.scale.linear().
2. Definir el dominio con .domain([mínimo, máximo]).
3. Definir el rango visual con .range([mínimo_px, máximo_px]).
4. Aplicar la escala al dibujar: xScale(d[0]) o yScale(d[1]).
Ejemplo de normalización visual: valores de manzanas entre 100 y 500 pueden representarse dentro de un rango de 10px a 350px, evitando que el gráfico crezca sin control.
Proceso para escalar un scatter plot:
1. Calcular el máximo de X con d3.max(dataset, function(d) { return d[0]; }).
2. Calcular el máximo de Y con d3.max(dataset, function(d) { return d[1]; }).
3. Crear xScale con .range([0, w]).
4. Crear yScale con .range([h, 0]).
5. Sustituir coordenadas directas por coordenadas escaladas.
Ajuste de márgenes:
1. Definir marginx y marginy.
2. Usar .range([0 + marginx, w - marginx]) para X.
3. Usar .range([h - marginy, 0 + marginy]) para Y.
Proceso para crear un eje:
1. Crear el eje con d3.svg.axis().
2. Asociarlo a una escala con .scale(xScale).
3. Definir orientación con .orient("bottom") o .orient("left").
4. Insertarlo con svg.append("g").call(axis).
5. Posicionarlo con transform, por ejemplo translate(0, h - padding).
Cálculo de bandas en escala ordinal:
1. Ancho total: 600.
2. Número de elementos: 12.
3. Cálculo: (600 - 0) / 12 = 50.
4. Cada barra ocupa una banda de 50px antes de aplicar separación visual.

Resumen narrativo

El tema introduce un cambio importante en la forma de trabajar con D3.js: pasar de dibujar formas directamente a construir visualizaciones escaladas. Hasta ahora, los valores podían convertirse casi de manera inmediata en píxeles, pero ese enfoque deja de ser suficiente cuando los datos crecen, cambian o necesitan ajustarse a un espacio visual concreto. La escala aparece entonces como una función intermedia que traduce datos en representación gráfica.

La idea central es que una escala relaciona un dominio de entrada con un rango de salida. El dominio corresponde a los valores reales del dataset, mientras que el rango corresponde al espacio disponible en la visualización. El ejemplo de las manzanas lo muestra con claridad: si cada valor se transforma directamente en píxeles, un crecimiento mensual puede hacer que las barras se salgan del gráfico. Al definir un rango, el diseñador controla el espacio visual sin alterar la relación proporcional entre los datos.

Esta operación tiene una dimensión técnica, pero también interpretativa. El material insiste en que una mala escala puede producir una imagen incorrecta de los datos y, por tanto, validar hipótesis equivocadas. La referencia a la percepción humana recuerda que las visualizaciones no son neutrales: orientan la lectura. Por eso, normalizar y escalar no debe entenderse como un simple ajuste de diseño, sino como una condición para representar los datos con fidelidad.

En el caso del scatter plot, D3 permite automatizar parte del trabajo mediante funciones como d3.max, que calculan los límites del dominio a partir del dataset. Así, en lugar de escribir manualmente el valor máximo de X o Y, se obtiene desde los propios datos. Luego, cada coordenada se dibuja pasando por xScale o yScale, lo que adapta el gráfico al tamaño del SVG. Un detalle clave es invertir el rango del eje Y, porque en SVG el origen está arriba y los valores positivos descienden visualmente.

Una vez escalado el gráfico, el tema añade los ejes. Los ejes no son solo elementos decorativos: permiten leer el gráfico, ubicar los valores y entender la magnitud de lo representado. En D3 se crean con d3.svg.axis(), se asocian a una escala y se insertan en un grupo SVG. Después pueden moverse con transform, por ejemplo para colocar el eje X en la parte inferior, y estilizarse con CSS específico para SVG.

Finalmente, el tema distingue entre escalas lineales y ordinales. Las lineales sirven para valores continuos, mientras que las ordinales organizan categorías discretas, como calificaciones o respuestas de cuestionario. En un bar chart, una escala ordinal permite respetar el orden del array y repartir automáticamente las barras en bandas. Funciones como rangeRoundBands y rangeBand simplifican el cálculo del ancho y la separación, haciendo que el código sea más claro y adaptable.

Para profundizar

Replicar el scatter plot escalado del tema y modificar manualmente el range para observar cómo cambia la distribución visual.
Practicar el uso de d3.max con datasets formados por arrays dentro de arrays, calculando máximos para X e Y.
Experimentar con .ticks(5) en los ejes para comparar distintos niveles de división y legibilidad.
Quitar el parámetro 0.05 de rangeRoundBands([0, w], 0.05) y observar cómo cambia la separación entre barras.
Revisar los apartados “Interactive Data Visualization for the Web”, “Setting up the Axes”, “Labelling multiple lines on a graph” y “How to rotate the text labels for the x Axis” incluidos en el material del tema.