Gráfico de densidad
Forma suavizada de una distribución.
Definición
Un gráfico de densidad dibuja una curva suave que indica cómo se reparten los valores: más alta donde hay más concentración. Esta pieza recibe la curva ya preparada, con su posición y su altura en cada punto. Se usa para enseñar la forma de una distribución —picos, colas, asimetría— sin los saltos de un histograma.
- Datos
- x · value
- Buena para
- Enseñar la forma de una distribución cuando ya tienes la curva calculada.
- Evítala cuando
- Cuando tienes las observaciones en bruto: la pieza no estima la curva a partir de muestras.
- Se lee bien
- Entre 10 y 500 elementos; dibuja hasta 500
- Datos que faltan
- Se niega a dibujar y dice qué valor falta.
- Accesibilidad
- Lector de pantalla: resumen en texto · respeta «reducir movimiento»
Forma de los datos
Qué columnas pide
| Columna | Tipo | Para qué |
|---|---|---|
x | number | Posición finita de cada punto preparado. Value/x o columns.x exacto; al menos dos posiciones únicas, ordenadas sin alterar las filas del autor. |
value | number | Altura finita no negativa ya preparada. Density o columns.value exacto. Cero es válido; ausencias y vacíos fallan. No implica masa unitaria ni muestras para una alfombra. |
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
¿Ya tienes la curva calculada?
Si lo que tienes son observaciones sueltas, el histograma las agrupa sin pasos previos.
Sí: quédate con gráfico de densidad
No: usa Histograma
¿Es una sola distribución?
Si comparas varias distribuciones, el ridgeline las apila sin taparse.
Sí: quédate con gráfico de densidad
No: usa Ridgeline
¿Te basta con la forma, sin leer percentiles?
Si necesitas leer qué parte de los datos queda por debajo de un valor, usa la distribución acumulada empírica.
Sí: quédate con gráfico de densidad
No: usa Distribución acumulada empírica
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('density');
spec.data.rows = misFilas; // x, value
const { svg, warnings } = await renderComposition(spec);También en React con Chart y prepareComposition. Guía para desarrolladores →
Dudas
¿Calcula la curva a partir de mis datos?
No. Espera las alturas ya preparadas; no estima, no integra y no normaliza.
¿El área bajo la curva suma uno?
No necesariamente: la pieza dibuja las alturas que recibe sin normalizarlas.
¿Qué valores admite?
Alturas finitas y no negativas; el cero es válido. Hacen falta al menos dos posiciones distintas.
¿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 «cómo se reparten los valores»
Código de barras de eventoscuándo ocurren los eventos en un intervalo
Beeswarmcada individuo de una distribución, sin solaparse
Diagrama de cajamediana, cuartiles y atípicos de una distribución
Gráfico de contornodónde se concentran los puntos
Franja de puntosrespuesta individual de cada caso- Distribución acumulada empíricaqué proporción queda por debajo de cada valor