O que um diagrama de Sankey mostra e um funil não consegue

O que é um diagrama de Sankey?

Todo diagrama de Sankey obedece a uma regra que nenhum outro gráfico impõe: a quantidade que entra em um nó é igual à quantidade que sai dele, então a largura das faixas se conserva de uma ponta à outra da figura. A documentação de gráficos do Google traz a definição simples, de que um diagrama de Sankey é "a visualization used to depict a flow from one set of values to another", em que "the things being connected are called nodes and the connections are called links".

Essa é toda a gramática. Nós são etapas, categorias ou páginas. Links são o movimento entre eles. A largura de cada link é proporcional ao número de pessoas que se movem por ele, e a altura de cada nó é proporcional ao total que passa por ali.

O nome vem do capitão Sankey, que desenhou a eficiência de máquinas a vapor usando setas cuja largura era proporcional à perda de calor. A contabilidade de energia é o motivo de a regra de conservação estar embutida: o calor que entra em uma máquina precisa ir para algum lugar, e o diagrama foi feito para mostrar para onde.

O que torna a regra de conservação diferente de outros gráficos?

Um gráfico de barras deixa cada barra ser independente. Um Sankey não.

A formulação mais clara disso está no contrato de API do d3-sankey, o layout do qual deriva o próprio código de sankey do Google. A documentação dele define o valor do nó assim:

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

Duas consequências vêm direto daí. Primeiro, link.width é proporcional a link.value e node.y1 - node.y0 é proporcional a node.value, então você não consegue inflar uma faixa sem encolher outra. Segundo, se seus dados não fecham, o layout não avisa. Ele recalcula o nó a partir dos links que você forneceu e desenha uma figura coerente de um conjunto de dados incoerente.

É por isso que o abandono precisa ser modelado de forma explícita. Se 1,000 sessões entram em uma página de carrinho e 600 seguem para o checkout, um Sankey com um único link de saída de 600 vai redesenhar o nó do carrinho como um nó de 600 unidades, sem avisar ninguém. As 400 que saíram não aparecem como perda, aparecem como se nunca tivessem existido. Você precisa acrescentar um nó de saída carregando 400 para a figura contar a verdade.

A outra restrição estrutural está na primeira linha da documentação do d3-sankey: ele visualiza "the directed flow between nodes in an acyclic network". Acíclico significa sem ciclos. Jornadas de usuário formam ciclos o tempo todo.

Onde um Sankey ajuda na análise?

Onde a pergunta é sobre ramificação, e onde os ramos importam tanto quanto o tronco.

Um funil responde bem a uma pergunta: quantos sobreviveram a cada etapa, em uma ordem fixa que você definiu de antemão. Um Sankey responde a outra: para onde todo mundo foi de verdade. Quatro casos em que essa é a pergunta melhor:

• Origem de tráfego, página de destino e desfecho. Um funil reduz isso a uma taxa de conversão por canal. Um Sankey mostra que um canal se concentra em uma única página de destino enquanto outro se espalha por doze, o que muda o que você conserta.
• Checkouts com vários caminhos. Checkout como convidado, checkout com conta e pagamento expresso são três ramos, não três etapas. Um Sankey mantém os três separados até o fim.
• Busca, resultado e ação. Tipo de consulta à esquerda, categoria do resultado no meio, ação à direita, com a faixa de nenhuma ação desenhada em largura cheia em vez de omitida.
• Migração de plano ou categoria. De qual plano veio cada upgrade, para qual foi cada downgrade, tudo em uma figura só.

A propriedade comum é o movimento de muitos para muitos. A documentação do Google diz o mesmo: sankeys funcionam melhor para "a many-to-many mapping between two domains" ou "multiple paths through a set of stages". Onde o movimento é de um para um e ordenado, uma análise de funil carrega a mesma informação com menos tinta.

Onde um Sankey engana?

De quatro formas específicas, todas nascidas do encontro entre a regra de conservação e dados reais bagunçados.

Ciclos viram largura. Como o layout exige um grafo acíclico, um visitante que vai para home, produto, home, produto produz dois nós de home distintos em duas etapas distintas. A página de produto parece dois destinos separados e a mesma página aparece duas vezes na mesma figura. Não há nada errado com os números. O formato sugere exploração onde a realidade é uma pessoa indo e voltando.

A truncagem quebra a aritmética. Relatórios de caminho limitam quantos nós mostram por etapa. A exploração de caminho do GA4 mostra os 5 principais nós por padrão, permite expandir para 20 e agrupa todo o resto em um nó "Others". No momento em que uma cauda é dobrada em "Others" ou descartada, as larguras deixam de representar a população, e a faixa mais larga na etapa quatro passa a ser a mais larga entre os sobreviventes, não a mais larga no geral.

As saídas são invisíveis a menos que você as construa. Essa é a mesma falha do exemplo do carrinho acima, e é o motivo mais comum de um Sankey parecer mais saudável que o negócio. Cada etapa precisa de um link de saída explícito, ou a figura renormaliza em silêncio em torno de quem seguiu adiante. Confira as larguras contra sua taxa de abandono antes de mostrar o diagrama para alguém.

A posição horizontal é ordem, não tempo. Colunas são etapas. Um intervalo de três segundos e um intervalo de três dias ocupam a mesma distância. Uma jornada que parece suave em um Sankey pode conter uma parada de dois dias que o layout não tem como expressar.

Quais ferramentas de analytics desenham um?

Menos do que a popularidade do termo sugere, e a documentação do Google se contradiz exatamente nesse ponto.

A contradição merece ser lida duas vezes. A página de sankey do Google Charts usa o Google Analytics como exemplo do tipo de gráfico em uso, dizendo que "Google Analytics uses sankeys to show how traffic flows from pages to other pages on your web site". A página de ajuda do GA4 sobre exploração de caminho descreve o mesmo recurso como tree graph. Uma árvore e um Sankey não são o mesmo objeto: em uma árvore, cada nó tem exatamente um pai, então os fluxos se dividem mas nunca voltam a se juntar. Em um Sankey, duas origens podem se fundir em um nó. Essa diferença decide se o relatório consegue dizer que dois canais convergem para a mesma página.

O Google Charts ainda carrega o próprio aviso na página: "The sankey chart may be undergoing substantial revisions in future Google Charts releases."

Como construir um que não minta?

Cinco regras, todas sobre os dados e não sobre o desenho.

1. Acrescente nós de saída em cada etapa. Se uma etapa tem 1,000 entrando e 600 saindo, o terceiro link é uma saída de 400 unidades. Sem ele, o diagrama renormaliza.
2. Fixe a unidade antes de começar. Sessões e usuários produzem figuras diferentes, porque um usuário contribui com várias sessões e um diagrama em nível de usuário funde caminhos que um diagrama em nível de sessão mantém separados. Decida qual usar, rotule e nunca misture os dois em um gráfico. A distinção é a mesma por trás de pageviews, sessões e usuários.
3. Agrupe antes de truncar. Colapse /product/* em um nó de propósito, em vez de deixar a ferramenta descartar a cauda. Um agrupamento planejado preserva a aritmética; uma truncagem a destrói.
4. Limite as etapas. Quatro ou cinco colunas é o limite legível. Além disso, as faixas se cruzam tanto que nenhum leitor consegue seguir um caminho, e a propriedade de conservação deixa de ser visível mesmo continuando válida.
5. Reconstrua a partir da sequência bruta. Os dados de origem de um Sankey correto são em nível de hit, ordenados por identificador e carimbo de tempo, que é exatamente o formato dos dados de clickstream. Relatórios agregados já jogaram fora a ordenação de que o gráfico precisa.

Um Sankey construído assim e um relatório de fluxo de usuário respondem à mesma pergunta, mas só um deles mostra o tamanho do que você perdeu em cada etapa.

Perguntas frequentes

Qual é a diferença entre um diagrama de Sankey e um gráfico de funil?

Um funil pressupõe um caminho ordenado e reporta a sobrevivência em cada etapa. Um Sankey mostra todo caminho percorrido, inclusive ramos que voltam a se juntar, e dimensiona cada faixa pelo volume dela. Use um funil quando a sequência é fixa e você a definiu de antemão. Use um Sankey quando a parte interessante é onde as pessoas divergiram.

A exploração de caminho do GA4 é um diagrama de Sankey?

A documentação do próprio Google responde das duas formas. A página de ajuda do GA4 chama a exploração de caminho de tree graph. A página de sankey do Google Charts cita o Google Analytics como exemplo de sankeys mostrando como o tráfego flui entre páginas. A diferença de comportamento é que uma árvore não consegue mostrar duas origens se fundindo em um nó.

Por que meu Sankey não fecha a conta?

Quase sempre porque o abandono não está representado como um link. Layouts baseados no d3-sankey derivam o valor de um nó da soma dos links de entrada dele, então qualquer população que sai sem um link de saída é absorvida em vez de exibida. Acrescente um nó de saída explícito em cada etapa.

Um diagrama de Sankey consegue mostrar ciclos ou visitas de retorno?

Não diretamente. O d3-sankey está documentado como um layout para redes acíclicas. As ferramentas contornam isso tratando cada etapa como uma coluna própria, então uma página visitada duas vezes aparece como dois nós. Os números continuam corretos e o formato exagera quantos destinos distintos existem.

Quantas etapas um Sankey deve mostrar?

Quatro ou cinco colunas. Cada coluna a mais multiplica o número de faixas que se cruzam, e a partir de certo ponto os leitores não conseguem seguir um caminho individual, o que elimina a única vantagem que o gráfico tinha sobre uma tabela.

Um diagrama de Sankey precisa de totais iguais à esquerda e à direita?

Sim, se estiver construído corretamente. Toda unidade que entra na coluna mais à esquerda precisa chegar a algum lugar na coluna mais à direita, inclusive a um nó de saída ou de churn. Totais desiguais significam que uma população saiu do diagrama sem ser contabilizada.

Por que se chama diagrama de Sankey?

O nome vem do capitão Sankey, que o usou para representar a eficiência de motores a vapor. Ele desenhava setas cuja largura era proporcional à perda de calor, e é daí que também vem a regra de conservação: a energia que entra em um motor tem que ir para algum lugar, e o diagrama foi criado para mostrar para onde.

Qual é a diferença entre um diagrama de Sankey e um gráfico de árvore?

Em um gráfico de árvore, cada nó tem apenas um pai, então os caminhos se ramificam mas nunca se reencontram. Em um diagrama de Sankey, duas origens podem convergir para o mesmo nó. Essa diferença é exatamente o que está em jogo na exploração de caminho do GA4, que o Google descreve como um gráfico de árvore, embora a página de Sankey do Google Charts cite o Google Analytics como exemplo de um sankey.

Que dados são necessários para construir um diagrama de Sankey?

Dados no nível de hit, ordenados por identificador e timestamp, a mesma forma dos dados de clickstream. Relatórios agregados já descartaram essa ordem, que é justamente o que um sankey precisa para colocar cada usuário no nó e no link certos.

Um diagrama de Sankey consegue mostrar quanto tempo durou cada etapa de uma jornada?

Não. A posição horizontal em um sankey representa a ordem, não o tempo decorrido, então um intervalo de três segundos e um de três dias entre duas etapas ocupam a mesma distância no gráfico. Uma jornada que parece fluida em um sankey pode esconder uma parada de vários dias que o diagrama não tem como mostrar.