Diagrama de Sankey

Flujos entre etapas con su volumen.

Definición

Un diagrama de Sankey une etapas con cintas cuyo grosor es la cantidad que pasa de una a otra. Lo que entra en un nodo sale por alguna de sus cintas, así que se ve dónde se reparte o se pierde el caudal. Se usa para presupuestos, energía, tráfico o el paso de clientes entre etapas.

Editar con tus datos SVG Spec JSON

Datos: source · target · value
Buena para: Ver adónde va una cantidad y en qué paso se reparte o se pierde.
Evítala cuando: Cuando el proceso tiene más de tres niveles: la pieza sólo tiene tres columnas y un cuarto nivel cae en la del medio.
Se lee bien: Entre 3 y 30 elementos; dibuja hasta 1000
Datos que faltan: Dibuja el valor ausente como cero.
Accesibilidad: Lector de pantalla: tabla de datos · respeta «reducir movimiento»

Forma de los datos

Qué columnas pide

Columna	Tipo	Para qué
`source` · opcional	string	Nodo de origen. Sin ella (o sin destino) la pieza devuelve un diagrama vacío.
`target` · opcional	string	Nodo de destino. Los nodos NO se declaran: salen del conjunto de orígenes y destinos, y su COLUMNA se deduce del flujo (quien nunca es destino va a la primera; quien nunca es origen, a la última). Sólo hay tres columnas: un cuarto nivel cae en la del medio.
`value` · opcional	number	El caudal de la cinta. Ausente = 1 para todas, y entonces el dibujo no afirma nada sobre cantidades. La pieza NO comprueba que lo que entra en un nodo sea lo que sale.

Tamaños

Ancha por necesidad

Esta pieza necesita anchura para que cada rótulo quepa entero. El motor prefiere decirlo a apretarla.

A menos de 480 px sus rótulos no caben sin pisarse o recortarse, y el motor no la publica así. En el móvil se ve la versión ancha, a tamaño legible y sin recortar, dentro de un marco que se desliza.

Cuándo usarla

Tres preguntas antes de elegirla

¿El flujo va en un solo sentido, de origen a destino?

Si los intercambios van en las dos direcciones entre los mismos actores, el diagrama de cuerdas los enseña cara a cara.

Sí: quédate con diagrama de sankey

No: usa Diagrama de cuerdas

¿El caudal se ramifica entre varios destinos?

Si es una sola secuencia de pasos con abandono en cada uno, el embudo de conversión se lee antes.

Sí: quédate con diagrama de sankey

No: usa Embudo de conversión

¿Los nodos son etapas y no lugares?

Si los orígenes y destinos son sitios, el mapa de flujos los coloca en su geografía.

Sí: quédate con diagrama de sankey

No: usa Mapa de flujos

Código

La misma pieza, con tus datos

import { getPreset, renderComposition } from 'visx-render/node';

const spec = await getPreset('sankey');
spec.data.rows = misFilas; // tus columnas
const { svg, warnings } = await renderComposition(spec);

También en React con Chart y prepareComposition. Guía para desarrolladores →

Dudas

¿Tengo que declarar los nodos?

No. Salen de los orígenes y destinos de cada fila, y su columna se deduce del flujo: quien nunca es destino va a la primera y quien nunca es origen, a la última.

¿Comprueba que cuadren entradas y salidas?

No. Si lo que entra en un nodo no coincide con lo que sale, la pieza dibuja igual: cuadrar las cifras es trabajo previo.

¿Y si no tengo cantidades?

Sin columna de valor todas las cintas valen 1, y el dibujo sólo enseña conexiones, no cantidades.

¿Qué hace si faltan datos?

Dibuja el valor ausente como cero. Si un hueco no es un cero en tus datos, rellénalo o elimina la fila antes de dibujar.

¿Cómo se ve en el móvil?

A menos de 480 px el motor no la compone sin pisar o cortar rótulos, y lo dice. En el móvil se ve la versión ancha, a tamaño legible, dentro de un marco que se desliza.

Relacionadas

Otras formas de responder «flujos y recorridos»

Guía para elegir: flujos y recorridos →