Chord Diagram
Chord Diagram
Qué es
Nodos en un círculo conectados por cuerdas cuyo grosor indica la magnitud del flujo o relación entre pares. Muy visual para mostrar interdependencias.
Para qué sirve
Para mostrar relaciones bidireccionales entre categorías con magnitud, especialmente migraciones, flujos de comercio o matrices de interacción.
Cómo leerlo
Anatomía
El software que masificó el formato en la ciencia surgió de una necesidad puntual en genómica: visualizar reordenamientos estructurales entre genomas de tumores, detectados por alineamientos a regiones distantes del ADN, a fines de la década de 2000. El principio matemático detrás de las cuerdas en sí —arcos que conectan puntos en un círculo— es mucho más antiguo y pertenece a la geometría, no a la visualización de datos; lo que ese software aportó fue la convención de grosor proporcional al flujo y el layout circular como estándar de facto para relaciones muchos-a-muchos, a diferencia de un sankey, que fluye en una sola dirección entre etapas.
Por qué funciona
Fundamento perceptivo
Visualmente impactante. La disposición circular hace que todas las relaciones sean equidistantes, evitando jerarquías artificiales.
Errores comunes
Difícil con muchos nodos
es complicado de leer con más de 10-12, así que la interactividad (hover para destacar una relación) es casi obligatoria; sin ella, limita a 6-8 categorías.
Dónde se usa
Contextos de aplicación
Comercio bilateral entre regiones
Cada cuerda une dos regiones; su grosor es el volumen intercambiado.
Matriz origen-destino de viajes
Todos los pares origen-destino de una red de transporte en un círculo.
Flujos de migración entre países
Las cuerdas muestran de dónde a dónde se mueve la gente y en qué magnitud.
Cómo construirlo
El mismo gráfico, en 11 librerías open source
Cada librería resuelve las mismas decisiones de diseño, como la escala, el espaciado entre barras o la inserción de la etiqueta de valor, de un modo distinto. Algunas las automatizan; otras las dejan explícitas en el código, a criterio de quien lo escribe. Comparar once implementaciones con los mismos datos y el mismo color de marca aísla esa diferencia, que de otro modo queda oculta detrás de estilos visuales distintos.
Cómo se conecta Santiago con el resto de Chile por avión
Fuente: Junta de Aeronáutica Civil (JAC), Informe Mensual de Tráfico Aéreo
Pasajeros en las 7 principales rutas aéreas domésticas de Chile, junio 2025 (mismos datos que el ejemplo principal de esta ficha): JAC, Informe Mensual de Tráfico Aéreo. d3-chord calcula el layout circular (ángulos por grupo, cintas proporcionales) directo desde la matriz de flujo; ECharts y Chart.js reutilizan esa geometría tal cual (vía el elemento "path" de bajo nivel y Path2D respectivamente, ambos interpretan directo la sintaxis de un path SVG); las demás 3 aproximan cada cinta como un polígono de bordes rectos, sin la curva bézier real. Sin función de chord diagram nativa: PathPatch dibuja arcos y cintas a partir de los mismos datos de path que produce d3-chord, traducidos a un Path de matplotlib.
import matplotlib.pyplot as plt
import matplotlib.patches as mpatches
# Sin funcion de chord diagram nativa: PathPatch dibuja arcos y cintas
# a partir de los mismos datos de path que produce d3-chord, traducidos
# a un Path de matplotlib (los arcos SVG se aproximan como segmentos
# rectos cortos, matplotlib no tiene un codigo de curva equivalente).
for i, ribbon_path in enumerate(cintas):
ax.add_patch(mpatches.PathPatch(parse_svg_path(ribbon_path), facecolor=colores[i], alpha=0.55))
plt.show()No disponible en estas librerías
No tiene un tipo chord nativo, no soporta paths SVG crudos, y no tiene una API de bajo nivel accesible desde fuera para dibujar arcos o cintas a mano.
No tiene un mark chord ni soporte de paths SVG/Path2D crudos —esa capacidad de bajo nivel existe en Vega, no en Vega-Lite.
Herramientas para construirlo
No-code, desktop y plataformas web, con su licencia visible, abierta o comercial.
Términos relacionados
Con datos reales
Ejemplos de uso.
Gráficos relacionados
