Anidamiento conceptual

Conceptos contenidos unos dentro de otros.

Definición

El anidamiento conceptual dibuja conceptos dentro de otros: cada contenedor es un límite sin relleno y sus piezas hijas van dentro, en fila o en columna. Se lee de fuera adentro, sin contar bordes. Sirve para explicar qué forma parte de qué en un sistema, una organización o un producto.

Editar con tus datos SVG Spec JSON

El paso que más cuesta no es un paso: es otro proceso entero

Datos: id · padre · pieza · detalle · direccion · flujo · rol
Buena para: Mostrar qué está dentro de qué.
Evítala cuando: Cuando las piezas se comparan por tamaño: los contenedores no miden nada.
Se lee bien: Entre 3 y 16 elementos; dibuja hasta 24
Datos que faltan: No usa valores que puedan faltar.
Accesibilidad: Lector de pantalla: tabla de datos · respeta «reducir movimiento»

Forma de los datos

Qué columnas pide

Columna	Tipo	Para qué
`id` · opcional	string	La clave de la pieza, con la que sus hijas la citan. Medido con lienzo holgado (2600×1600): sin ella la figura dibuja igual, aplanada; el fallo que sale a 800 px es de ANCHO, no de columna.
`padre` · opcional	string	El `id` de la pieza que la contiene. Vacío = nivel de arriba.
`pieza` · opcional	string	El rótulo de la pieza.
`detalle` · opcional	string	La línea de apoyo.
`direccion` · opcional	string	Si las hijas de ESTA pieza se reparten en fila o en columna. Por nivel, no global.
`flujo` · opcional	string	Si las hermanas se encadenan con flechas o sólo se componen. Quitarlas es lo que convierte la pieza en composición pura.
`rol` · opcional	string	neutro · foco · alerta · ausente · favorable.

Tamaños

Recompuesta, no encogida

El motor vuelve a componer la pieza a cada ancho: los rótulos conservan su cuerpo y la figura gana alto si lo necesita.

Móvil · 528 × 1599 px

Escritorio · 988 × 1307 px

Cuándo usarla

Tres preguntas antes de elegirla

¿Cada pieza está dentro de una sola?

Si los conjuntos se solapan en parte, un Venn enseña lo que comparten.

Sí: quédate con anidamiento conceptual

No: usa Diagrama de Venn

¿Basta con saber qué contiene a qué, sin comparar tamaños?

Si cada parte tiene un valor y su peso importa, un treemap reparte el área según la cifra.

Sí: quédate con anidamiento conceptual

No: usa Treemap

¿Quieres ver la contención de un vistazo, sin seguir ramas?

Si la jerarquía es profunda y se lee mejor como ramas, el árbol jerárquico la despliega.

Sí: quédate con anidamiento conceptual

No: usa Árbol jerárquico

Código

La misma pieza, con tus datos

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

const spec = await getPreset('concept-nest');
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

¿Por qué los contenedores no tienen relleno?

Porque son un límite y no una superficie. Así el anidamiento se lee sin tener que contar bordes.

¿Pueden encadenarse las piezas hermanas?

Sí: se puede pedir que se unan con flechas o que solo se compongan, y elegir para cada nivel si se reparten en fila o en columna.

¿Cuántas piezas admite?

Se lee bien entre tres y dieciséis. Con muchas piezas en fila hace falta ancho.

¿Qué hace si faltan datos?

No usa valores que puedan faltar.

¿Cómo se ve en el móvil?

El motor la recompone a 480 px de ancho —rótulos, leyenda y alto— en vez de encoger la versión de escritorio.

Relacionadas

Otras formas de responder «partes de un todo»

Guía para elegir: partes de un todo →