Pictograma comparativo
Dos cantidades con iconos enfrentados.
Definición
El pictograma comparativo enfrenta unas pocas cantidades con figuras reconocibles cuyo área crece con el valor, sin eje ni escala. Está pensado para diferencias de orden de magnitud, donde una barra se saldría del encuadre o dejaría la otra en nada. Se usa en piezas de divulgación para que una diferencia grande se vea de un golpe.
- Datos
- label · value · sub
- Buena para
- Hacer visible que una cantidad es muchas veces mayor que otra.
- Evítala cuando
- Cuando las cantidades son parecidas o hay que leer cifras: el ojo estima mal las áreas y no hay eje que ayude.
- Se lee bien
- Entre 1 y 6 elementos; dibuja hasta 6
- 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 bajo la figura. `findStringColumn(rows)` sin lista propia (los cuatro alias de la casa, o la primera columna de texto). Si no hay ninguna columna de texto, `fromExportRows` devuelve [] y la pieza dibuja SU demo bajo tu título. |
value · opcional | number | La magnitud, que se codifica como ÁREA. Posicional: `numericColumns(rows)[0]`, la primera numérica de la fila. En la variante «icon-array» se normaliza a 0–100 con `normalizeShare`. |
sub · opcional | string | Glosa YA COMPUESTA por el autor («+10% CAGR»), que se pinta tal cual. Se busca una columna llamada literalmente «sub»; si no la hay, se coge la SEGUNDA columna de texto, sea lo que sea. |
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
¿La diferencia es de muchas veces y no de unos puntos?
Si los valores son del mismo orden, unas barras verticales los comparan con precisión.
Sí: quédate con pictograma comparativo
No: usa Gráfico de barras verticales
¿Comparas magnitudes y no proporciones de un total?
Si son partes de un mismo total, un pictograma de iconos repetidos las cuenta.
Sí: quédate con pictograma comparativo
No: usa Pictograma
¿Quieres una imagen y no solo las cifras?
Si basta con destacar dos o tres números, un mosaico de cifras los da sin dibujar nada.
Sí: quédate con pictograma comparativo
No: usa Mosaico de cifras
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('pictogram-comparison');
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é crece con el valor, la altura o el área?
El área de la figura. Por eso una figura con diez veces el valor no es diez veces más alta.
¿Por qué no tiene eje?
Porque no hay escala que recortar: la comparación no se puede exagerar eligiendo dónde empieza el eje.
¿Cuántas figuras admite?
Entre 1 y 6.
¿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 «comparar cifras»
Análisis de accretion/dilutionefecto de una operación en el beneficio por acción
Gráfico de flechascambio con dirección entre dos momentos- Gráfico de barras verticalescomparar valores entre pocas categorías
Serie con banda de referenciatu serie frente al rango de sus pares
Comparativa con parestu resultado frente al de otras empresas
Gráfico de Bland-Altmanacuerdo entre dos métodos de medición