Grafo de red
Actores y sus conexiones.
Definición
Un grafo de red dibuja personas, equipos u organizaciones como nodos y sus relaciones como enlaces. Se lee la forma del tejido: los racimos, los puentes entre grupos y los aislados. Sirve para mapas de colaboración, dependencias entre sistemas o relaciones entre actores.
- Datos
- source · target · weight
- Buena para
- Ver quién trata con quién: qué grupos se forman y quién los une.
- Evítala cuando
- Cuando importa cuánto vale cada nodo: ninguna marca codifica magnitud salvo, si se da, el grosor del enlace.
- Se lee bien
- Entre 3 y 50 elementos; dibuja hasta 2000
- Datos que faltan
- Se niega a dibujar y dice qué valor falta.
- Accesibilidad
- Lector de pantalla: resumen en texto · respeta «reducir movimiento»
Forma de los datos
Qué columnas pide
| Columna | Tipo | Para qué |
|---|---|---|
source · opcional | string | Nodo de origen del enlace. Sin ella (o sin destino) la pieza devuelve un grafo vacío. |
target · opcional | string | Nodo de destino. Los nodos NO se declaran: salen del conjunto de orígenes y destinos. |
weight · opcional | number | Grosor del enlace. La COLUMNA es opcional —sin ella todas las aristas valen 1 y el grosor no afirma nada—, pero si está, cada fila tiene que traer su número: una celda vacía se leía como 1, el término medio, y un peso legítimo de 0 también. |
Tamaños
Recompuesta, no encogida
El motor vuelve a componer la pieza a cada ancho: los rótulos conservan su cuerpo y la figura gana alto si lo necesita.
Cuándo usarla
Tres preguntas antes de elegirla
¿Son pocos nodos?
Si son tantos que los enlaces se enredan, una matriz de filas y columnas los ordena.
Sí: quédate con grafo de red
No: usa Matriz de adyacencia
¿Importa quién se relaciona con quién, y no cuánto fluye?
Si la pregunta es el volumen que se intercambia entre grupos, se dibujan cuerdas de grosor proporcional.
Sí: quédate con grafo de red
No: usa Diagrama de cuerdas
¿Las relaciones no siguen una jerarquía?
Si cada nodo depende de uno superior, se dibuja como un organigrama.
Sí: quédate con grafo de red
No: usa Organigrama
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('network');
spec.data.rows = misFilas; // tus columnas
const { svg, warnings } = await renderComposition(spec);También en React con Chart y prepareComposition. Guía para desarrolladores →
Dudas
¿Tengo que declarar los nodos?
No: salen de los orígenes y destinos de los enlaces.
¿Qué significa el grosor de los enlaces?
El peso, si traes esa columna; sin ella, todos valen lo mismo. Si la traes, cada fila tiene que llevar su número.
¿El tamaño o la posición del nodo significan algo?
No: la posición sólo busca que la forma del tejido se lea, y ningún nodo codifica magnitud.
¿Qué hace si faltan datos?
Se niega a dibujar y dice qué valor falta.
¿Cómo se ve en el móvil?
El motor la recompone a 360 px de ancho —rótulos, leyenda y alto— en vez de encoger la versión de escritorio.
Relacionadas
Otras formas de responder «cómo funciona algo»
- Matriz de adyacenciaquién se conecta con quién en una red
Diagrama de arcosconexiones entre nodos ordenados en una línea
Diagrama de pajaritacausas y consecuencias de un riesgo central
Columnas enfrentadascontrastar dos o más posturas
Rejilla con casilla vacíaver qué combinación falta
Diagrama de Ishikawacausas posibles de un problema por familias