Abanico conceptual
Una idea que se abre en varias ramas.
Definición
El abanico conceptual parte de un origen y abre de 2 a 6 salidas del mismo tamaño, cada una con su rama rotulada y sin flechas entre ellas. Se lee del origen hacia fuera: todas las salidas valen lo mismo. Sirve para enseñar las consecuencias, opciones o productos que nacen de una misma idea.
- Datos
- salida · detalle · rama · sello · mono · rol
- Buena para
- Enseñar lo que sale de un mismo origen sin ordenarlo.
- Evítala cuando
- Cuando las salidas tienen un orden o una jerarquía entre ellas.
- Se lee bien
- Entre 2 y 6 elementos; dibuja hasta 8
- 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é |
|---|---|---|
salida · opcional | string | El rótulo de la salida. Medido: sin él la caja de la salida sigue dibujada. |
detalle · opcional | string | La línea de apoyo dentro de la caja. |
rama · opcional | string | El rótulo sobre la rama que va del origen a esta salida. |
sello · opcional | string | El sello menudo bajo la salida. |
mono · opcional | string | El contenido que se compone en tipografía monoespaciada. |
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 el motor se niega y explica por qué: Qualitative relations: visible text truncated at /data/source/label
. 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 salidas valen lo mismo, sin orden entre ellas?
Si hay jerarquía con varios niveles, el árbol jerárquico la dibuja.
Sí: quédate con abanico conceptual
No: usa Árbol jerárquico
¿Todo sale de un origen hacia fuera?
Si, al revés, varias vías llegan a un mismo punto, usa el embudo conceptual.
Sí: quédate con abanico conceptual
No: usa Embudo conceptual
¿Las salidas nacen del origen, en vez de rodearlo?
Si las piezas rodean un centro sin que ninguna salga de él, la red radial es la forma adecuada.
Sí: quédate con abanico conceptual
No: usa Red radial
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('concept-fan');
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é no hay flechas entre las salidas?
Porque ordenarlas sería una afirmación que los datos no traen. Por eso también miden todas lo mismo.
¿Qué puedo escribir en cada salida?
Su rótulo, una línea de apoyo, el rótulo de la rama que la une al origen y un sello menudo debajo.
¿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»
Matriz de adyacenciaquién se conecta con quién en una red
Diagrama de arcosconexiones entre nodos ordenados en una línea
Diagrama de pajaritacausas y consecuencias de un riesgo central
Columnas enfrentadascontrastar dos o más posturas
Rejilla con casilla vacíaver qué combinación falta
Diagrama de Ishikawacausas posibles de un problema por familias