Diagrama de espagueti

Recorridos reales en un espacio.

Definición

Un diagrama de espagueti dibuja sobre la planta de un espacio el recorrido que hace una persona o un objeto, uniendo los puestos en el orden en que los visita. Cuanto más enredado y largo es el trazo, más metros se andan. Se usa en mejora de procesos para ver cuánto camino sobra en un almacén, una planta o un hospital.

Editar con tus datos SVG Spec JSON

Datos: series · order · label · x · y · group
Buena para: Enseñar que los metros recorridos dependen del orden de las visitas y comparar recorridos sobre el mismo suelo.
Evítala cuando: Cuando lo que importa es cuánto tarda cada paso o cuánto se espera: aquí no hay reloj.
Se lee bien: Entre 6 y 160 elementos; dibuja hasta 9000
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é
`series`	string	El recorrido al que pertenece cada parada: quién anda, o qué se mueve. Un color por recorrido, en el orden de primera aparición en la tabla. Con un solo recorrido, escribe igualmente su nombre en todas las filas.
`order`	number	El paso dentro del recorrido (1, 2, 3…). Es lo que ORDENA el trazo: el orden de las filas no vale, porque un CSV se reordena sin que nadie lo note y el mismo dato daría otro recorrido y otros metros. Dos paradas del mismo recorrido con el mismo paso hacen fallar la pieza.
`label`	string	El nombre del puesto. Un mismo nombre visitado varias veces es UN punto en la planta y varias paradas del recorrido.
`x`	number	La coordenada X del puesto sobre la planta, en unidades de suelo. La UNIDAD se lee del nombre de la columna («X (m)» → metros) y es la que rotula la barra de escala; sin marca en el nombre se rotula «u».
`y`	number	La coordenada Y del puesto, en LA MISMA unidad que X. Los dos ejes comparten una sola escala: mezclar unidades deforma el recorrido y descalibra la barra.
`group` · opcional	string	El área de la planta a la que pertenece el puesto. Opcional: sin ella la lámina dibuja el recorrido y no dibuja áreas. Con ella, cada zona sale como el rectángulo que ENVUELVE sus propios puestos —trazo discontinuo, y dicho al pie—, nunca como un muro.

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 sus rótulos no caben sin pisarse o recortarse, y el motor no la publica así. 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

¿Te basta con el trazado sobre el suelo, sin tiempos?

Si importa cuánto dura cada paso y cuánto se espera entre ellos, el mapa de flujo de valor lo mide.

Sí: quédate con diagrama de espagueti

No: usa Mapa de flujo de valor

¿El espacio es una planta con coordenadas propias, no un territorio?

Si los movimientos van entre ciudades o países, un mapa de flujos los pone sobre el mapa.

Sí: quédate con diagrama de espagueti

No: usa Mapa de flujos

¿Lo que cuentas es el recorrido, no el calendario de cada tarea?

Si la pregunta es cuándo empieza y acaba cada actividad, hace falta un Gantt.

Sí: quédate con diagrama de espagueti

No: usa Diagrama de Gantt

Código

La misma pieza, con tus datos

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

const spec = await getPreset('spaghetti');
spec.data.rows = misFilas; // series, order, label, x, y
const { svg, warnings } = await renderComposition(spec);

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

Dudas

¿Por qué los dos ejes tienen la misma escala?

Porque con una escala por eje el trazo dibujado no sería el que se anduvo. Por eso X e Y tienen que ir en la misma unidad, que se lee del nombre de la columna y rotula la barra de escala.

¿Importa el orden de las filas?

No. El orden del recorrido lo da la columna del paso (1, 2, 3…); dos paradas del mismo recorrido con el mismo paso hacen fallar la pieza.

¿Qué son los rectángulos discontinuos?

Las zonas, si las indicas: cada una es el rectángulo que envuelve sus propios puestos. No son muros; la pieza no dibuja el edificio porque no viene en los datos.

¿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 «flujos y recorridos»

Guía para elegir: flujos y recorridos →