Diagrama de cuerdas
Flujos entre grupos en un círculo.
Definición
Un diagrama de cuerdas coloca las entidades alrededor de un círculo, cada una con un arco, y las une con cintas cuyo grosor indica lo que se intercambia entre cada par. El arco de cada entidad mide todo lo que pasa por ella. Se usa para traspasos entre departamentos, migraciones entre regiones o cambios de proveedor entre clientes.
- Datos
- x · y · value
- Buena para
- Ver qué pares concentran el intercambio y cuánto pesa cada entidad en el total.
- Evítala cuando
- Cuando hay que leer cifras exactas de cada par: las cintas se comparan en proporción, no como cifra.
- 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 | Entidad de ORIGEN. Las entidades salen de la unión de origen y destino, en orden de aparición. |
y · opcional | string | Entidad de DESTINO. |
value · opcional | number | El grosor de la cinta. Sin la columna TODA la matriz vale 0 (data.ts:98) y el diagrama sale vacío sin decirlo. |
Tamaños
Recompuesta, no encogida
El motor vuelve a componer la pieza a cada ancho: los rótulos conservan su cuerpo y la figura gana alto si lo necesita.
Cuándo usarla
Tres preguntas antes de elegirla
¿El intercambio va en las dos direcciones?
Si el flujo avanza en un solo sentido, de unas etapas a otras, un Sankey lo ordena de izquierda a derecha.
Sí: quédate con diagrama de cuerdas
No: usa Diagrama de Sankey
¿Importa el reparto más que la cifra de cada par?
Si hay que leer el valor de cada par, una matriz de adyacencia lo pone en su celda.
Sí: quédate con diagrama de cuerdas
No: usa Matriz de adyacencia
¿Son pocas entidades?
Con muchas entidades las cintas se enredan; un grafo de red las coloca por sus conexiones.
Sí: quédate con diagrama de cuerdas
No: usa Grafo de red
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('chord');
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é mide el arco de cada entidad?
Todo lo que la atraviesa, en ambas direcciones. La cinta mide sólo lo que se intercambia ese par.
¿Qué columnas necesita?
Origen, destino y valor. Las entidades salen de la unión de orígenes y destinos, en el orden en que aparecen.
¿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?
El motor la recompone a 360 px de ancho —rótulos, leyenda y alto— en vez de encoger la versión de escritorio.
Relacionadas
Otras formas de responder «flujos y recorridos»
Mapa de conexionesenlaces entre lugares sobre el territorio
Cronograma de operaciónfases y fechas de una transacción
Mapa de flujosmovimientos entre lugares y su volumen
Embudo de conversióncuánto se pierde en cada etapa
Diagrama de Gantttareas y plazos de un proyecto
Embudo de varios pasosabandono a lo largo de un proceso largo