Lo que un diagrama de Sankey muestra y un embudo no puede

¿Qué es un diagrama de Sankey?

Todo diagrama de Sankey obedece una regla que ningún otro gráfico impone: la cantidad que entra en un nodo es igual a la que sale de él, así que el ancho de la banda se conserva de un extremo a otro de la imagen. La documentación de gráficos de Google da la definición llana, que un diagrama de Sankey es "a visualization used to depict a flow from one set of values to another", donde "the things being connected are called nodes and the connections are called links".

Esa es toda la gramática. Los nodos son etapas, categorías o páginas. Los enlaces son el movimiento entre ellos. El ancho de cada enlace es proporcional al número que se desplaza por él, y la altura de cada nodo es proporcional al total que pasa a través de él.

El nombre viene del capitán Sankey, que dibujó la eficiencia de una máquina de vapor con flechas cuyo ancho era proporcional a la pérdida de calor. La contabilidad de la energía es la razón de que la regla de conservación esté integrada: el calor que entra en una máquina tiene que ir a alguna parte, y el diagrama se construyó para mostrar adónde.

¿Qué hace distinta a la regla de conservación frente a otros gráficos?

Un gráfico de barras deja que cada barra sea independiente. Un Sankey no.

La formulación más clara de esto vive en el contrato de la API de d3-sankey, el layout del que deriva el propio código de Sankey de Google. Su documentación define el valor del nodo así:

node.value - the node's value; this is the sum of link.value
             for the node's incoming links, or node.fixedValue
             if defined

De ahí se siguen dos consecuencias directas. Primera, link.width es proporcional a link.value y node.y1 - node.y0 es proporcional a node.value, así que no puedes inflar una banda sin encoger otra. Segunda, si tus datos no cuadran, el layout no te avisa. Recalcula el nodo a partir de los enlaces que le hayas dado y dibuja una imagen coherente de un conjunto de datos incoherente.

Por eso el abandono hay que modelarlo de forma explícita. Si 1,000 sesiones entran en una página de carrito y 600 continúan al checkout, un Sankey con un único enlace saliente de 600 redibujará en silencio el nodo del carrito como un nodo de 600 unidades. Las 400 que se fueron no aparecen como una pérdida, aparecen como si nunca hubieran existido. Tienes que añadir un nodo de salida que lleve 400 para que la imagen diga la verdad.

La otra restricción estructural está en la primera línea de la documentación de d3-sankey: visualiza "the directed flow between nodes in an acyclic network". Acíclico significa sin bucles. Los recorridos de usuario hacen bucles constantemente.

¿Dónde ayuda un Sankey en analítica?

Donde la pregunta va sobre ramificación, y donde las ramas importan tanto como el tronco.

Un embudo responde bien a una pregunta: cuántos sobrevivieron a cada paso, en un orden fijo que definiste de antemano. Un Sankey responde a otra distinta: adónde fue realmente cada uno. Cuatro casos en los que esa es la mejor pregunta:

• De fuente de tráfico a página de destino a resultado. Un embudo lo reduce a una tasa de conversión por canal. Un Sankey muestra que un canal se concentra en una sola página de destino mientras otro se reparte entre doce, lo que cambia qué arreglas.
• Checkouts con varias rutas. El checkout como invitado, el checkout con cuenta y el pago exprés son tres ramas, no tres pasos. Un Sankey las mantiene separadas hasta el final.
• De búsqueda a resultado a acción. Tipo de consulta a la izquierda, categoría de resultado en el medio, acción a la derecha, con la banda de sin acción dibujada a ancho completo en lugar de omitida.
• Migración de plan o de categoría. De qué plan vino cada mejora, a cuál fue cada bajada, todo en una imagen.

La propiedad compartida es el movimiento de muchos a muchos. La documentación de Google dice lo mismo: los sankeys se usan mejor para "a many-to-many mapping between two domains" o "multiple paths through a set of stages". Donde el movimiento es uno a uno y ordenado, un análisis de embudos lleva la misma información con menos tinta.

¿Dónde engaña un Sankey?

De cuatro maneras concretas, todas nacidas del choque entre la regla de conservación y unos datos reales desordenados.

Los bucles se aplanan en anchura. Como el layout exige un grafo acíclico, un visitante que va a inicio, producto, inicio, producto genera dos nodos de inicio distintos en dos pasos distintos. La página de producto parece dos destinos separados y la misma página aparece dos veces en una sola imagen. Los números no tienen nada de malo. La forma sugiere exploración donde la realidad es una persona yendo y viniendo.

El truncado rompe la aritmética. Los informes de rutas limitan cuántos nodos muestran por paso. La exploración de rutas de GA4 muestra los 5 nodos principales por defecto, deja ampliar a 20 y agrupa todo lo demás en un nodo "Others". En cuanto una cola se pliega en "Others" o se descarta, los anchos dejan de representar a la población, y la banda más ancha del paso cuatro es la más ancha entre los supervivientes en vez de la más ancha en total.

Las salidas son invisibles a menos que las construyas. Es el mismo fallo del ejemplo del carrito de más arriba, y es la razón más común de que un Sankey se vea más sano que el negocio. Cada etapa necesita un enlace de salida explícito o la imagen se renormaliza en silencio alrededor de quien continuó. Contrasta los anchos con tu tasa de drop-off antes de enseñarle el diagrama a nadie.

La posición horizontal es orden, no tiempo. Las columnas son pasos. Un hueco de tres segundos y uno de tres días ocupan la misma distancia. Un recorrido que se ve fluido en un Sankey puede contener un parón de dos días que el layout no tiene forma de expresar.

¿Qué herramientas de analítica dibujan uno?

Menos de las que sugiere la popularidad del término, y la documentación de Google se contradice justo en este punto.

La contradicción merece leerse dos veces. La página de Sankey de Google Charts usa Google Analytics como ejemplo del tipo de gráfico en uso, diciendo que así es como "Google Analytics uses sankeys to show how traffic flows from pages to other pages on your web site". La página de ayuda de GA4 sobre la exploración de rutas describe esa misma función como un árbol. Un árbol y un Sankey no son el mismo objeto: en un árbol, cada nodo tiene exactamente un padre, así que los flujos se dividen pero nunca se vuelven a unir. En un Sankey, dos fuentes pueden fundirse en un nodo. Esa diferencia decide si el informe puede decirte que dos canales convergen en la misma página.

Google Charts también lleva su propio aviso en la página: "The sankey chart may be undergoing substantial revisions in future Google Charts releases."

¿Cómo construyes uno que no mienta?

Cinco reglas, todas sobre los datos y no sobre el dibujo.

1. Añade nodos de salida en cada etapa. Si una etapa tiene 1,000 entradas y 600 salidas, el tercer enlace es una salida de 400 unidades. Sin él, el diagrama se renormaliza.
2. Fija la unidad antes de empezar. Las sesiones y los usuarios producen imágenes distintas, porque un usuario aporta varias sesiones y un diagrama a nivel de usuario fusiona rutas que uno a nivel de sesión mantiene separadas. Decide cuál, etiquétalo y nunca mezcles los dos en un mismo gráfico. La distinción es la misma que hay detrás de páginas vistas, sesiones y usuarios.
3. Agrupa antes de truncar. Colapsa /product/* en un nodo de forma deliberada en lugar de dejar que la herramienta descarte la cola. Una agrupación diseñada conserva la aritmética; un truncado la destruye.
4. Limita los pasos. Cuatro o cinco columnas es el límite legible. Más allá, las bandas se cruzan tanto que ningún lector puede seguir una ruta, y la propiedad de conservación deja de verse aunque siga cumpliéndose.
5. Reconstruye desde la secuencia en bruto. Los datos de origen de un Sankey correcto son a nivel de hit, ordenados por identificador y marca de tiempo, que es exactamente la forma de los datos de clickstream. Los informes agregados ya han tirado el orden que el gráfico necesita.

Un Sankey construido así y un informe de flujo de usuarios responden a la misma pregunta, pero solo uno de los dos te muestra el tamaño de lo que perdiste en cada paso.

Preguntas frecuentes

¿Cuál es la diferencia entre un diagrama de Sankey y un gráfico de embudo?

Un embudo asume una única ruta ordenada e informa de la supervivencia en cada paso. Un Sankey muestra todas las rutas tomadas, incluidas las ramas que se vuelven a unir, y escala cada banda a su volumen. Usa un embudo cuando la secuencia es fija y la definiste de antemano. Usa un Sankey cuando lo interesante es dónde se separó la gente.

¿La exploración de rutas de GA4 es un diagrama de Sankey?

La propia documentación de Google responde de las dos maneras. La página de ayuda de GA4 llama árbol a la exploración de rutas. La página de Sankey de Google Charts cita a Google Analytics como ejemplo de sankeys que muestran cómo fluye el tráfico entre páginas. La diferencia de comportamiento es que un árbol no puede mostrar dos fuentes fundiéndose en un nodo.

¿Por qué mi Sankey no cuadra?

Casi siempre porque el abandono no está representado como un enlace. Los layouts basados en d3-sankey derivan el valor de un nodo de la suma de sus enlaces entrantes, así que cualquier población que se va sin un enlace saliente queda absorbida en vez de mostrada. Añade un nodo de salida explícito en cada etapa.

¿Puede un diagrama de Sankey mostrar bucles o visitas de vuelta?

No directamente. d3-sankey está documentado como un layout para redes acíclicas. Las herramientas lo rodean tratando cada paso como su propia columna, así que una página visitada dos veces aparece como dos nodos. Los números siguen siendo correctos y la forma exagera cuántos destinos distintos existen.

¿Cuántos pasos debería mostrar un Sankey?

Cuatro o cinco columnas. Cada columna adicional multiplica el número de bandas que se cruzan, y pasado ese punto los lectores no pueden seguir una ruta individual, lo que elimina la única ventaja que el gráfico tenía sobre una tabla.

¿Un diagrama de Sankey necesita totales iguales a izquierda y derecha?

Sí, si está bien construido. Toda unidad que entra por la columna de más a la izquierda tiene que llegar a algún sitio en la de más a la derecha, incluido un nodo de salida o de abandono. Unos totales desiguales significan que una población se fue del diagrama sin quedar contabilizada.

¿Por qué se llama diagrama de Sankey?

El nombre viene del capitán Sankey, que lo usó para representar la eficiencia de motores de vapor. Dibujaba flechas cuyo ancho era proporcional a la pérdida de calor, y de ahí viene también la regla de conservación: la energía que entra en un motor tiene que ir a alguna parte, y el diagrama se construyó para mostrar adónde.

¿Qué diferencia hay entre un diagrama de Sankey y un gráfico de árbol?

En un gráfico de árbol cada nodo tiene un único padre, así que los caminos se ramifican pero nunca vuelven a unirse. En un diagrama de Sankey, dos fuentes sí pueden converger en un mismo nodo. Esa diferencia es justo lo que está en juego en la exploración de rutas de GA4, que Google describe como un gráfico de árbol aunque la página de Sankey de Google Charts cite a Google Analytics como ejemplo de un Sankey.

¿Qué datos hacen falta para construir un diagrama de Sankey?

Datos a nivel de hit, ordenados por identificador y marca de tiempo, la misma forma que tienen los datos de clickstream. Los informes agregados ya han descartado ese orden, que es justo lo que un Sankey necesita para colocar a cada usuario en el nodo y el enlace correctos.

¿Puede un diagrama de Sankey mostrar cuánto duró cada paso de un recorrido?

No. La posición horizontal en un Sankey representa el orden, no el tiempo transcurrido, así que una diferencia de tres segundos y otra de tres días entre dos pasos ocupan la misma distancia en el gráfico. Un recorrido que parece fluido en un Sankey puede esconder una pausa de varios días que el diagrama no tiene forma de mostrar.