Mapa de solapes

Qué comparten varios conjuntos.

Definición

El mapa de solapes dibuja dos o más regiones con sus elementos dentro y lo que cae a caballo de ellas en la frontera. Las regiones se distinguen por textura y valor, no por color, y su tamaño no significa nada. Sirve para enseñar un punto ciego: qué queda entre dos equipos, dos productos o dos responsabilidades.

Editar con tus datos SVG Spec JSON

El corpus cubre lo publicado; tu ventaja vive justo donde no llega

Datos: region · detalle · textura · elementos · frontera · anchura
Buena para: Señalar qué cae entre dos territorios y de quién es.
Evítala cuando: Cuando quieres contar cuántos elementos comparte cada combinación de conjuntos.
Se lee bien: Entre 2 y 5 elementos; dibuja hasta 5
Datos que faltan: No usa valores que puedan faltar.
Accesibilidad: Lector de pantalla: resumen en texto · respeta «reducir movimiento»

Forma de los datos

Qué columnas pide

Columna	Tipo	Para qué
`region` · opcional	string	El rótulo de la región. Medido: sin él la región sigue dibujada, sólo pierde el rótulo.
`detalle` · opcional	string	La línea de apoyo bajo el rótulo.
`textura` · opcional	string	Si la región va clara o con la trama a 45°. Es el ÚNICO recurso de diferenciación que no es color, y por eso esta pieza es de las dos del catálogo que dibujan de verdad un `<pattern>`.
`elementos` · opcional	string	Las fichas que van dentro de la región.
`frontera` · opcional	string	Lo que cae a caballo de las dos regiones.
`anchura` · opcional	number	Anchura relativa del territorio en modo `reparto`. No es una magnitud del argumento: la pieza declara por escrito que el tamaño no codifica nada.

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é: Qualitative regions: insufficient width after label gutters. 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

¿Importa dónde cae cada elemento y no cuántos hay?

Si quieres contar los elementos de cada intersección, el gráfico UpSet lo hace con barras.

Sí: quédate con mapa de solapes

No: usa Gráfico UpSet

¿Buscas el punto ciego entre territorios?

Si solo quieres mostrar qué comparten varios conjuntos, el Venn es la forma conocida.

Sí: quédate con mapa de solapes

No: usa Diagrama de Venn

¿Hay algo que cae a caballo entre las regiones?

Si las partes no comparten nada, las columnas enfrentadas las contrastan sin fingir un solape.

Sí: quédate con mapa de solapes

No: usa Columnas enfrentadas

Código

La misma pieza, con tus datos

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

const spec = await getPreset('concept-overlap');
spec.data.rows = misFilas; // tus columnas
const { svg, warnings } = await renderComposition(spec);

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

Dudas

¿El tamaño de las regiones significa algo?

No. Aunque se pueda repartir la anchura, la pieza declara por escrito que el tamaño no codifica nada.

¿Cómo se distinguen las regiones?

Por textura y valor: cada región va clara o con trama a 45°. Así el contraste no depende del color.

¿Qué hace si faltan datos?

No usa valores que puedan faltar.

¿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 «dónde se sitúa cada uno»

Guía para elegir: dónde se sitúa cada uno →