Mapa de metro

Rutas paralelas de un plan con intercambios.

Definición

Un mapa de metro dibuja cada frente de un programa como una línea con sus paradas fechadas, y las paradas que comparten dos líneas como transbordos. Se lee dónde se cruzan las líneas y cuántos días espera el frente que llega antes. Sirve para coordinar programas con varios equipos en paralelo.

Editar con tus datos SVG Spec JSON

El plan no lo marcan las fases largas: lo marcan tres transbordos, y en dos de ellos alguien lleva un mes parado

Datos: series · label · x
Buena para: Enseñar qué puntos de encuentro entre frentes deciden el calendario y cuánto se espera en cada uno.
Evítala cuando: Cuando quieres ver cuánto dura cada tarea o declarar dependencias: la única relación que reconoce es una estación compartida.
Se lee bien: Entre 4 y 35 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é
`series`	string	La línea: el frente del programa que recorre el itinerario. Una fila por parada, varias filas por línea. Hacen falta al menos dos líneas —con una sola no hay transbordo posible y la forma es «milestone»— y como mucho siete, que es hasta donde la paleta de la casa está certificada en dicromacia.
`label`	string	El nombre de la estación. Es un IDENTIFICADOR, no un título: dos líneas que escriben el mismo nombre comparten estación, y eso es lo que la figura dibuja como transbordo. Un nombre genérico repetido en todos los frentes («Arranque») inventa una dependencia que no existe; una misma línea que repite nombre falla, porque su espera dejaría de tener respuesta.
`x`	date	La fecha en la que esa línea llega a esa parada. ISO («2026-03-30»), «30/3/2026» o «Mar 2026». De restar dos de estas fechas sale la única cifra que la figura publica: los días que el frente que llega primero pasa esperando en el transbordo.

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é: metro-map: las 5 paradas de «Datos maestros» necesitan 4 estantes de rótulo y en su carril caben 0: la banda mide 51.9 px y cada bloque (nombre + fecha) ocupa 3. 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

¿Hay al menos dos frentes que comparten estaciones?

Si es un único frente, basta con sus fases e hitos en una línea.

Sí: quédate con mapa de metro

No: usa Línea de hitos

¿Te importa la espera en los transbordos más que la duración de cada tarea?

Si lo que cuenta es cuánto dura cada tarea, cada una va en su barra.

Sí: quédate con mapa de metro

No: usa Diagrama de Gantt

¿Las dependencias se reducen a estaciones compartidas?

Si hay dependencias declaradas entre tareas y hace falta la ruta crítica, se dibuja la red.

Sí: quédate con mapa de metro

No: usa Red PERT

Código

La misma pieza, con tus datos

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

const spec = await getPreset('metro-map');
spec.data.rows = misFilas; // series, label, x
const { svg, warnings } = await renderComposition(spec);

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

Dudas

¿Cómo sabe la figura que dos líneas comparten estación?

Porque escriben el mismo nombre. Por eso un nombre genérico repetido en todos los frentes inventa dependencias que no existen.

¿Cuántas líneas admite?

Entre dos y siete. Con una sola no hay transbordo posible.

¿Qué cifra publica?

Una sola: los días que el frente que llega primero a un transbordo pasa esperando al otro.

¿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 →