D3.js

¿Qué hace D3.js?

Resumen

D3.js es una biblioteca JavaScript de bajo nivel para construir visualizaciones de datos interactivas y personalizadas mediante la vinculación de datos a elementos del DOM. Proporciona escalas, ejes, generadores de formas, proyecciones geográficas, simulaciones de fuerza y diseños jerárquicos, brindando a los desarrolladores control total sobre la salida visual, mientras se integra con React a través de escalas y diseños calculados.

Instrucciones

• Al vincular datos, usa .data(dataset).join("elemento") (D3 v6+) para el patrón de entrada/actualización/salida, estableciendo atributos y estilos a partir de los datos vinculados mediante funciones de acceso.
• Al crear escalas, elige el tipo adecuado (scaleLinear para continuo, scaleBand para barras categóricas, scaleTime para fechas, scaleOrdinal para mapeo de colores) y siempre establece el dominio a partir de los datos usando d3.extent().
• Al construir ejes, créalos con d3.axisBottom(escala) o d3.axisLeft(escala), configura las marcas y da formato a las etiquetas con d3.format(), y regenera al cambiar el tamaño.
• Al crear tipos de gráficos, usa generadores de formas (d3.line(), d3.area(), d3.arc(), d3.pie(), d3.stack()) y funciones de diseño (d3.treemap(), d3.forceSimulation(), d3.geoPath()) para visualizaciones complejas.
• Al agregar interactividad, usa transiciones (.transition().duration(750)) para actualizaciones suaves de datos, tooltips al pasar el ratón y exploración con cepillado y zoom.
• Al integrar con React, usa D3 para cálculos (escalas, diseños, transformaciones de datos) y React para el renderizado DOM, calculando valores en useMemo y usando useEffect con referencias para animaciones impulsadas por D3.

Ejemplos

Ejemplo 1: Construir un panel en tiempo real con múltiples tipos de gráficos

Solicitud del usuario: "Crear un panel con gráficos de líneas, barras y un gráfico circular a partir de datos de API"

Acciones:

1. Configura escalas compartidas con d3.scaleTime() para el eje X y d3.scaleLinear() para el eje Y
2. Construye un gráfico de líneas usando d3.line() con interpolación de curva suave y relleno de área
3. Construye un gráfico de barras agrupadas usando d3.scaleBand() con transiciones de entrada escalonadas
4. Construye un gráfico de dona usando d3.pie() y d3.arc() con tooltips al pasar el ratón

Salida: Un panel responsivo con gráficos animados que se actualizan suavemente cuando cambian los datos.

Ejemplo 2: Crear un grafo de red dirigido por fuerzas

Solicitud del usuario: "Visualizar relaciones entre entidades como un grafo de red interactivo"

Acciones:

1. Configura d3.forceSimulation() con forceManyBody, forceLink y forceCenter
2. Renderiza nodos como círculos con d3.scaleOrdinal() coloreando por categoría
3. Agrega interacción de arrastre con d3.drag() para reposicionar nodos
4. Implementa zoom y desplazamiento con d3.zoom() y tooltips al pasar el ratón

Salida: Un grafo dirigido por fuerzas interactivo con nodos arrastrables, categorías codificadas por colores y navegación con zoom.

Directrices

• Usa D3 para escalas, diseños y procesamiento de datos; deja que React maneje el renderizado DOM en aplicaciones React.
• Usa .join() en lugar de entrada/actualización/salida manual para una vinculación de datos más simple y limpia.
• Siempre establece los dominios de escala a partir de los datos (d3.extent()) en lugar de codificar rangos.
• Usa d3.format() para etiquetas de ejes y tooltips: ",.0f" para miles, "$.2f" para moneda.
• Agrega transiciones de 750 ms con easeCubicInOut para animaciones suaves de actualización de datos.
• Haz que las visualizaciones sean responsivas recalculando escalas en las devoluciones de llamada de ResizeObserver.
• Agrega aria-label a los elementos SVG y etiquetas <title> significativas para accesibilidad.