Diagramas Sankey: Análisis de Flujos en una Hora

Diagramas de Sankey para Análisis de Flujos Financieros: De los Datos a la Interactividad

Los diagramas de Sankey visualizan flujos de recursos, mostrando el movimiento de fondos desde las fuentes a través de nodos hasta los destinatarios. A diferencia de los gráficos circulares, que se centran en las proporciones, los diagramas de Sankey muestran la cadena completa: de dónde vienen los fondos, por qué nodos intermedios pasan y dónde se distribuyen.

Esto permite identificar patrones ocultos. Por ejemplo, los gastos pequeños individualmente parecen insignificantes, pero colectivamente representan el 21% del presupuesto. El diagrama tiene cuatro capas: ingresos, presupuesto total, categorías de gastos, subcategorías.

Aspectos clave:

• La dirección del flujo es visible: salario → fondo común → comida/transporte.
• Los nodos (p. ej., bancos) muestran la concentración de fondos.
• La anidación preserva las conexiones: transferencia a T-Bank → mayor detalle.

Comparación con Gráficos Circulares

Los gráficos circulares pierden legibilidad con 5–7 categorías: los segmentos son difíciles de comparar, no hay dirección de movimiento ni anidación. Sankey resuelve esto mostrando el proceso como una secuencia de flujos con anchos de línea proporcionales.

| Aspecto | Gráfico Circular | Sankey |

|--------|-----------|--------|

| Legibilidad | Disminuye con >5 categorías | Escalable con zoom |

| Dirección | Ninguna | Explícita: izquierda a derecha |

| Anidación | No | Soportada |

| Flujos | Solo proporciones | Trayectoria completa |

Sankey es adecuado para tareas con una secuencia clara de etapas.

Pasos para Crear un Sankey Interactivo

Stack: React + D3.js con diseño personalizado de Sankey. El proceso se aceleró mediante IA (Claude) para generar código basado en descripciones.

• Preparación de Datos: De extracto PDF a CSV mediante IA. Limpieza, agrupación, normalización de categorías. Montos <1000 rublos agrupados en "Varios" con detalles en el tooltip.
• Estructura: Ingresos (por fuente: salario, transferencias) → presupuesto total → gastos → subcategorías.
• Primera Iteración: Renderizado básico con tooltips.
• Refinamientos:

- Centrar subcategorías.

- Limitar el ancho del flujo.

- Zoom para legibilidad de etiquetas.

- Adaptación móvil: panel inferior en lugar de tooltips.

Ejemplo de Formulación de Tarea para IA:

"Sankey en D3.js con tooltips. Ingresos → presupuesto → gastos. Agrupar <1000 rublos en 'Varios'."

Funcionalidades Interactivas y Refinamientos

Tooltips: al pasar el cursor — info breve, mantener presionado — lista de operaciones, clic fija la posición. El posicionamiento considera los límites de la pantalla.

Problemas con IA y Soluciones:

• Desplazamiento del tooltip: se añadieron reglas.
• Categorización de pagos: corrección manual de los ambiguos (p. ej., MAPP_SBERBANK → "Otras Transferencias").
• Los ahorros no se tratan como gastos.

Versión Móvil:

• Zoom con botones + gestos.
• Modo lista para vista detallada.
• Panel inferior para tooltips.

Las etiquetas no se envuelven separadamente de los números (₽ adjunto).

Aplicaciones Más Allá de las Finanzas Personales

• Movimiento de fondos entre cuentas/unidades.
• Análisis de costos con nodos intermedios.
• Flujos de clientes, solicitudes, etapas en negocios.

Limitaciones:

• No para análisis precisos (sin números en los ejes).
• Deficiente sin flujos o >3 niveles de anidación.
• Desordenado con grandes volúmenes de datos.

Qué Importa

• Velocidad de Desarrollo: Diagrama estático en Illustrator — 2 días; interactivo en D3 — 1 hora + refinamientos.
• Barrera de Entrada: Requiere comprensión de los datos y capacidad para formular tareas para la IA.
• Compromiso de Legibilidad: Zoom y ocultar etiquetas superpuestas; detalles en tooltips.
• IA como Herramienta: Genera código, pero las iteraciones y la lógica de dominio son del desarrollador.
• Cambio de Enfoque: Los experimentos se volvieron más baratos, enfoque en la interactividad.

— Editorial Team