Generador de Diagrama de Cuerdas Espectral

Generador online gratuito de diagramas de cuerdas espectrales. Sube un CSV de tres columnas source,target,value y convierte una matriz de relaciones dos a dos en un anillo de color: los nodos se ordenan en sentido horario, del total mayor al menor, y cada arco toma su color de un degradado espectral continuo (rojo, naranja, amarillo, verde, turquesa, azul), de modo que el tono es el propio ranking: el nodo mayor es rojo y el menor tiende al azul. Cada relación se convierte en una línea fina turquesa de grosor constante que va del punto medio del segmento de arco de un nodo al del otro, se curva hacia el centro y teje una malla cuando la densidad es alta, con un anillo rosa translúcido anclando el centro. El ejemplo se carga al instante y se exporta a PNG / SVG de alta resolución.

Qué es un diagrama de cuerdas espectral

Un diagrama de cuerdas clásico codifica el volumen con el ancho de las cintas, lo que obliga a comparar grosores. Esta variante toma otro camino: entrega el orden al color y las relaciones a líneas finas. La longitud del arco sigue siendo proporcional al total de cada nodo, pero los colores no salen de una paleta repetida: se muestrean a lo largo de un degradado espectral continuo según el rango del nodo. El rango 1 cae en el rojo, el último en el azul, y todo lo intermedio pasa por naranja, amarillo, verde y turquesa. Por eso no hace falta leyenda: más rojo es más grande, más azul es más pequeño.

La segunda diferencia está en la forma de los enlaces. En lugar de cintas con ancho variable, cada relación es una línea uniforme de 2 px trazada desde el punto medio del segmento de arco de cada nodo, unida por una curva suave que se inclina hacia el centro. La ventaja aparece en redes densas: las cintas anchas se tapan entre sí hasta formar una mancha, mientras que las líneas finas tejen una malla cuyos trayectos siguen siendo rastreables. Puedes recorrer una línea de A hasta B y ver de un vistazo qué nodos actúan como eje.

Tres detalles completan el anillo. Dentro de cada arco, unos separadores blancos lo dividen según el valor de cada relación, así que su número equivale al de conexiones del nodo. Un pequeño punto negro marca el centro de cada arco. Y los nombres de los nodos se colocan fuera, orientados según la tangente, para no invadir la zona de dibujo.

Qué puedes hacer

• Subir tres columnas: source,target,value, una fila por relación, con value obligatoriamente positivo.
• Fusión simétrica automática: A→B y B→A se combinan en una sola relación bidireccional con los valores sumados, para no dibujar dos veces la misma conexión.
• Disposición horaria por ranking: los nodos se ordenan de mayor a menor total, con el mayor fijado a las doce.
• Muestreo espectral continuo: los colores se interpolan a lo largo del degradado según el índice del nodo, sin repeticiones.
• Enlaces finos uniformes: todas las relaciones comparten el mismo trazo turquesa de 2 px, legible incluso con alta densidad.
• Separadores blancos en los arcos: cada arco se divide según sus valores individuales; el número de celdas es el de conexiones.
• Anillo rosa central: un ancla visual translúcida que no contiene datos.
• El ejemplo es la plantilla: descarga la plantilla CSV y vuelve a subirla para obtener exactamente el gráfico mostrado.
• Modo claro / oscuro: el modo oscuro solo cambia el fondo y el contraste del texto.
• Exportación PNG / SVG: listo para informes, diapositivas, pósteres y paneles.
• Procesamiento local: todo se analiza y dibuja en el navegador, nunca se sube.

Cómo se usa

1. Al abrir la página el ejemplo por defecto ya está dibujado: 28 países formando una red densa tras fusionar 119 filas de flujo en relaciones bidireccionales.
2. Sube un CSV o descarga el formato con «Descargar plantilla CSV». Hasta 200 filas y ≤60 nodos.
3. Pasa el ratón por cualquier línea para ver «nodo ↔ nodo : valor». Sobre un arco verás su total.
4. Cambia entre claro y oscuro y descarga el PNG o el SVG.

Ejemplo de CSV:

source,target,value
USA,CHN,540
CHN,USA,520
USA,CAN,400
CAN,USA,420
DEU,NLD,200
NLD,DEU,220

Las dos primeras filas, USA,CHN,540 y CHN,USA,520, se fusionan en una relación USA ↔ CHN de valor 1060.

Dónde encaja

• Co-ocurrencia y co-palabras: matrices de co-ocurrencia de palabras clave, etiquetas o productos, para detectar clústeres y términos eje.
• Comercio y logística: volúmenes bidireccionales entre países o regiones, para ver qué nodos dominan y cuáles quedan en el borde.
• Citas y colaboración: citas de artículos o patentes y redes de coautoría, para localizar instituciones centrales y grupos.
• Llamadas y mensajes: recuentos de intercambio entre números o cuentas, para revelar ejes inusuales y estructuras en anillo.
• Redes ecológicas y biológicas: interacciones entre especies, entre proteínas, co-expresión génica.
• Flujos internos: tickets, aprobaciones o correos entre departamentos y equipos.
• Migración: flujos de entrada y salida entre ciudades, para leer la intensidad bidireccional.

Notas

La idea central es el color lleva el orden y las líneas finas llevan las relaciones: la longitud del arco sigue los totales, pero el color se muestrea de forma continua sobre un espectro, así que el tono se vuelve una escala de rango y desaparece una capa de lectura de leyenda; los enlaces renuncian al ancho para conservar trayectos rastreables en redes densas. Por eso encaja sobre todo con matrices de tamaño medio y bien conectadas (unas 10 a 60 nodos). Si necesitas comparar con precisión la fuerza de relaciones concretas y las diferencias de grosor te importan más, un diagrama de cuerdas clásico será mejor; si tus datos se dividen de forma natural entre un lado numeroso y pequeño y otro escaso y grande, usa el diagrama de cuerdas de flujo por grupo.

---

Última verificación: 2026-09-17

Cómo leer este gráfico

Empieza por el color: recorre el anillo en sentido horario desde el arco más rojo y el tono se desplazará poco a poco hacia el azul; ese degradado es la escala de ranking, así que el nodo más rojo tiene el total mayor y el más azul el menor, sin necesidad de leyenda. Mira luego la longitud del arco: la anchura angular de cada arco es proporcional a su total, y el arco rojo suele ser el más largo. Después, los separadores blancos: dividen el arco según cada relación, así que cuantos más haya, más conexiones tiene el nodo; el punto negro en el centro de cada arco marca el nodo. Por último, el interior: una línea turquesa es una relación bidireccional, con sus extremos en los puntos medios de dos segmentos de arcos distintos, curvandose hacia el centro antes de abrirse; superpuestas, revelan nodos eje (muchas líneas convergen) y nodos periféricos (solo una o dos). El anillo rosa del centro es solo un ancla visual.