19 min de lectura GuíasDataviz

Diagramas de cuerdas profesionales sin escribir código: guía práctica completa

Los diagramas de cuerdas responden bien a una pregunta: quién fluye hacia quién y cuánto. Esta guía explica qué pueden y qué no pueden hacer, cómo leerlos, y luego asocia nueve variantes (clásico, festoneado, degradado de dos bandos, burbujas, semianillo bipartito, doble sector con escala, colinealidad Circos, flujo por grupo, líneas finas espectrales) con las estructuras de datos que les corresponden, con esquemas CSV y tabla de elección.

Diagramas de cuerdas profesionales sin escribir código: guía práctica completa

Un diagrama de cuerdas no es de esos gráficos que impresionan sin decir nada. Responde a una pregunta concreta: quién fluye hacia quién y cuánto. La pregunta parece simple, pero el gráfico equivocado nunca la responde bien — las barras comparan una sola medida, las líneas están hechas para la evolución en el tiempo, y una relación «categoría × categoría» queda turbia en ambos casos.

Esta guía tiene dos partes. Primero, qué puede y qué no puede hacer un diagrama de cuerdas, y cómo leerlo correctamente. Después, nueve variantes habituales asociadas a las estructuras de datos que realmente les corresponden. Cada variante incluye un gráfico generado de verdad y un ejemplo CSV que puedes copiar tal cual.

1. Qué resuelve realmente un diagrama de cuerdas

Cuando tus datos forman una relación de muchos a muchos — comercio entre países, frecuencia de colaboración entre departamentos, co-expresión entre genes — las barras y las líneas se quedan cortas. La estructura básica de un diagrama de cuerdas se describe en una frase: cada categoría ocupa un arco sobre un círculo, la longitud del arco es proporcional al flujo total de esa categoría, y las líneas que conectan las categorías — las cuerdas — codifican la magnitud por pares mediante su grosor.

En términos de gramática gráfica es una variante del diagrama de arcos: los nodos se disponen radialmente sobre la circunferencia y se enlazan con arcos ponderados. Esa disposición expresa un gran número de relaciones manteniendo baja la complejidad visual, en lugar de acabar en una maraña como la de un grafo dirigido por fuerzas o una red totalmente conectada.

Encaja aproximadamente en estas situaciones:

  • Comercio y migración: importaciones y exportaciones entre países, movimientos entre ciudades
  • Social y difusión: intensidad de interacción entre cuentas, rutas de propagación de información
  • Bioinformática: co-expresión génica, interacciones proteicas, interacciones entre especies
  • Análisis organizativo: frecuencia de colaboración entre departamentos, flujos de tickets y aprobaciones
  • Co-ocurrencia textual: redes de co-ocurrencia de palabras clave, mapas de coautoría

Sus límites importan igual. Un diagrama de cuerdas renuncia a la comparación precisa: por el grosor de una cuerda no distinguirás con fiabilidad 42 de 38, una diferencia que un gráfico de barras muestra al instante. Si tu objetivo es comparar valores individuales, las barras o un gráfico de puntos te servirán mejor. Lo que un diagrama de cuerdas hace mejor que nada es hacer visible la estructura de conjunto de un vistazo: quién es el eje, quién queda en el borde, si dos bandos están muy o poco ligados.

También hay un techo. Más allá de unos 60 nodos y unos cientos de relaciones, cualquier diagrama de cuerdas empieza a emborronarse. No es culpa de ninguna herramienta: la superficie útil cerca del centro es simplemente limitada. Las variantes cuarta y novena de abajo tratan la alta densidad de dos maneras distintas.

2. Aprende a leerlo primero

Dos minutos dedicados a la lectura deciden si eliges bien la plantilla.

  1. Lee la longitud de los arcos, no su posición. La longitud de un arco solo codifica el total de ese nodo. Dónde empieza el círculo y si va en sentido horario o antihorario no aporta información — las herramientas difieren en esto y no cambia ninguna conclusión.
  2. Lee el grosor de las cuerdas. Codifica la magnitud por pares. Una cuerda ancha indica una relación fuerte.
  3. Lee el color de las cuerdas. Suele responder a «de quién es esta cuerda»: la mayoría de las implementaciones tiñen la cuerda con el color de su nodo de origen, así que un grupo de un mismo color indica que ese nodo es un emisor principal.
  4. Lee las marcas y separadores dentro de los arcos. Algunas variantes trazan marcas crecientes desde 0: es el flujo acumulado del nodo. Otras trazan finas líneas blancas: son las fronteras que quedan al dividir el arco relación por relación, y su número equivale al de conexiones del nodo.

Con esas cuatro lecturas obtienes tres niveles de conclusiones: la distribución global de volúmenes (longitud de arco), los vínculos fuertes locales (grosor de cuerda) y los roles estructurales (agrupación de color y división interna del arco).

3. Antes de empezar: la convención de tres columnas

Casi todas las herramientas de diagramas de cuerdas en línea consumen la misma forma de datos: un CSV de tres columnas, con origen, destino y valor.

source,target,value
USA,China,580
USA,Germany,320
China,Germany,210
Japan,China,180

Algunas trampas que conviene evitar de entrada:

  • La fila de encabezado. La forma convencional es source,target,value en la primera línea. Casi todas las herramientas la reconocen y la saltan, pero si tu encabezado está en tu idioma («Desde,Hacia,Número»), la detección puede fallar y el gráfico gana un nodo llamado literalmente «Desde». Ante la duda, borra el encabezado.
  • La codificación. Excel guarda a menudo el CSV en una codificación local heredada; un navegador que lo lee como UTF-8 convierte entonces las etiquetas no ASCII en caracteres rotos. Dos soluciones: volver a guardarlo como UTF-8 desde un editor de texto plano, o mantener las etiquetas del CSV en ASCII puro y editar el texto después de exportar. Todos los ejemplos de este artículo usan etiquetas ASCII para que puedas copiarlos y obtener un gráfico de inmediato.
  • Valores positivos obligatorios. Las filas con valor cero o negativo se rechazan como entrada no válida.
  • Los bucles. Una fila en la que origen y destino coinciden (A,A,10) se ignora en la mayoría de implementaciones, porque no puede dibujar una cuerda con sentido.
  • Los pares bidireccionales. El tratamiento de A→B y B→A varía: algunas herramientas dibujan dos curvas distintas, otras las fusionan en una sumando los valores. Consulta la nota de la herramienta antes de empezar, o puedes contar dos veces.

4. Nueve variantes, asociadas a tu estructura de datos

Las nueve variantes de abajo apuntan a estructuras y objetivos de lectura distintos. Cada una incluye un gráfico generado de verdad (los datos mostrados son los del ejemplo por defecto de la herramienta) y un ejemplo CSV directamente copiable.

Variante 1: cuerdas circulares clásicas — el punto de partida más general

Encaja con: tres columnas source,target,value, con categorías de igual rango. Comercio entre países, registros de llamadas y redes de citas pertenecen aquí. Si dudas qué plantilla usar, empieza por esta.

Datos: tres columnas, hasta 200 filas y 60 nodos.

Lectura: arcos exteriores coloreados rodean el círculo, con longitud igual al total de cada nodo; una escala numérica recorre el interior de cada arco desde 0 hasta el total de ese nodo; unas cintas translúcidas cruzan el centro, más anchas cuanto mayor es el flujo.

Uso: suelta un CSV y el gráfico aparece — la página incluye un ejemplo de flujos multirregión, así que hay algo que mirar de inmediato. Tres temas de color, lienzos claro y oscuro, y el modo oscuro ajusta la opacidad de las cintas para que el tejido no se convierta en una mancha sobre fondo oscuro.

Diagrama de cuerdas circular clásico: arcos exteriores coloreados con marcas numéricas y cintas translúcidas
Diagrama de cuerdas circular: las marcas dentro del arco son el flujo acumulado; el ancho de la cinta es el flujo por pares
source,target,value
West Asia,Africa,8
Africa,Europe,9
East Asia,Europe,8
Europe,North Ame.,12
Latin Ame.,Europe,6

Herramienta: generador de diagramas de cuerdas en línea

Variante 2: cuerdas festoneadas — cuando un lado multiplica al otro por diez

Encaja con: la forma clásica de citas bipartitas, del tipo «8 empresas → 78 tecnologías» o «unas pocas instituciones → muchísimas etiquetas temáticas». Un diagrama clásico lo lleva mal: el lado pequeño recibe arcos desproporcionados y las etiquetas del lado grande se apilan en una masa ilegible.

Datos: tres columnas source,target,value. source son los grupos de abajo (≤12), target los nodos de arriba (≤120), hasta 300 filas — un límite más holgado que en las demás variantes, precisamente para absorber la relación pocos-a-muchos.

Lectura: el círculo se corta en dos sectores. Cerca de un tercio de la circunferencia abajo lleva los grupos, ponderados por flujo y rellenos con colores francos; cerca de dos tercios arriba llevan los muchos nodos a anchura igual, que es lo que mantiene legibles sus etiquetas. Unas cintas finas rodean el centro para unir ambos lados, formando el abanico festoneado. Las etiquetas irradian hacia fuera sin enredarse.

Diagrama de cuerdas festoneadas: arcos de grupo ponderados abajo, arcos de nodo a anchura igual arriba, cintas finas por el centro
Cuerdas festoneadas: arcos de grupo ponderados abajo y arcos de nodo a anchura igual arriba para conservar las etiquetas
source,target,value
CompanyA,Patent-101,3
CompanyA,Patent-118,2
CompanyB,Patent-101,4
CompanyB,Patent-127,3
CompanyC,Patent-118,2

Herramienta: generador de cuerdas festoneadas

Variante 3: cuerdas con degradado de dos bandos — cuando los nodos forman bandos

Encaja con: nodos que se reparten de forma natural en dos bandos opuestos o emparejados — proveedores aguas arriba frente a clientes aguas abajo, usuarios del competidor A frente a los del competidor B, tratamiento frente a control. Un color único oculta esa división; esta variante reúne cada bando en un arco continuo y dibuja los enlaces entre bandos como cintas que degradan del extremo cálido al frío, de modo que la dirección del flujo se lee en el propio color.

Datos: source,target,value,group. La cuarta columna es opcional — warm o cold asigna un bando; si se omite, los nodos se reparten por igual. Hasta 200 filas.

Lectura: una disposición de estilo Circos gira las etiquetas con el círculo y deja el centro libre para la estética anular clásica. El relleno de cada enlace degrada del color del nodo origen al del nodo destino, y la superposición translúcida da cuerpo a las cintas. Al pasar el ratón, todo lo ajeno a la relación se atenúa.

Diagrama de cuerdas con degradado de dos bandos: cada bando forma un arco continuo y los enlaces entre bandos degradan de cálido a frío
Cuerdas con degradado: el color del enlace pasa del origen al destino y hace legible la dirección
source,target,value,group
UpstreamA,DownstreamX,42,warm
UpstreamB,DownstreamY,31,cold
UpstreamA,DownstreamY,24,warm
UpstreamC,DownstreamX,18,cold

Herramienta: generador de cuerdas con degradado Circos

Variante 4: cuerdas con burbujas — cuando los nodos traen sus propias métricas

Encaja con: participantes cuyo papel no es solo «con quién me relaciono», sino también su tamaño y su calidad. Las redes de colaboración bibliométricas son el caso de manual: un país es a la vez nodo de colaboración y portador de un número de publicaciones y una puntuación de impacto. En una cadena de suministro, un proveedor tiene relaciones de suministro, pero también capacidad y valoración de calidad.

Datos: dos secciones CSV separadas por una línea en blanco. Primero los enlaces, source,target,value (hasta 120 filas); después las métricas de nodo, name,size,color — opcionales, y todo nodo omitido recae en su flujo total.

Lectura: los nodos pasan a ser burbujas fuera del círculo. El diámetro lleva la primera métrica (size), el color de relleno recorre un degradado de turquesa a azul para la segunda (color) y el grosor de la cuerda lleva la fuerza de la relación (value). Como el círculo no codifica nada, incluso con 30 nodos las etiquetas irradian sin colisionar.

Diagrama de cuerdas con burbujas: nodos como burbujas fuera del círculo, diámetro para escala, color para calidad, grosor para fuerza del vínculo
Cuerdas con burbujas: leer «quién está fuertemente ligado» y «quién importa más» en un solo gráfico
source,target,value
USA,China,210
China,Germany,150
USA,Germany,95

name,size,color
USA,85,92
China,78,88
Germany,45,73

Herramienta: generador de cuerdas con burbujas

Variante 5: semianillo bipartito bicolor — cuando la dirección debe ser explícita

Encaja con: orígenes y destinos con identidades realmente distintas, donde «quién apunta a quién» debe ser evidente. Modelado de amenazas (superficie de ataque → tipo de riesgo), trazabilidad de requisitos (requisito → caso de prueba) y mapas de capacidades (capacidad → objetivo) son típicos.

Datos: source,target,value, con nombres de origen y destino disjuntos — una relación estrictamente bipartita. Hasta 120 filas.

Lectura: un diámetro horizontal corta el círculo en dos semianillos. El superior lleva todos los nodos de origen en una misma familia de color; el inferior lleva todos los destinos en otra, de modo que ambos roles se separan de un vistazo. Cada relación es una curva de Bézier que sale del borde interno de un sector de origen, cruza el centro y aterriza en un sector de destino, con una pequeña flecha que indica la dirección. La anchura de los sectores se pondera por el flujo total y las etiquetas siguen la tangente del anillo.

Semianillo bipartito bicolor: orígenes en la mitad superior, destinos en la inferior, flechas que marcan la dirección
Semianillo bicolor: las dos mitades separan los roles y las flechas marcan la dirección del flujo
source,target,value
Security,Data Breach,6
Security,Account Takeover,4
Reliability,Downtime,5
Scalability,Bottleneck,3
Compliance,Fine,2

Herramienta: generador de semianillo bicolor

Variante 6: doble sector graduado — datos bipartitos que hay que leer en cifras

Encaja con: relaciones bipartitas donde quieres números reales — recorrido de canales, reparto de costes, cobertura de requisitos. La diferencia con la variante 5 es que aquí cada sector lleva su propia escala desde 0, con marcas principales cada 10 unidades: leer un valor ya no exige adivinar.

Datos: source,target,value, con conjuntos de origen y destino disjuntos, hasta 120 filas y 8 nodos por lado.

Lectura: la silueta recuerda a un reloj de arena. Un sector a las doce lleva los orígenes en colores saturados; otro a las seis lleva los destinos en tonos más claros de las mismas familias, con aberturas a los lados. Unas cintas translúcidas de color atraviesan la cintura del centro, y su densidad es la distribución del flujo.

Diagrama de cuerdas de doble sector: disposición en reloj de arena con un eje graduado en cada sector
Cuerdas de doble sector: un reloj de arena de dos sectores, cada uno con su eje graduado
source,target,value
ChannelA,ProductLine1,45
ChannelA,ProductLine2,30
ChannelB,ProductLine1,22
ChannelB,ProductLine2,18
ChannelC,ProductLine1,12

Herramienta: generador de cuerdas de doble sector

Variante 7: cuerdas de colinealidad Circos — cuando la posición importa más que la magnitud

Encaja con: es la única variante que no trata los nodos como categorías discretas. Maneja correspondencias de intervalo a intervalo: colinealidad genómica (qué tramo de cromosoma corresponde a cuál), migración de bloques de disco (qué bloques fueron a dónde), reasignación de rangos de direcciones, reorganización de lotes de pedidos, comparación de profundidades estratigráficas.

Datos: un CSV de siete columnas — source_group, source_start, source_end, target_group, target_start, target_end, color, hasta 240 filas. Una fila no es una arista ponderada; es una correspondencia de intervalo completa.

Lectura: cada tramo del anillo no es un nodo discreto sino una pista continua, con marcas de coordenadas desde 0. Unas curvas finas en el centro proyectan un intervalo de una pista de origen sobre un intervalo de una pista de destino. Cuantos más cruces, más se ha permutado, reorganizado o dispersado el orden de los intervalos — y esa es precisamente la señal que busca el análisis de colinealidad.

Diagrama de cuerdas de colinealidad Circos: pistas continuas con marcas de coordenadas y curvas finas de correspondencia entre intervalos
Colinealidad Circos: marcas de coordenadas sobre pistas continuas y líneas de correspondencia intervalo a intervalo
source_group,source_start,source_end,target_group,target_start,target_end,color
AtChr1,0,1500,Sca1,200,1800,blue
AtChr2,0,900,ApChr1,500,1400,orange
AtChr1,1500,2600,Sca2,0,1100,blue

Herramienta: generador de cuerdas de colinealidad Circos

Variante 8: cuerdas de flujo por grupo — la estructura «muchos hacia pocos»

Encaja con: clasificación de muestras, atribución de canales, asignación de palabras clave a temas, destino de lotes. Estos datos son naturalmente bipartitos — un lado numeroso y pequeño, el otro escaso y grande.

Datos: source,target,value, con ≤24 orígenes y ≤12 grupos, los dos conjuntos de nombres disjuntos, hasta 200 filas.

Lectura: el anillo se parte en dos semicírculos. El izquierdo lleva los orígenes en un color uniforme; el derecho lleva los grupos, uno por color, con una leyenda vertical que corresponde. Dentro de cada arco de grupo, unos separadores blancos lo dividen en celdas según la aportación de cada origen — el número de celdas es el número de orígenes que componen ese grupo. Para saber de dónde viene el contenido del grupo A, mira hacia dentro desde su arco: todas las cintas que apuntan a él comparten color, y la composición es inmediata.

Diagrama de cuerdas de flujo por grupo: arcos de origen a la izquierda en un color, arcos de grupo a la derecha con separadores blancos
Flujo por grupo: los separadores blancos dentro de un arco de grupo lo dividen en celdas, una por origen contribuyente
source,target,value
kw-A,Topic1,15
kw-B,Topic1,8
kw-C,Topic2,12
kw-D,Topic1,6
kw-E,Topic2,9

Herramienta: generador de cuerdas de flujo por grupo

Variante 9: cuerdas espectrales de línea fina — una red rastreable en alta densidad

Encaja con: matrices densas, con decenas de nodos y cientos de relaciones. Las cintas anchas de un diagrama clásico se tapan entre sí hasta formar un bloque sólido, y no puedes seguir una cinta hasta sus dos extremos. Esta variante lo resuelve con dos decisiones: el color es el rango y las líneas finas siguen siendo rastreables.

Datos: source,target,value, ≤60 nodos, hasta 200 filas. A→B y B→A se fusionan en una sola relación bidireccional con los valores sumados.

Lectura: los nodos se ordenan en sentido horario por total, de mayor a menor, y los colores de arco se muestrean a lo largo de un degradado espectral continuo (rojo, naranja, amarillo, verde, turquesa, azul). El nodo más rojo es el mayor y el más azul el menor — el tono es la propia escala de rango, sin leyenda. Cada relación es una línea fina uniforme que va del punto medio de un segmento de arco al de otro, curvandose hacia el centro y cruzándose; a alta densidad tejen una malla que se puede seguir de verdad. Un anillo rosa translúcido ancla el centro y un pequeño punto negro marca cada arco.

Diagrama de cuerdas espectral de línea fina: color de arco degradado según el rango, enlaces finos uniformes y un anillo rosa en el centro
Cuerdas espectrales de línea fina: el tono es el rango (el más rojo es el mayor) y las líneas finas mantienen rastreable una red densa
source,target,value
PaperA,PaperB,8
PaperA,PaperC,3
PaperB,PaperC,5
PaperC,PaperD,12
PaperA,PaperD,3

Herramienta: generador de cuerdas espectrales de línea fina

5. Tabla de elección rápida

Tu estructura de datosVariante recomendadaPor qué
source,target,value simple, categorías de igual rangoVariante 1, cuerdas circulares clásicasSin estructura especial; parte de los valores por defecto
Un lado minúsculo y el otro enormeVariante 2, cuerdas festoneadasPor ejemplo «8 empresas → 78 tecnologías»
Nodos repartidos en dos bandosVariante 3, cuerdas con degradado de dos bandosCuando la frontera entre bandos debe destacar
Nodos con métricas de escala o calidadVariante 4, cuerdas con burbujasPara leer «quién está fuertemente ligado» y «quién importa» a la vez
Roles de origen y destino distintos, la dirección importaVariante 5, semianillo bicolorModelado de amenazas, trazabilidad de requisitos
Datos bipartitos que hay que leer en valoresVariante 6, doble sector graduadoCada sector lleva su propio eje graduado
Correspondencia de intervalo a intervaloVariante 7, colinealidad CircosGenomas, reasignación de direcciones, reorganización de lotes
Muchos orígenes hacia pocos gruposVariante 8, flujo por grupoAtribución, clasificación, asignación temática
Muchos nodos (>30) y muchos enlaces (>80)Variante 9, cuerdas espectrales finasHace falta una red rastreable, no un bloque de color

La lógica es juzgar primero la estructura de datos y después el objetivo visual. Si tus datos son un simple source,target,value con menos de 20 categorías, la variante 1 es siempre la elección segura. Cambia a una variante especializada solo cuando la plantilla por defecto choque con un límite: etiquetas que se pisan, bandos invisibles, dirección ambigua, valores ilegibles.

6. Cuatro detalles que dan aspecto profesional

  1. Elige el formato de exportación según el destino. El PNG a 2× va bien para diapositivas, informes y redes sociales; el SVG es vectorial, así que encaja en la maquetación de un artículo y en retoques posteriores de color o cuerpo de texto en Illustrator o Inkscape.
  2. Claro u oscuro es una cuestión de difusión, no de gusto. Un fondo oscuro se lee mejor en proyector y en informes con tema oscuro; un fondo claro es más seguro para impresión y web. Vuelve a exportar tras cambiar — la vista previa y la exportación usan la misma paleta, así que lo que ves es lo que obtienes.
  3. La densidad de etiquetas fija el techo de legibilidad. Más allá de unos 30 nodos, no esperes que cada nombre siga siendo legible. Pasa a una variante con estrategia de degradación incorporada (variantes 8 y 9) o reduce el número de nodos.
  4. Exporta desde el lienzo, no con una captura de pantalla. El botón de exportación escribe solo el gráfico; una captura del sistema arrastra el marco de la interfaz, el zoom del navegador y artefactos de compresión.

Las nueve implementaciones mencionadas comparten un mismo modo de uso: abrir la página, subir un CSV, alternar claro u oscuro, exportar una imagen. Los datos se analizan y se dibujan en el navegador, nunca se suben a un servidor, y no hace falta cuenta; las exportaciones no llevan marca de agua.

7. Para cerrar

El valor de un diagrama de cuerdas es hacer legible de un vistazo una relación de muchos a muchos. El verdadero obstáculo rara vez es el dibujo: son dos juicios — a qué clase de estructura pertenecen tus datos y qué significa cada canal visual del gráfico. Con eso resuelto, lo demás es subir un CSV.

Las nueve variantes de arriba cubren la gran mayoría de las formas de datos relacionales. Si ninguna encaja del todo, normalmente significa que la pregunta pide un gráfico de barras o un grafo de red en lugar de un diagrama de cuerdas — una conclusión que también conviene conocer pronto.