Mi primera visualización de datos con D3.js

Un cliente me pidió un panel con la evolución de sus ventas a lo largo del año, “pero que no se vea como un gráfico de Excel pegado en la web”. Con cualquier librería de gráficos de plantilla habría tardado una tarde. Decidí hacerlo con D3.js en su lugar, y tardé bastante más de una tarde — pero aprendí más de SVG en esa semana que en los diez años anteriores.

Por qué D3 y no una librería de gráficos

Las librerías de gráficos ya vienen con las formas decididas: barras, líneas, tartas, con un puñado de opciones de color y ya está. D3 no es una librería de gráficos, en realidad — es una librería para unir datos con el DOM. Eso significa que no hay ningún “tipo de gráfico” predefinido: tú decides que cada dato es un círculo, o una barra, o una curva, y D3 se encarga de la parte tediosa (escalar los valores al tamaño del contenedor, generar los ejes, animar la transición cuando cambian los datos).

SVG a mano, otra vez

Llevaba años usando SVG solo para iconos, casi sin pensar en cómo funcionaba por debajo. Construir un gráfico desde cero me obligó a entender de verdad el sistema de coordenadas, cómo funciona un <path> con sus comandos (M, L, C…), y por qué D3 tiene toda una familia de “generadores de forma” que convierten un array de datos en la cadena de ese atributo d sin que tengas que calcularla tú a mano punto por punto.

Dónde me atasqué

En las transiciones al actualizar los datos. Hacer que una barra crezca cuando su valor cambia, en vez de simplemente teletransportarse al nuevo tamaño, requiere entender el patrón enter/update/exit de D3 — qué elementos son nuevos, cuáles ya existían y solo cambian, y cuáles hay que quitar. La primera versión que hice ignoraba esto por completo y cada actualización de datos borraba y redibujaba el SVG entero, lo que se notaba como un parpadeo feo. Entenderlo bien cambió por completo cómo quedó el resultado final.

No uso D3 para todo — para un gráfico estándar sigo tirando de una librería de plantilla sin remordimientos. Pero para lo que de verdad tiene que verse distinto, ahora sé por dónde empezar.