Diagrama de Nightingale
Valores cíclicos como sectores radiales.
Definición
Un diagrama de Nightingale reparte un ciclo en cuñas del mismo ángulo, una por tramo —normalmente meses—, y cambia sólo su radio según el valor. El ciclo se lee entero de un vistazo, como una flor. Se usa para estacionalidades: incidencias, ventas o visitas a lo largo del año.
- Datos
- category · value
- Buena para
- Ver la forma de un ciclo y qué tramos destacan dentro de él.
- Evítala cuando
- Cuando hay que comparar valores con precisión: la tinta crece con el cuadrado del radio y el ojo exagera las diferencias.
- Se lee bien
- Entre 3 y 12 elementos; dibuja hasta 2000
- 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 | El tramo del ciclo: una cuña por fila, en el orden de las filas. Un único alias, «month»; con otro nombre la cuña sale sin rótulo. |
value · opcional | number | El RADIO de la cuña. No el área: dos valores al doble no pintan el doble de tinta. |
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
¿El ciclo se entiende mejor en redondo?
Si interesa más leer cada mes con precisión que la forma del ciclo, usa barras mensuales.
Sí: quédate con diagrama de nightingale
No: usa Barras mensuales
¿Te basta con un solo ciclo?
Si tienes varios años y quieres separar la estación de la tendencia, usa el gráfico de ciclos estacionales.
Sí: quédate con diagrama de nightingale
No: usa Gráfico de ciclos estacionales
¿Los tramos forman un ciclo que se cierra?
Si las categorías no tienen orden circular, unas barras verticales las comparan mejor.
Sí: quédate con diagrama de nightingale
No: usa Gráfico de barras verticales
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('coxcomb');
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
¿El valor es el radio o el área?
El radio. Por eso un valor doble no pinta el doble de tinta: la comparación honesta es entre radios.
¿Cuántos tramos admite?
Se lee bien entre 3 y 12, en el orden de las filas.
¿Cómo se rotulan las cuñas?
Con la columna de tramo, que tiene que llamarse «category» o «month». Con otro nombre, las cuñas salen sin rótulo.
¿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 «cómo cambia en el tiempo»
Gráfico de áreasuna medida en el tiempo con el volumen destacado
Gráfico de control por atributostasa de defectos de lotes frente a sus límites
Barras y línea combinadasuna cifra absoluta junto a su tasa
Bandas de Bollingerprecio frente a su rango habitual de variación
Gráfico con selector de rangoexplorar un tramo de una serie larga
Burndowntrabajo pendiente frente al plan de un sprint