Pictograma
Cantidades con iconos repetidos.
Definición
El pictograma representa cada cantidad como una fila de iconos sobre un total fijo, con los iconos ocupados destacados sobre los vacíos. La proporción se lee contando figuras, no midiendo longitudes, y todas las filas reservan el mismo total. Se usa para expresar cifras del tipo «3 de cada 10» ante un público amplio.
- Datos
- label · count · total
- Buena para
- Hacer concreta una proporción del tipo «tantos de cada tantos» y compararla entre pocas filas.
- Evítala cuando
- Cuando hay que distinguir diferencias pequeñas: contar figuras es más lento y menos preciso que leer una barra.
- Se lee bien
- Entre 2 y 10 elementos; dibuja hasta 40
- Datos que faltan
- Dibuja el valor ausente como cero.
- Accesibilidad
- Lector de pantalla: tabla de datos · respeta «reducir movimiento»
Forma de los datos
Qué columnas pide
| Columna | Tipo | Para qué |
|---|---|---|
label · opcional | string | El rótulo de la fila. Sale de `findStringColumn(rows)` SIN lista propia, así que hereda los cuatro alias de la casa y, si ninguno casa, coge la primera columna de texto. Sin ella la fila se dibuja con el rótulo vacío. |
count · opcional | number | Los iconos LLENOS. No se busca por nombre: `PictogramChart.data.ts:36` toma `numericColumns(rows)[0]` — la PRIMERA columna numérica en el orden de la fila. Renombrarla no cambia nada; moverla de sitio sí. |
total · opcional | number | El total sobre el que se cuenta. También posicional: `numericColumns(rows)[1]`, la SEGUNDA numérica. Con menos de dos columnas numéricas `fromExportRows` devuelve [] y la lámina sale vacía. Medido: total vacío ⇒ el porcentaje se elide como «—» en vez de inventarse. |
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
¿Quieres que la proporción se cuente?
Si importa leer cifras precisas y comparar muchas filas, unas barras horizontales lo hacen mejor.
Sí: quédate con pictograma
No: usa Gráfico de barras horizontales
¿Comparas varias filas y no una sola proporción?
Si es una única parte de un todo, un waffle la enseña en una cuadrícula de cien casillas.
Sí: quédate con pictograma
No: usa Gráfico de waffle
¿Todas las filas comparten el mismo total?
Si cada grupo tiene un tamaño distinto y eso importa, un gráfico de unidades cuenta las unidades reales de cada uno.
Sí: quédate con pictograma
No: usa Gráfico de unidades
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('pictogram');
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é todas las filas tienen el mismo número de iconos?
Porque reservan el mismo total: así se compara cuántos iconos se ocupan en cada fila, y no cuánto mide cada una.
¿Cuántas filas admite?
Se lee bien entre 2 y 10.
¿Qué hace si faltan datos?
Dibuja el valor ausente como cero. Si un hueco no es un cero en tus datos, rellénalo o elimina la fila antes de dibujar.
¿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