Barras de rango
Mínimo y máximo por categoría.
Definición
Las barras de rango dibujan, para cada categoría, una barra del mínimo al máximo y un punto donde cae la media. Se lee el recorrido completo y dónde se sitúa el promedio dentro de él. Sirve para temperaturas, precios o plazos que varían dentro de cada grupo.
- Datos
- category · low · high · value
- Buena para
- Comparar entre categorías cuánto se mueve un valor y dónde cae su media.
- Evítala cuando
- Cuando hace falta saber cómo se reparten los valores dentro del rango: la barra no dice si se agolpan en un extremo.
- Se lee bien
- Entre 2 y 20 elementos; dibuja hasta 300
- 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é |
|---|---|---|
category · opcional | string | La fila del eje Y: un rango por categoría. `findStringColumn` cae a la primera columna de texto si «city» no aparece; sin ninguna, cero filas. |
low · opcional | number | Extremo inferior del rango. NO se busca por nombre: es la PRIMERA columna numérica. |
high · opcional | number | Extremo superior del rango. La SEGUNDA columna numérica. |
value · opcional | number | La marca de media dentro de la barra. La TERCERA columna numérica; si falta se dibuja en 0, es decir fuera del rango. |
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
¿Bastan el mínimo, el máximo y la media?
Si importa dónde se concentra la mitad central de los datos, el diagrama de caja enseña los cuartiles.
Sí: quédate con barras de rango
No: usa Diagrama de caja
¿Quieres resumir el recorrido, no enseñar cada observación?
Si hay que ver todos los valores uno a uno, el gráfico de franjas los pone sobre el eje.
Sí: quédate con barras de rango
No: usa Gráfico de franjas
¿Los dos extremos son mínimo y máximo, no dos momentos distintos?
Si comparas un antes y un después de cada categoría, las mancuernas lo dicen mejor.
Sí: quédate con barras de rango
No: usa Gráfico de mancuernas
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('span');
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
¿Cómo sabe qué número es el mínimo y cuál el máximo?
Por posición: la primera columna numérica es el extremo inferior, la segunda el superior y la tercera la media. No se buscan por nombre, así que conviene ordenarlas en el fichero.
¿Qué es el punto dentro de la barra?
La media. Si no hay tercera columna numérica, la marca se dibuja en cero, que normalmente queda fuera del rango: inclúyela siempre.
¿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 480 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