Código de barras de eventos
Cuándo ocurren los eventos en un intervalo.
Definición
Un código de barras de eventos dibuja cada observación como una raya fina sobre una tira, en su posición exacta. No agrupa en cubetas, así que se ve dónde se apiñan los casos y dónde hay huecos; la opacidad delata cuántas rayas se solapan. Sirve para marcas de tiempo de eventos, llegadas o fallos a lo largo de un día o un periodo.
- Datos
- value · order
- Buena para
- Ver cuándo se concentran los eventos y dónde hay vacíos, sin perder ninguno.
- Evítala cuando
- Cuando hay miles de eventos: las rayas se funden en una mancha y conviene contar por tramos.
- Se lee bien
- Entre 10 y 500 elementos; dibuja hasta 6000
- Datos que faltan
- Dibuja el valor ausente como cero.
- Accesibilidad
- Lector de pantalla: resumen en texto · respeta «reducir movimiento»
Forma de los datos
Qué columnas pide
| Columna | Tipo | Para qué |
|---|---|---|
value · opcional | number | 1.ª columna numérica, POR POSICIÓN: la posición de la marca en la tira. Renombrarla no cambia nada; moverla de sitio, todo. |
order · opcional | number | 2.ª columna numérica, por posición. Con menos de dos numéricas la pieza devuelve [] y cae a su demo (data.ts:67). |
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
¿Importa ver cada evento por separado?
Si basta con cuántos caen en cada tramo, un histograma los cuenta.
Sí: quédate con código de barras de eventos
No: usa Histograma
¿Es un solo grupo?
Si hay que comparar la misma tira entre varios grupos, un gráfico de franjas pone una por grupo.
Sí: quédate con código de barras de eventos
No: usa Gráfico de franjas
¿Te interesa un solo intervalo seguido?
Si los eventos se repiten por día y hora de la semana, una tarjeta perforada los resume en una rejilla.
Sí: quédate con código de barras de eventos
No: usa Tarjeta perforada
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('barcode');
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é columnas lee?
Dos numéricas, por posición: la primera es dónde va la raya en la tira; la segunda, el orden. El nombre da igual, pero cambiarlas de sitio lo cambia todo.
¿Qué indica la opacidad?
La densidad: donde muchas rayas se solapan la tira se oscurece, y se ve un apiñamiento que una barra taparía.
¿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 se reparten los valores»
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
Gráfico de densidadforma suavizada de una distribución
Franja de puntosrespuesta individual de cada caso
Distribución acumulada empíricaqué proporción queda por debajo de cada valor