Intervalo con degradado

Incertidumbre que se difumina hacia los extremos.

Definición

Un intervalo con degradado pone cada estimación con tres bandas anidadas —del 50 %, el 80 % y el 95 %— que se difuminan hacia los extremos. Se lee cuánto se estrecha el intervalo, más que el punto central. Se usa para publicar estimaciones de modelos o encuestas sin dar una falsa precisión.

Editar con tus datos SVG Spec JSON

Datos: label · value · q025 · q10 · q25 · q75 · q90 · q975
Buena para: Enseñar dónde se concentra una estimación y dónde deja de haber apuesta.
Evítala cuando: Cuando solo tienes un intervalo por estimación: la pieza exige los seis cuantiles.
Se lee bien: Entre 3 y 20 elementos; dibuja hasta 50
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`	string	La fila. OBLIGATORIA: sin ella la pieza LANZA (antes devolvía [] y `resolveData` enseñaba su propia demo bajo el título del usuario).
`value`	number	La estimación puntual: el punto y el centro de las bandas. OBLIGATORIA.
`q025`	number	Extremo bajo del 95 %. OBLIGATORIO: antes, ausente, se dibujaba `estimación − 4` y la banda salía igual sin que nadie la hubiera medido.
`q10`	number	Extremo bajo del 80 %. OBLIGATORIO (antes, `estimación − 2,5`).
`q25`	number	Extremo bajo del 50 %. OBLIGATORIO (antes, `estimación − 1,2`).
`q75`	number	Extremo alto del 50 %. OBLIGATORIO (antes, `estimación + 1,2`).
`q90`	number	Extremo alto del 80 %. OBLIGATORIO (antes, `estimación + 2,5`).
`q975`	number	Extremo alto del 95 %. OBLIGATORIO (antes, `estimación + 4`). OJO: «q97.5» y «q975» son el mismo nombre una vez normalizado, así que traer sólo uno de los dos extremos del 95 % hace que la pieza lo detecte y lance en vez de leer dos veces la columna del 50 %.

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.

Móvil · 528 × 618 px

Escritorio · 848 × 722 px

Cuándo usarla

Tres preguntas antes de elegirla

¿Tienes varios cuantiles por estimación?

Si solo tienes un intervalo, unas barras de error lo enseñan sin bandas.

Sí: quédate con intervalo con degradado

No: usa Barras de error

¿Cada fila es una estimación y no un punto de una previsión en el tiempo?

Si la incertidumbre se abre con el horizonte, un abanico la enseña a lo largo del tiempo.

Sí: quédate con intervalo con degradado

No: usa Gráfico de abanico

¿Las filas son estimaciones y no observaciones crudas?

Si tienes los datos originales, un diagrama de violín enseña su forma completa.

Sí: quédate con intervalo con degradado

No: usa Gráfico de violín

Código

La misma pieza, con tus datos

import { getPreset, renderComposition } from 'visx-render/node';

const spec = await getPreset('gradient-interval');
spec.data.rows = misFilas; // label, value, q025, q10, q25, q75, q90, q975
const { svg, warnings } = await renderComposition(spec);

También en React con Chart y prepareComposition. Guía para desarrolladores →

Dudas

¿Qué cuantiles necesita?

Seis extremos: 2,5 y 97,5 para el 95 %, 10 y 90 para el 80 %, y 25 y 75 para el 50 %, además de la estimación puntual.

¿Puede calcular las bandas por mí?

No. Si falta alguno de los extremos, la pieza se detiene en vez de dibujar una banda que nadie ha medido.

¿Cuántas filas caben?

Se lee bien entre 3 y 20.

¿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 480 px de ancho —rótulos, leyenda y alto— en vez de encoger la versión de escritorio.

Relacionadas

Otras formas de responder «cómo se reparten los valores»

Guía para elegir: cómo se reparten los valores →