Mapa de flechas de cambio

Subidas y bajadas por territorio.

Definición

Un mapa de flechas de cambio clava una flecha en cada sitio: su largo es el tamaño del cambio entre dos cortes y su inclinación dice si sube o baja. Se lee buscando bandas de sitios vecinos que se mueven en el mismo sentido. Se usa para cambios de voto, de precio o de población entre dos fechas.

Editar con tus datos SVG Spec JSON

Datos: lat · lon · start · end · label · group
Buena para: Ver si el sentido del cambio entre dos momentos tiene forma geográfica.
Evítala cuando: Cuando importa el nivel de cada sitio: una flecha larga puede salir de un lugar que sigue siendo el más bajo.
Se lee bien: Entre 3 y 200 elementos; dibuja hasta 450
Datos que faltan: Omite el valor ausente y lo declara aparte.
Accesibilidad: Lector de pantalla: tabla de datos · respeta «reducir movimiento»

Forma de los datos

Qué columnas pide

Columna	Tipo	Para qué
`lat`	number	Latitud en grados decimales, norte positivo. Se pide SIEMPRE por nombre (o atada en `spec.columns.lat`): latitud y longitud son dos números del mismo orden y el mismo signo, y cogerlas por posición dibujaría el mundo girado sin que nada lo cantara. Una fila fuera del recuadro del basemap se descarta, se cuenta y se escribe en el pie.
`lon`	number	Longitud en grados decimales, este positivo. Por nombre o en `spec.columns.lon`, por la misma razón que la latitud.
`start`	number	El PRIMER corte: de dónde parte cada sitio. Va por nombre o atado en `spec.columns.start` y NUNCA por posición: los dos cortes son dos números de la misma unidad y el mismo orden, así que cogerlos por posición dibujaría TODAS las flechas con el sentido cambiado y el render saldría en verde.
`end`	number	El SEGUNDO corte: a dónde ha llegado. El salto que dibuja la flecha es SIEMPRE `end - start`, calculado aquí: una tercera columna «Cambio» no se lee nunca, porque un número que puede dejar de cuadrar con sus dos extremos es la mentira más barata que este dato admite.
`label`	string	El nombre del sitio: rotula las flechas mayores que caben sin solaparse y es lo que dice el tooltip. Vale también sin alias si es la ÚNICA columna de texto libre; con dos, hay que decir cuál.
`group` · opcional	string	Opcional, y sólo informa: lo escribe el tooltip. NO reparte tinta —el color de esta forma lleva el SIGNO del salto, no una categoría—, así que un dataset con veinte grupos se dibuja igual de bien que uno sin ninguno. Y ojo con el alias: `casaPorNombre` compara cadenas COMPLETAS normalizadas, así que «Tipo de red» no casa con «tipo» — por eso la cabecera de la propia demo está en la lista.

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é: swing-arrow-map: el salto mayor sólo dispone de 16 px y esta forma necesita al menos 24 px para que una flecha se lea como flecha —por debajo, la punta se come . 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

¿La geografía explica algo del cambio?

Si la ubicación no aporta, comparar los dos cortes sitio a sitio es más directo.

Sí: quédate con mapa de flechas de cambio

No: usa Gráfico de pendiente

¿Lo que importa es cuánto cambia y no cuánto hay?

Si la pregunta es el tamaño del fenómeno en cada lugar, hacen falta símbolos proporcionales.

Sí: quédate con mapa de flechas de cambio

No: usa Mapa de símbolos proporcionales

¿Los datos son puntos con coordenadas?

Si son regiones con contorno, colorear cada territorio se lee mejor que una flecha en su centro.

Sí: quédate con mapa de flechas de cambio

No: usa Mapa coroplético

Código

La misma pieza, con tus datos

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

const spec = await getPreset('swing-arrow-map');
spec.data.rows = misFilas; // lat, lon, start, end, label
const { svg, warnings } = await renderComposition(spec);

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

Dudas

¿El ángulo de la flecha es una dirección?

No. Solo hay dos inclinaciones en todo el mapa, una para subir y otra para bajar; el ángulo no indica rumbo.

¿Dónde se ven los valores de los dos cortes?

En la ficha que aparece al pasar el cursor. El dibujo solo enseña el salto, que siempre se calcula como el segundo corte menos el primero.

¿Puedo pasar una columna de cambio ya calculada?

No se lee. El salto se calcula a partir de las dos columnas de corte, que deben ir por nombre para no invertir todas las flechas.

¿Qué hace si faltan datos?

Omite el valor ausente y lo declara aparte.

¿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 cambia en el tiempo»

Guía para elegir: cómo cambia en el tiempo →