Cascada de atribución

Qué factores explican un resultado.

Definición

Una cascada de atribución explica un resultado como la suma de aportaciones: cada peldaño arranca donde acabó el anterior y sube o baja según su signo, hasta llegar al total. Se lee de izquierda a derecha y cada barra es lo que suma o resta un factor. Se usa para repartir conversiones, ventas o una variación entre canales o causas.

Editar con tus datos SVG Spec JSON

Datos: category · value · group
Buena para: Explicar qué factores construyen un resultado y cuánto aporta cada uno.
Evítala cuando: Cuando el orden de los factores es arbitrario: cambiar el orden de los peldaños cambia el relato sin mover una cifra.
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 peldaño. Sin ella —o sin la numérica— la pieza LANZA nombrando la que falta y las que trae el spec. Antes devolvía [] y `resolveData` dibujaba la atribución del EJEMPLO entera bajo el título del usuario (medido: dos filas sin columna numérica sacaban «Baseline 200 … Total 1.950»).
`value` · opcional	number	La aportación del peldaño, con signo. El acumulado lo calcula la pieza; no se lee del dato.
`group` · opcional	string	Marca la barra de TOTAL («yes»/«true»/«1»/«total»/«sí»/«nivel»). Si no está, queda SÓLO la convención de nombres —«baseline», «total», «net», «sum» comparados como palabra COMPLETA— y todo lo demás son aportaciones. La adivinanza por magnitud (primera/última con módulo > 1,5× el mayor tramo intermedio) se retiró: convertía un canal grande colocado el primero en la barra de base, y un waterfall con un total falso no suma.

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

¿Las aportaciones se suman en secuencia?

Si basta con enseñar el peso de cada factor sin construir el total, unas barras horizontales ordenadas se leen antes.

Sí: quédate con cascada de atribución

No: usa Gráfico de barras horizontales

¿Es una sola aportación por factor?

Si cada peldaño se reparte a su vez en partes, la cascada apilada las desglosa.

Sí: quédate con cascada de atribución

No: usa Cascada apilada

¿Explicas un total, no la diferencia entre dos periodos?

Si hay que explicar el paso de los ingresos de un periodo a otro, el puente de ingresos lo organiza.

Sí: quédate con cascada de atribución

No: usa Puente de ingresos

Código

La misma pieza, con tus datos

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

const spec = await getPreset('attributionwaterfall');
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

¿Cómo marco las barras de total?

Con la columna de grupo («total», «sí», «1»…). Sin ella, solo se toman como total las filas llamadas «baseline», «total», «net» o «sum», como palabra completa.

¿Tengo que calcular el acumulado?

No. Basta con la aportación de cada peldaño, con su signo; el acumulado lo calcula la pieza.

¿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?

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 «partes de un todo»

Guía para elegir: partes de un todo →