Mapa esquemático

Trámites o lugares en una red simplificada.

Definición

Un mapa esquemático dibuja varios itinerarios paralelos como líneas de metro: cada línea es un recorrido, cada parada un paso, y las paradas con el mismo nombre en dos líneas son transbordos. Las paradas se colocan por su orden, con separación constante, no por tiempo ni por distancia. Se usa para trámites, procesos o recorridos que comparten pasos.

Editar con tus datos SVG Spec JSON

Las tres vías se juntan en Tarificación: es la parada que decide el plazo de toda el alta

Datos: series · label · order · color
Buena para: Ver por qué pasos tienen que pasar todos los itinerarios y dónde se cruzan.
Evítala cuando: Cuando hay un único itinerario: sin dos líneas no hay transbordo, y unos pasos en secuencia lo cuentan mejor.
Se lee bien: Entre 4 y 25 elementos; dibuja hasta 40
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 itinerario al que pertenece la fila. 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 honrada es «concept-steps»— y como mucho siete, que es hasta donde la paleta de la casa está certificada en dicromacia. El ORDEN DE APARICIÓN de las líneas en el fichero decide su carril, y la figura lo rotula.
`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 exactamente lo que la figura dibuja como transbordo. Una misma línea que repite nombre falla, porque una estación no puede estar en dos columnas.
`order`	number	La posición de la parada DENTRO de su línea. Es una secuencia, no una magnitud: de ella sale el grafo de precedencias, y la columna de cada estación es su camino más largo dentro de ese grafo. Medido: multiplicar toda la columna por mil no mueve un píxel. Dos paradas de la misma línea con el mismo orden fallan; un ciclo entre dos líneas también.
`color` · opcional	string	OPCIONAL: el hex de la línea («#014d64»). Sin ella los colores salen de la paleta del tema, que está certificada en dicromacia hasta siete series; declarándola, el contraste es tuyo. Un valor que no sea «#rgb» o «#rrggbb» falla: viaja tal cual al trazo.

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

¿Hay al menos dos itinerarios?

Con uno solo, pasos e hitos lo cuentan sin el aparato del metro.

Sí: quédate con mapa esquemático

No: usa Pasos e hitos

¿Importa el orden y no el momento?

Si cada paso tiene fechas y duraciones, el diagrama de Gantt los pone en el tiempo.

Sí: quédate con mapa esquemático

No: usa Diagrama de Gantt

¿Importa qué pasos se comparten, no cuánto pasa por cada tramo?

Si hay que medir el volumen de cada tramo, el diagrama de Sankey lo da por el grosor.

Sí: quédate con mapa esquemático

No: usa Diagrama de Sankey

Código

La misma pieza, con tus datos

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

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

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

Dudas

¿Cómo se dibuja un transbordo?

Escribiendo el mismo nombre de estación en dos líneas: la pieza las une en una sola parada. Una misma línea no puede repetir nombre.

¿Cuántas líneas admite?

Entre dos y siete, que es hasta donde la paleta está comprobada para quien distingue mal los colores. Se puede fijar el color de cada línea con un código hexadecimal.

¿Qué decide la posición de cada parada?

Su orden dentro de la línea, combinado con el de las demás líneas. Es una secuencia, no una medida: multiplicar todos los números de orden no mueve nada.

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