Network Graph

Categoría Flujo

Qué es

Nodos (entidades) conectados por aristas (relaciones). Permite visualizar estructuras de red: quién está conectado con quién, clusters y nodos centrales.

Para qué sirve

Para visualizar relaciones entre entidades cuando la estructura de las conexiones es tan importante como los propios nodos.

Cómo leerlo

Anatomía

El layout de "resortes" (force-directed) que produce composiciones como esta simula un sistema físico: los nodos conectados se comportan como si estuvieran unidos por resortes que los atraen, y todos los nodos entre sí se repelen eléctricamente, como cargas del mismo signo. El nodo es la entidad del sistema —una persona, una página, un servidor— y la arista es la línea que conecta dos nodos entre los que existe una relación: por defecto no codifica una magnitud, salvo que el grafo esté explícitamente ponderado. Cuando el tamaño del nodo varía, casi siempre codifica su grado (cuántas aristas tiene) u otra medida de centralidad, nunca es decorativo. El resultado final no tiene ejes ni escala: la posición de cada nodo en el plano es el punto de equilibrio de ese sistema de fuerzas simulado, así que la distancia entre dos nodos es siempre aproximada, nunca una medida exacta de ninguna magnitud real.

Telaraña con gotas de rocío de distinto tamaño, una gota central actuando como nodo del que irradian varios hilos: la lógica de un network graph, donde el tamaño del nodo codifica su grado o centralidad

Por qué funciona

Fundamento perceptivo

Es el único tipo de gráfico que puede mostrar estructuras de red complejas. Los algoritmos de layout revelan clusters y nodos centrales automáticamente.

Errores comunes

'Bola de pelos' con muchos nodos

con muchos nodos y aristas se vuelve ilegible, así que filtra las aristas débiles, agrupa nodos en comunidades y usa interactividad.

Dónde se usa

Contextos de aplicación

Red de colaboración entre personas

Nodos y aristas: quién se conecta con quién y dónde están los puentes.

Dependencias entre componentes de software

Módulos como nodos; una arista por cada dependencia declarada.

Conexiones en una infraestructura

La topología completa de un sistema en un solo grafo.

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.

La red de tratados comerciales de Chile

Fuente: SUBREI, Acuerdos Comerciales Vigentes

Matplotlib License (estilo BSD)

La red de tratados de libre comercio vigentes de Chile, 8 principales socios/bloques (mismos datos que el ejemplo principal de esta ficha): SUBREI, Acuerdos Comerciales Vigentes. Es una red en estrella real (todos los socios se conectan solo con Chile, no entre sí), así que no hace falta una simulación de fuerzas para posicionarla —salvo en D3 y ECharts, que sí la usan de verdad (forceLink/forceManyBody y layout: "force" nativo respectivamente) para demostrar la técnica real, aplicable a redes con topología más compleja. Sin función de red propia: matplotlib se apoya en networkx para construir el grafo y calcular un layout de resortes (spring_layout, equivalente a d3-force).

import matplotlib.pyplot as plt
import networkx as nx

# Sin funcion de red propia: matplotlib se apoya en networkx (libreria
# dedicada de grafos, no de graficos) para construir el grafo y
# calcular un layout de resortes (spring_layout, equivalente a
# d3-force), y dibuja los nodos/enlaces resultantes.
G = nx.Graph(); G.add_nodes_from(claves); G.add_edges_from(enlaces)
pos = nx.spring_layout(G, seed=7)
nx.draw_networkx_edges(G, pos, ax=ax, edge_color="#D8CFC5")
for n in nodos:
    ax.scatter([pos[n["key"]][0]], [pos[n["key"]][1]], s=n["size"] ** 1.7, color=n["color"])
plt.show()

No disponible en estas librerías

ApexCharts

No tiene un tipo de red/grafo nativo ni una simulación de fuerzas propia, y tampoco expone una API de bajo nivel para dibujar nodos y enlaces con posiciones arbitrarias a mano.

Vega-Lite

No tiene un mark de red/grafo dedicado ni una simulación de fuerzas nativa —force-directed graphs son posibles en Vega (la librería completa), no en Vega-Lite.