Anatomía anotada

Las partes de un objeto explicadas.

Definición

La anatomía anotada pone un objeto en el centro y reparte sus partes en dos columnas a los lados, cada una unida al objeto por una guía con su rótulo y una línea de apoyo. Todas las partes se dibujan iguales: la figura nombra, no jerarquiza. Sirve para explicar de qué se compone un producto, un documento o un concepto.

Editar con tus datos SVG Spec JSON

Una acción no es un botón: es un contrato con cuatro partes declaradas

Datos: parte · detalle · lado · orden · rol
Buena para: Nombrar las partes de una cosa y explicar qué es cada una.
Evítala cuando: Cuando las partes se subdividen y la jerarquía es el mensaje.
Se lee bien: Entre 2 y 8 elementos; dibuja hasta 12
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é
`parte` · opcional	string	El rótulo de la parte. Medido: sin ella la parte SIGUE dibujada, sólo pierde su rótulo (6 textos menos).
`detalle` · opcional	string	La línea de apoyo bajo el rótulo.
`lado` · opcional	string	En cuál de las dos columnas que flanquean al sujeto vive la parte. Sin ella el reparto es automático.
`orden` · opcional	number	Posición dentro de su columna. Es un índice de colocación, no una magnitud: la pieza no lo escala ni lo dibuja.
`rol` · opcional	string	neutro · foco · alerta · ausente · favorable.

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

¿Las partes están todas en un mismo nivel?

Si las partes se subdividen en otras, el árbol jerárquico enseña los niveles.

Sí: quédate con anatomía anotada

No: usa Árbol jerárquico

¿Las partes se explican sin las relaciones entre ellas?

Si importa cómo se conectan unas con otras, el mapa de ontología dibuja los enlaces.

Sí: quédate con anatomía anotada

No: usa Mapa de ontología

¿Las partes conviven sin apoyarse unas en otras?

Si cada parte descansa sobre la de debajo, las capas apiladas lo dicen mejor.

Sí: quédate con anatomía anotada

No: usa Capas apiladas

Código

La misma pieza, con tus datos

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

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

¿Puedo destacar una parte?

Sí, con el rol: foco, alerta, favorable o ausente. Lo que no se puede es dibujarla más grande, porque la forma no tiene con qué decir importancia.

¿Quién decide en qué lado va cada parte?

Tú, con la columna de lado y la de orden; sin ellas el reparto es automático. El orden sólo coloca, no mide nada.

¿Cuántas partes admite?

Se lee bien entre 2 y 8. Con más, conviene agrupar partes o repartirlas en dos figuras.

¿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 «cómo funciona algo»

Guía para elegir: cómo funciona algo →