Embudo conceptual

Filtros sucesivos sin cifras.

Definición

El embudo conceptual hace converger de 2 a 6 vías de entrada en un único punto, el paso obligado. La vía que lo esquiva se dibuja por debajo y tachada, en vez de omitirse. Sirve para enseñar que todo pasa por el mismo control, canal o filtro, y qué intenta saltárselo.

Editar con tus datos SVG Spec JSON

Tres maneras de invocar la acción, y ninguna llega al dato sin pasar por ella

Datos: origen · detalle · ruta · rol
Buena para: Enseñar que todas las vías pasan por el mismo punto y cuál intenta esquivarlo.
Evítala cuando: Cuando quieres decir cuánto se pierde en cada etapa: el embudo conceptual no lleva cifras.
Se lee bien: Entre 2 y 6 elementos; dibuja hasta 8
Datos que faltan: No usa valores que puedan faltar.
Accesibilidad: Lector de pantalla: tabla de datos · respeta «reducir movimiento»

Forma de los datos

Qué columnas pide

Columna	Tipo	Para qué
`origen` · opcional	string	El rótulo de la vía de entrada. Medido: sin él la vía sigue dibujada.
`detalle` · opcional	string	La línea de apoyo bajo el rótulo.
`ruta` · opcional	string	Si la vía entra por la pieza o la esquiva: la que esquiva se dibuja pasando por debajo y tachada.
`rol` · opcional	string	neutro · foco · alerta · ausente · favorable. `ausente` es la vía que se intentaría y no existe.

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

¿Basta con decir por dónde pasa todo, sin contar cuántos?

Si hay que medir lo que se pierde en cada etapa, el embudo de conversión lo cuantifica.

Sí: quédate con embudo conceptual

No: usa Embudo de conversión

¿Las vías confluyen en un solo punto?

Si es un origen que se abre en varias salidas, el abanico conceptual es la forma adecuada.

Sí: quédate con embudo conceptual

No: usa Abanico conceptual

¿Hay un único paso obligado?

Si son varias etapas sucesivas hasta una meta, pasos e hitos las ordena.

Sí: quédate con embudo conceptual

No: usa Pasos e hitos

Código

La misma pieza, con tus datos

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

const spec = await getPreset('concept-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 →

Dudas

¿Cómo dibujo una vía que esquiva el paso?

Indicándolo en su ruta: se dibuja pasando por debajo y tachada.

¿Y una vía que se intentaría pero no existe?

Con el rol «ausente»: queda dibujada como la vía que se intentaría y no existe.

¿Qué hace si faltan datos?

No usa valores que puedan faltar.

¿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 «flujos y recorridos»

Guía para elegir: flujos y recorridos →