Gráfico de waffle
Proporciones en una cuadrícula de 100.
Definición
Un gráfico de waffle es una cuadrícula de cien casillas en la que cada categoría ocupa tantas como puntos porcentuales tiene. Se lee contando casillas: la retícula fija el denominador y la mitad son cincuenta. Se usa para enseñar partes de un todo en porcentaje con pocas categorías.
- Datos
- label · value
- Buena para
- Enseñar qué parte de un todo es cada categoría, cuando el total es cien.
- Evítala cuando
- Cuando las partes no suman cien o hay que comparar varios totales.
- Se lee bien
- Entre 2 y 10 elementos; dibuja hasta 20
- Datos que faltan
- Se niega a dibujar y dice qué valor falta.
- Accesibilidad
- Lector de pantalla: tabla de datos · respeta «reducir movimiento»
Forma de los datos
Qué columnas pide
| Columna | Tipo | Para qué |
|---|---|---|
label · opcional | string | La categoría, que aparece en la leyenda junto a su porcentaje. Sin ella (o sin la de valor) `fromExportRows` LANZA nombrando cuál falta y qué columnas trae el spec — antes devolvía [] y la retícula salía sin una sola casilla. |
value · opcional | number | PUNTOS PORCENTUALES, y la retícula es el denominador: el valor se gasta casilla a casilla sobre una retícula de exactamente cien. NO se normaliza —el rótulo de la leyenda escribe la cifra del spec con un «%» detrás, así que normalizar dejaría leyenda y retícula contando cosas distintas—: si la suma se separa de 100 en más de media casilla, `fromExportRows` LANZA diciendo cuánto suma. Para un total que no sea 100, «donut» o «pie». |
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.
Cuándo usarla
Tres preguntas antes de elegirla
¿Las partes suman cien?
Si el total es otro número, un anillo reparte cualquier total sin forzarlo a porcentaje.
Sí: quédate con gráfico de waffle
No: usa Gráfico de anillo
¿Son pocas categorías, hasta una decena?
Con muchas partes, un treemap aprovecha mejor el espacio.
Sí: quédate con gráfico de waffle
No: usa Treemap
¿Es un único todo?
Si comparas el reparto de varios totales, las barras apiladas los ponen uno junto a otro.
Sí: quédate con gráfico de waffle
No: usa Barras apiladas
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('waffle');
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
¿Qué pasa si los valores no suman 100?
Si la suma se aparta de 100 más de media casilla, la pieza falla y dice cuánto suma. No normaliza, para que la leyenda y la cuadrícula cuenten lo mismo.
¿Por qué casillas y no un sector?
Contar casillas sobre cien es más fiable que estimar un ángulo a ojo.
¿Qué hace si faltan datos?
Se niega a dibujar y dice qué valor falta.
¿Cómo se ve en el móvil?
El motor la recompone a 360 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»
Anidamiento conceptualconceptos contenidos unos dentro de otros- Gráfico de anilloreparto de un total en pocas partes
Matriz de puntosresultados de casos individuales en cuadrícula
Descomposición DuPontdescomponer el ROE en sus factores
Gráfico de carámbanosjerarquía y pesos en bloques por niveles
Árbol con sangríasjerarquía detallada con su valor