Hive plot

Redes ordenadas en ejes por tipo de nodo.

Definición

Un hive plot coloca los nodos de una red en dos o tres ejes radiales según su tipo, y a lo largo de cada eje según el valor de un atributo; los vínculos se dibujan como curvas entre ejes. Como la posición de cada nodo sale de los datos y no de una simulación, dos versiones de la misma red se pueden comparar. Sirve para redes con capas: sistemas, cadenas de datos, organizaciones.

Editar con tus datos SVG Spec JSON

El dato llega fresco y se enfría en la cocina

Datos: source · target · sourceGroup · targetGroup · sourceValue · targetValue
Buena para: Ver entre qué tipos de nodo se concentran las conexiones y a qué altura de cada eje.
Evítala cuando: Cuando lo que importa es cuánto pasa por cada vínculo: aquí un vínculo no tiene grosor.
Se lee bien: Entre 4 y 18 elementos; dibuja hasta 60
Datos que faltan: Se niega a dibujar y dice qué valor falta.
Accesibilidad: Lector de pantalla: tabla de datos · respeta «reducir movimiento»

Forma de los datos

Qué columnas pide

Columna	Tipo	Para qué
`source`	string	El nodo del que sale el vínculo. Una fila por vínculo.
`target`	string	El nodo al que llega el vínculo.
`sourceGroup`	string	La capa del nodo de origen: es lo que decide en qué EJE se dibuja. Los valores distintos de esta columna y de su gemela de destino son los ejes, en el orden en que aparecen; tienen que ser dos o tres.
`targetGroup`	string	La capa del nodo de destino. Mismo vocabulario que `sourceGroup`.
`sourceValue`	number	El atributo que coloca al nodo de origen a lo largo de su eje: la segunda coordenada de la forma. El mismo nodo tiene que traer siempre el mismo valor.
`targetValue`	number	El atributo del nodo de destino. Misma unidad que `sourceValue`.

Tamaños

Ancha por necesidad

Esta pieza necesita anchura para que cada rótulo quepa entero. El motor prefiere decirlo a apretarla.

A menos de 480 px el motor se niega y explica por qué: hive-plot: «Tienda online» y «CRM comercial» se pisan con un radio de 111 px y 14 nodos rotulados. Sube dimensions a al menos 1055×937 px. La otra salida declar. En el móvil se ve la versión ancha, a tamaño legible y sin recortar, dentro de un marco que se desliza.

Cuándo usarla

Tres preguntas antes de elegirla

¿Basta con saber qué se conecta con qué, sin cuánto pasa por cada vínculo?

Si cada vínculo lleva un caudal y ese caudal es el argumento, el diagrama de cuerdas lo dibuja con el grosor.

Sí: quédate con hive plot

No: usa Diagrama de cuerdas

¿Los nodos se reparten en dos o tres tipos claros?

Si no hay capas que separen los nodos, una red libre enseña mejor los grupos que se forman solos.

Sí: quédate con hive plot

No: usa Grafo de red

¿Son pocos vínculos, menos de una veintena?

Con muchos vínculos las curvas se cruzan sin remedio; una matriz pone cada par en su casilla sin cruces.

Sí: quédate con hive plot

No: usa Matriz de adyacencia

Código

La misma pieza, con tus datos

import { getPreset, renderComposition } from 'visx-render/node';

const spec = await getPreset('hive-plot');
spec.data.rows = misFilas; // source, target, sourceGroup, targetGroup, sourceValue, targetValue
const { svg, warnings } = await renderComposition(spec);

También en React con Chart y prepareComposition. Guía para desarrolladores →

Dudas

¿Qué significa la posición de un nodo?

El eje en que cae dice qué papel juega —su tipo— y la distancia al centro dice cuánto vale un atributo suyo. Por eso el mismo nodo tiene que traer siempre el mismo valor.

¿Por qué no cambia el dibujo de una vez a otra?

Porque no hay simulación: la posición la deciden los datos. Dos láminas hechas en momentos distintos se pueden poner una al lado de la otra y comparar.

¿Cuántos ejes admite?

Dos o tres, uno por cada tipo de nodo, en el orden en que aparecen en la tabla. La tabla lleva una fila por vínculo con el grupo y el valor de cada extremo.

¿Qué hace si faltan datos?

Se niega a dibujar y dice qué valor falta.

¿Cómo se ve en el móvil?

A menos de 480 px el motor no la compone sin pisar o cortar rótulos, y lo dice. En el móvil se ve la versión ancha, a tamaño legible, dentro de un marco que se desliza.

Relacionadas

Otras formas de responder «cómo funciona algo»

Guía para elegir: cómo funciona algo →