Diagrama de Sankey

Visão geral

Um diagrama "sankey" é uma visualização usada para representar um fluxo de um conjunto de valores para outro. Os elementos conectados são chamados de nós e as conexões são chamadas de links. As sankeys são mais usadas quando você quer mostrar um mapeamento de muitos para muitos entre dois domínios (por exemplo, universidades e majors) ou vários caminhos por um conjunto de estágios (por exemplo, o Google Analytics usa sankeys para mostrar como o tráfego flui das páginas para outras páginas no seu website).

Para os curiosos, eles têm o nome do capitão Sankey, que criou um diagrama de eficiência do motor a vapor que usava setas com larguras proporcionais à perda de calor.

Observação: o gráfico de integridade pode estar passando por revisões significativas em versões futuras do Google Charts.

Os diagramas de Sankey são renderizados no navegador usando SVG ou VML (links em inglês), o que for apropriado para o navegador do usuário. O código de layout sankey do Google é derivado do código de layout sankey do D3.

Observação: os gráficos de sankey do Google não estão disponíveis no Microsoft Internet Explorer 8 e em versões anteriores.

Um exemplo simples

Suponha que você tenha duas categorias, A e B, que se conectam a três outras categorias, X, Y e Z. Algumas dessas conexões são mais pesadas do que outras. Por exemplo, B tem uma conexão fina com X e uma conexão muito mais grossa com Y.


Passe o mouse sobre um dos links para destacar a conexão.

Para criar um gráfico de sankey, forneça um conjunto de linhas com cada uma contendo informações sobre uma conexão: de, para e peso. Em seguida, use o método google.visualization.Sankey() para inicializar o gráfico e o método draw() para renderizá-lo:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['sankey']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'From');
        data.addColumn('string', 'To');
        data.addColumn('number', 'Weight');
        data.addRows([
          [ 'A', 'X', 5 ],
          [ 'A', 'Y', 7 ],
          [ 'A', 'Z', 6 ],
          [ 'B', 'X', 2 ],
          [ 'B', 'Y', 9 ],
          [ 'B', 'Z', 4 ]
        ]);

        // Sets chart options.
        var options = {
          width: 600,
        };

        // Instantiates and draws our chart, passing in some options.
        var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="sankey_basic" style="width: 900px; height: 300px;"></div>
  </body>
</html>

Observação: evite ciclos nos seus dados: se A for vinculado a si mesmo ou B for vinculado a C e estiver vinculado a A, o gráfico não será renderizado.

Sankeys multinível

Você pode criar um gráfico Sankey com vários níveis de conexões:

Os gráficos do Sankey adicionarão mais níveis conforme necessário, exibindo-os automaticamente. Veja o código completo do gráfico acima:

<html>
<body>
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id="sankey_multiple" style="width: 900px; height: 300px;"></div>

<script type="text/javascript">
  google.charts.load("current", {packages:["sankey"]});
  google.charts.setOnLoadCallback(drawChart);
   function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'From');
    data.addColumn('string', 'To');
    data.addColumn('number', 'Weight');
    data.addRows([
       [ 'Brazil', 'Portugal', 5 ],
       [ 'Brazil', 'France', 1 ],
       [ 'Brazil', 'Spain', 1 ],
       [ 'Brazil', 'England', 1 ],
       [ 'Canada', 'Portugal', 1 ],
       [ 'Canada', 'France', 5 ],
       [ 'Canada', 'England', 1 ],
       [ 'Mexico', 'Portugal', 1 ],
       [ 'Mexico', 'France', 1 ],
       [ 'Mexico', 'Spain', 5 ],
       [ 'Mexico', 'England', 1 ],
       [ 'USA', 'Portugal', 1 ],
       [ 'USA', 'France', 1 ],
       [ 'USA', 'Spain', 1 ],
       [ 'USA', 'England', 5 ],
       [ 'Portugal', 'Angola', 2 ],
       [ 'Portugal', 'Senegal', 1 ],
       [ 'Portugal', 'Morocco', 1 ],
       [ 'Portugal', 'South Africa', 3 ],
       [ 'France', 'Angola', 1 ],
       [ 'France', 'Senegal', 3 ],
       [ 'France', 'Mali', 3 ],
       [ 'France', 'Morocco', 3 ],
       [ 'France', 'South Africa', 1 ],
       [ 'Spain', 'Senegal', 1 ],
       [ 'Spain', 'Morocco', 3 ],
       [ 'Spain', 'South Africa', 1 ],
       [ 'England', 'Angola', 1 ],
       [ 'England', 'Senegal', 1 ],
       [ 'England', 'Morocco', 2 ],
       [ 'England', 'South Africa', 7 ],
       [ 'South Africa', 'China', 5 ],
       [ 'South Africa', 'India', 1 ],
       [ 'South Africa', 'Japan', 3 ],
       [ 'Angola', 'China', 5 ],
       [ 'Angola', 'India', 1 ],
       [ 'Angola', 'Japan', 3 ],
       [ 'Senegal', 'China', 5 ],
       [ 'Senegal', 'India', 1 ],
       [ 'Senegal', 'Japan', 3 ],
       [ 'Mali', 'China', 5 ],
       [ 'Mali', 'India', 1 ],
       [ 'Mali', 'Japan', 3 ],
       [ 'Morocco', 'China', 5 ],
       [ 'Morocco', 'India', 1 ],
       [ 'Morocco', 'Japan', 3 ]
    ]);

    // Set chart options
    var options = {
      width: 600,
    };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.Sankey(document.getElementById('sankey_multiple'));
    chart.draw(data, options);
   }
</script>
</body>
</html>

Como controlar cores

Os gráficos do Sankey podem definir cores personalizadas para nós e links. Os nós e os links podem receber paletas de cores personalizadas usando as opções colors (sankey.node.colors e sankey.link.colors, respectivamente). Eles também podem receber modos de coloração diferentes usando a opção colorMode.

Se as cores não forem personalizadas, o padrão será a paleta padrão do Material Design.

    var colors = ['#a6cee3', '#b2df8a', '#fb9a99', '#fdbf6f',
                  '#cab2d6', '#ffff99', '#1f78b4', '#33a02c'];

    var options = {
      height: 400,
      sankey: {
        node: {
          colors: colors
        },
        link: {
          colorMode: 'gradient',
          colors: colors
        }
      }
    };

É possível controlar as cores dos links, nós e rótulos com as opções de configuração. Aqui selecionamos três com a mesma tonalidade, mas com brilhos diferentes:

Veja como essas opções são exibidas:

    var options = {
      width: 600,
      sankey: {
        link: { color: { fill: '#d799ae' } },
        node: { colors: [ '#a61d4c' ],
                label: { color: '#871b47' } },
      }
    };

Também é possível controlar a transparência dos links com a opção sankey.link.color.fillOpacity:

    var options = {
      width: 600,
      sankey: {
        link: { color: { fill: '#d799ae', fillOpacity: 0.8 } },
        node: { colors: [ '#a61d4c' ],
                label: { color: '#871b47' } },
      }
    };

Para criar uma borda em torno dos links, use as opções sankey.link.color.stroke e sankey.link.color.strokeWidth:

A cor do traço pode ser especificada no formato RGB ou pelo nome em inglês.

    var options = {
      width: 750,
      height: 400,
      sankey: {
        node: { colors: [ '#a61d4c' ] },
        link: { color: { stroke: 'black', strokeWidth: 1 } },
      }
    };

Personalizar marcadores

O texto em gráficos de sankey pode ser personalizado com sankey.node.label.fontName e amigos:

Esta é a estrofe da opção do gráfico acima:

    var options = {
      width: 600,
      sankey: {
        node: { label: { fontName: 'Times-Roman',
                         fontSize: 14,
                         color: '#871b47',
                         bold: true,
                         italic: true } } },
    };

É possível ajustar a posição dos rótulos em relação aos nós com a opção sankey.node.labelPadding:

No gráfico acima, adicionamos 30 pixels de preenchimento entre os rótulos e os nós.

    var options = {
      width: 600,
      sankey: { node: { labelPadding: 30 } },
    };

Como ajustar nós

É possível controlar a largura dos nós com sankey.node.width:

Acima, definimos a largura do nó como 2.

    var options = {
      width: 600,
      sankey: { node: { width: 2 } },
    };

É possível ajustar a distância entre os nós com sankey.node.nodePadding:

No gráfico acima, definimos sankey.node.nodePadding como 80.

    var options = {
      width: 900,
      sankey: { node: { nodePadding: 80 } },
    };

Carregando

O nome do pacote google.charts.load é "sankey":

  google.charts.load("current" {packages: ["sankey"]});

O nome da classe da visualização é google.visualization.Sankey:

  var visualization = new google.visualization.Sankey(container);

Formato de dados

Linhas: cada linha na tabela representa uma conexão entre dois rótulos. A terceira coluna indica a intensidade dessa conexão e é refletida na largura do caminho entre os rótulos.

Columns:

  Coluna 0 Coluna 1 Coluna 2 ... Coluna N (opcional)
Finalidade: Origem Destino Valor ... Papéis opcionais
Tipo de dados: string string number ...
Papel: domínio domínio dados ...
Papéis de coluna opcionais:

Nenhum

Nenhum

Nenhum

...

 

Opções de configuração

Nome
FrameIForce

Desenha o gráfico dentro de um frame in-line. No IE8, essa opção é ignorada. Todos os gráficos do IE8 são desenhados em i-frames.

Tipo: booleano
Padrão:falso
altura

Altura do gráfico, em pixels.

Tipo: número
Padrão: altura do elemento que o contém
sankey.iterations

Com sankeys de vários níveis, às vezes não é óbvio onde os nós precisam ser colocados para facilitar a leitura. O mecanismo de layout D3 testa layouts de nós diferentes, parando quando sankey.iterations tentativas são feitas. Quanto maior esse número, mais agradável o layout de sankeys complexas, mas isso tem um custo: a renderização delas será mais demorada. Por outro lado, quanto menor esse número, mais rápido os gráficos serão renderizados.

Tipo: inteiro
Padrão: 32
sankey.link

Controla atributos das conexões entre nós. No momento, todos os atributos pertencem à cor:

sankey: {
  link: {
    color: {
      fill: '#efd',     // Color of the link.
      fillOpacity: 0.8, // Transparency of the link.
      stroke: 'black',  // Color of the link border.
      strokeWidth: 1    // Thickness of the link border (default 0).
    },
    colors: [
      '#a6cee3',        // Custom color palette for sankey links.
      '#1f78b4',        // Nodes will cycle through this palette
      '#b2df8a',        // giving the links for that node the color.
      '#33a02c'
    ]
  }
}
      
Type: objeto
Padrão: nulo
sankey.link.corMode

Define um modo de coloração para os links entre os nós. Valores possíveis:

  • 'source': a cor do nó de origem é usada nos links para todos os nós de destino.
  • 'target': a cor do nó de destino é usada para o link para os nós de origem.
  • 'gradient': o vínculo entre um nó de origem e de destino é colorido como um gradiente da cor do nó de origem para a cor do nó de destino.
  • 'none': a opção padrão. As cores do link serão definidas como padrão (ou uma cor conforme especificado pelas opções sankey.link.color.fill e sankey.link.color.fillOpacity).

Essa opção substitui sankey.link.color.

Tipo: string
Padrão: "none"
sankey.node

Controla atributos dos nós (as barras verticais entre os links):

sankey: {
  node: {
    label: {
      fontName: 'Times-Roman',
      fontSize: 12,
      color: '#000',
      bold: true,
      italic: false
    },
    interactivity: true, // Allows you to select nodes.
    labelPadding: 6,     // Horizontal distance between the label and the node.
    nodePadding: 10,     // Vertical distance between nodes.
    width: 5,            // Thickness of the node.
    colors: [
      '#a6cee3',         // Custom color palette for sankey nodes.
      '#1f78b4',         // Nodes will cycle through this palette
      '#b2df8a',         // giving each node its own color.
      '#33a02c'
    ]
  }
}
      
Type: objeto
Padrão: nulo
sankey.node.colorMode

Define um modo de coloração para os nós de sankey. Valores possíveis:

  • 'unique': cada nó recebe uma cor exclusiva.
Tipo: string
Padrão: "unique"
dica

Um objeto com membros para configurar vários elementos da dica. Para especificar propriedades desse objeto, use a notação literal do objeto, conforme mostrado aqui:

{textStyle: {color: '#FF0000'}, showColorCode: true}
Type: objeto
Padrão: nulo
tooltip.isHtml

Se definida como verdadeira, use dicas renderizadas em HTML (em vez de renderizadas em SVG). Consulte Como personalizar o conteúdo de dicas para mais detalhes.

Observação: a personalização do conteúdo da dica em HTML por meio do papel de dados da coluna de dica não é compatível com a visualização do gráfico de bolhas.

Tipo: booleano
Padrão:falso
tooltip.textStyle

Um objeto que especifica o estilo de texto da dica. O objeto tem este formato:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

O color pode ser qualquer string de cor HTML, por exemplo: 'red' ou '#00cc00'. Consulte também fontName e fontSize.

Type: objeto
Padrão: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
largura

Largura do gráfico, em pixels.

Tipo: número
Padrão: largura do elemento que o contém

Métodos

Método
draw(data, options)

Desenha o gráfico. O gráfico aceita outras chamadas de método somente depois que o evento ready é acionado. Extended description.

Tipo de retorno: nenhum
getBoundingBox(id)

Retorna um objeto que contém o elemento id do gráfico à esquerda, superior, largura e altura. O formato de id ainda não está documentado (são os valores de retorno dos gerenciadores de evento), mas aqui estão alguns exemplos:

var cli = chart.getChartLayoutInterface();

Altura da área do gráfico
cli.getBoundingBox('chartarea').height
Largura da terceira barra na primeira série de um gráfico de barras ou colunas
cli.getBoundingBox('bar#0#2').width
Caixa delimitadora do quinto encaixe de um gráfico de pizza
cli.getBoundingBox('slice#4')
Caixa delimitadora dos dados de um gráfico vertical (por exemplo, coluna):
cli.getBoundingBox('vAxis#0#gridline')
Caixa delimitadora dos dados de um gráfico horizontal (por exemplo, barra):
cli.getBoundingBox('hAxis#0#gridline')

Os valores são relativos ao contêiner do gráfico. Chame essa ação após o gráfico ser desenhado.

Tipo de retorno: objeto
getSelection()

Retorna uma matriz das entidades de gráfico selecionadas. As entidades selecionáveis são barras, entradas de legenda e categorias. Para este gráfico, apenas uma entidade pode ser selecionada por vez. Extended description .

Tipo de retorno: matriz de elementos de seleção
setSelection()

Seleciona as entidades de gráfico especificadas. Cancela qualquer seleção anterior. As entidades selecionáveis são barras, entradas de legenda e categorias. Para este gráfico, apenas uma entidade pode ser selecionada por vez. Extended description .

Tipo de retorno: nenhum
clearChart()

Limpa o gráfico e libera todos os recursos alocados.

Tipo de retorno: nenhum

Eventos

Nome
error

Disparado quando ocorre um erro ao tentar renderizar o gráfico.

Propriedades: ID, mensagem
onmouseover

Disparado quando o usuário passa o mouse sobre uma entidade visual. Transmite de volta os índices de linha e coluna do elemento da tabela de dados correspondente. Uma barra se correlaciona a uma célula da tabela de dados, uma entrada de legenda a uma coluna (o índice da linha é nulo) e uma categoria a uma linha (o índice da coluna é nulo).

Propriedades: linha, coluna
onmouseout

Disparado quando o usuário afasta o mouse de uma entidade visual. Transmite de volta os índices de linha e coluna do elemento de tabela de dados correspondente. Uma barra se correlaciona a uma célula da tabela de dados, uma entrada de legenda a uma coluna (o índice da linha é nulo) e uma categoria a uma linha (o índice da coluna é nulo).

Propriedades: linha, coluna
ready

O gráfico está pronto para chamadas de métodos externos. Se você quiser interagir com o gráfico e chamar métodos depois de desenhá-lo, configure um listener para esse evento antes de chamar o método draw e chame-o somente depois que o evento for acionado.

Propriedades: nenhuma
select

Disparado quando o usuário clica em uma entidade visual. Para saber o que foi selecionado, chame getSelection().

Propriedades: nenhuma

Política de dados

Todos os dados e códigos são processados e renderizados no navegador. Nenhum dado é enviado para nenhum servidor.