Arc Diagram

Arc Diagram

Categoría Flujo

Qué es

Nodos alineados horizontalmente conectados por arcos curvados sobre la línea. El grosor del arco puede indicar la magnitud de la relación.

Para qué sirve

Para mostrar relaciones entre elementos con un orden natural o secuencial, cuando la linearidad del layout tiene significado (ej: orden temporal).

Cómo leerlo

Anatomía

Esta forma se introdujo formalmente como solución a un problema puntual: mostrar patrones de repetición dentro de una cadena de datos —texto, música o código— que los dotplots tradicionales no escalaban bien para representar. Un proyecto anterior ya había aplicado una versión temprana de la idea a partituras musicales completas, dibujando arcos traslúcidos para revelar, literalmente, la forma estructural de una composición de un vistazo —de la repetición simple de un estribillo pop a la arquitectura profunda de una fuga. Un arco conecta dos apariciones del mismo elemento, con su altura creciendo según la distancia entre ambas: patrones que se repiten seguido generan arcos bajos, los que se repiten lejos, arcos altos.

Arco de piedra natural, una curva que nace y termina en la misma base rocosa, recortada contra el cielo del atardecer: la forma pura de un arco, la unidad básica que un arc diagram repite una y otra vez para conectar pares de puntos sobre una línea

Por qué funciona

Fundamento perceptivo

El orden lineal de los nodos puede codificar tiempo o secuencia, lo que añade una dimensión que el Network Graph circular no tiene.

Errores comunes

  • Arcos difíciles de seguir

    los que cruzan muchos nodos intermedios cuestan de leer, así que ordena los nodos para minimizar cruces; no escala bien con más de 30 nodos.

Dónde se usa

Contextos de aplicación

Co-ocurrencia de términos en un texto
01

Co-ocurrencia de términos en un texto

Nodos en línea y arcos que unen los términos que aparecen juntos.

Colaboraciones con orden cronológico
02

Colaboraciones con orden cronológico

Al mantener los nodos en una recta ordenada, el tiempo queda legible.

Conexiones entre versiones de un sistema
03

Conexiones entre versiones de un sistema

Arcos entre versiones que comparten componentes o correcciones.

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.

Nueve mandatos presidenciales de Chile, conectados por coalición

Fuente: Biblioteca del Congreso Nacional de Chile

Matplotlib License (estilo BSD)
Matplotlib: gráfico de barras

Los 9 mandatos presidenciales de Chile desde 1990, en orden cronológico, con arcos que conectan cada mandato con el más reciente anterior de su misma coalición (mismos datos que el ejemplo principal de esta ficha): Biblioteca del Congreso Nacional de Chile. Ninguna librería trae un tipo "arc diagram" dedicado —algunas sí tienen un glifo de arco de bajo nivel (matplotlib.patches.Arc, el elemento gráfico "arc" de ECharts, el glifo arc() de Bokeh); las demás muestrean puntos sobre la semicircunferencia a mano. matplotlib.patches.Arc dibuja el arco directo con centro, ancho, alto y ángulos, sin necesitar muestrear puntos a mano.

import matplotlib.pyplot as plt
import matplotlib.patches as mpatches

# Sin tipo "arc diagram" nativo, pero SI trae matplotlib.patches.Arc de
# bajo nivel -- dibuja el arco directo con centro, ancho, alto y
# angulos, sin necesitar muestrear puntos a mano.
for l in enlaces:
    r = x2 - x1
    ax.add_patch(mpatches.Arc(((x1 + x2) / 2, 0), r, r, theta1=0, theta2=180, color=color, linewidth=1.6))
plt.show()

No disponible en esta librería

ApexCharts

No tiene un tipo arc-diagram nativo ni una API de bajo nivel accesible desde fuera (ni un glifo de arco, ni renderItem) para dibujar arcos abiertos a mano.

Herramientas para construirlo

No-code, desktop y plataformas web, con su licencia visible, abierta o comercial.

No-code
Observable Freemium
JavaScript
D3.js Open Source
Desktop
Gephi Open SourceCytoscape Open Source

Con datos reales

Ejemplos de uso.

Gráficos relacionados

Variantes y alternativas cercanas.