Embudo de conversión

Cuánto se pierde en cada etapa.

Definición

Un embudo de conversión pone las etapas de un proceso de arriba abajo, con una anchura que es el volumen de cada una. Se lee la caída entre etapas consecutivas: dónde se pierde más gente. Se usa para ventas, registros, compras en línea o procesos de selección.

Editar con tus datos SVG Spec JSON

Datos: label · value
Buena para: Ver en qué paso de un proceso se pierde más volumen.
Evítala cuando: Cuando las categorías no son una secuencia en la que cada etapa sale de la anterior.
Se lee bien: Entre 3 y 8 elementos; dibuja hasta 800
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é
`label` · opcional	string	La etapa. El ORDEN DE LAS FILAS es la secuencia: la pieza no reordena ni por valor ni por nombre.
`value` · opcional	number	El volumen de la etapa. La primera fila fija el 100 % (`maxValue`, data.ts:47): los porcentajes se calculan contra ella, no contra la suma.

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.

Móvil · 468 × 592 px

Escritorio · 848 × 782 px

Cuándo usarla

Tres preguntas antes de elegirla

¿Las etapas van en un orden fijo y cada una sale de la anterior?

Si las categorías no forman una secuencia, unas barras ordenadas comparan sin sugerir caída.

Sí: quédate con embudo de conversión

No: usa Gráfico de barras horizontales

¿Todos siguen el mismo camino?

Si los usuarios se reparten por rutas distintas, un Sankey enseña las bifurcaciones.

Sí: quédate con embudo de conversión

No: usa Diagrama de Sankey

¿Tienes cifras de cada etapa?

Si solo quieres dibujar el esquema del proceso, el embudo conceptual lo hace sin medir nada.

Sí: quédate con embudo de conversión

No: usa Embudo conceptual

Código

La misma pieza, con tus datos

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

const spec = await getPreset('funnel');
spec.data.rows = misFilas; // tus columnas
const { svg, warnings } = await renderComposition(spec);

También en React con Chart y prepareComposition. Guía para desarrolladores →