Bump de áreas

Evolución del puesto y del peso de cada serie.

Definición

Un bump de áreas dibuja el puesto de cada competidor periodo a periodo como una cinta que sube o baja en la clasificación. Todas las cintas tienen el grosor de un puesto, así que lo que se lee son los cruces: quién adelanta a quién y cuándo. Sirve para clasificaciones de marcas, productos o equipos a lo largo del tiempo.

Editar con tus datos SVG Spec JSON

Datos: x · value
Buena para: Ver cuándo un competidor adelanta a otro en una clasificación y cuánto tiempo conserva cada puesto.
Evítala cuando: Cuando importa la distancia entre competidores: la cinta marca el puesto, no la cifra que lo separa del siguiente.
Datos que faltan: Se niega a dibujar y dice qué valor falta.
Accesibilidad: Lector de pantalla: resumen en texto

Forma de los datos

Qué columnas pide

Columna	Tipo	Para qué
`x` · opcional	string	El periodo. Se toma la columna de fecha, o la de rótulo, o la primera de texto (`schema.dateCol ?? labelCol ?? stringCols[0]`). Sin ninguna ya NO cae a su demo —enseñar Netflix/Disney+/HBO Max bajo el título del cliente era la mentira más cara que sabía contar esta pieza—: lanza diciendo qué columnas trae el spec.
`value` · opcional	number	El PUESTO en ese periodo. Una columna numérica por entidad y el nombre de la columna es la etiqueta de la cinta: no se declara, se pivota. Una casilla sin número FALLA con la cuenta y con el par entidad × periodo: en este formato pivotado no hay forma de escribir «no compitió», y un 0 sería un puesto mejor que el primero.

Tamaños

Ancha por necesidad

Esta pieza necesita anchura para que cada rótulo quepa entero. El motor prefiere decirlo a apretarla.

A menos de 480 px sus rótulos no caben sin pisarse o recortarse, y el motor no la publica así. En el móvil se ve la versión ancha, a tamaño legible y sin recortar, dentro de un marco que se desliza.

Cuándo usarla

Tres preguntas antes de elegirla

¿Te basta con el puesto?

Si importa también cuánto mide cada competidor, la carrera de barras dice puesto y magnitud a la vez.

Sí: quédate con bump de áreas

No: usa Carrera de barras

¿Lo que tienes son puestos y no cifras?

Si tienes los valores y lo que importa es su trayectoria y no quién va delante, un gráfico de líneas la enseña.

Sí: quédate con bump de áreas

No: usa Gráfico de líneas

¿Hay más de dos periodos?

Si solo hay dos momentos, un gráfico de pendiente enseña quién sube y quién baja sin más.

Sí: quédate con bump de áreas

No: usa Gráfico de pendiente

Código

La misma pieza, con tus datos

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

const spec = await getPreset('areabump');
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é datos necesita?

Una columna de periodo y una columna numérica por competidor con su puesto en cada periodo. El nombre de cada columna es la etiqueta de su cinta.

¿Por qué todas las cintas tienen el mismo grosor?

Porque cada una ocupa un puesto. El grosor no mide nada; lo que se lee es el orden y los cruces.

¿Qué hace si faltan datos?

Se niega a dibujar y dice qué valor falta.

¿Cómo se ve en el móvil?

A menos de 480 px el motor no la compone sin pisar o cortar rótulos, y lo dice. En el móvil se ve la versión ancha, a tamaño legible, dentro de un marco que se desliza.

Relacionadas

Otras formas de responder «quién va primero»

Guía para elegir: quién va primero →