Diagrama aluvial

Cómo cambian los grupos entre varias etapas.

Definición

Un diagrama aluvial coloca los grupos de cada etapa en columnas y los une con cintas cuyo ancho es el volumen que pasa de un grupo a otro. Cada nodo conserva su total, así que un trasvase entre grupos no se confunde con un crecimiento. Se usa para seguir clientes entre segmentos, votantes entre elecciones o pacientes entre estados.

Editar con tus datos SVG Spec JSON

Datos: x · y · value · start · end
Buena para: Ver a dónde va cada grupo entre una etapa y la siguiente, y cuánto volumen cambia de manos.
Evítala cuando: Cuando hay muchos grupos por etapa y casi todos se cruzan con todos: las cintas se enredan y no se sigue ninguna.
Se lee bien: Entre 3 y 30 elementos; dibuja hasta 5000
Datos que faltan: Dibuja el valor ausente como cero.
Accesibilidad: Lector de pantalla: resumen en texto · respeta «reducir movimiento»

Forma de los datos

Qué columnas pide

Columna	Tipo	Para qué
`x` · opcional	string	Nodo ORIGEN de cada flujo. Sin él (o sin el destino) la pieza devuelve [] y cae a su demo.
`y` · opcional	string	Nodo DESTINO de cada flujo.
`value` · opcional	number	El grosor de la cinta. Si no está, todos los flujos valen 1 y el diagrama sólo cuenta transiciones.
`start` · opcional	string	Etapa del origen. Sin ella todo origen cae en una etapa genérica «Source» y el diagrama se vuelve bipartito.
`end` · opcional	string	Etapa del destino; su ausencia deja una sola etapa «Target».

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

¿Los grupos se repiten de una etapa a otra?

Si cada etapa tiene nodos propios y el flujo se ramifica y se junta, un Sankey es más flexible.

Sí: quédate con diagrama aluvial

No: usa Diagrama de Sankey

¿Importa a dónde va cada grupo, no solo su tamaño?

Si basta con ver cómo crece o encoge cada grupo con el tiempo, unas áreas apiladas lo cuentan sin cintas.

Sí: quédate con diagrama aluvial

No: usa Áreas apiladas

¿Las etapas son momentos sucesivos?

Si los flujos van y vienen entre los mismos grupos sin un orden de etapas, un diagrama de cuerdas los enseña en círculo.

Sí: quédate con diagrama aluvial

No: usa Diagrama de cuerdas

Código

La misma pieza, con tus datos

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

const spec = await getPreset('alluvial');
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

¿Qué pasa si no indico las etapas?

Todo origen cae en una etapa genérica de salida y todo destino en una de llegada, y el diagrama queda en dos columnas.

¿Y si no tengo volúmenes?

Cada flujo vale 1 y el diagrama solo cuenta transiciones, no volumen.

¿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 →