Visão geral
Um diagrama de 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. O Sankeys é melhor usado quando você quer mostrar um mapeamento de muitos para muitos entre dois domínios (por exemplo, universidades e grandes empresas) ou vários caminhos em um conjunto de etapas (por exemplo, o Google Analytics usa Sankeys para mostrar como o tráfego flui de páginas para outras páginas no seu site).
Para os curiosos, eles são nomeados em homenagem ao 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 diagrama de Sankey pode estar passando por revisões substanciais em futuras versões do Google Charts.
Os diagramas de Sankey são renderizados no navegador usando SVG ou VML, 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 diagramas 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 cursor sobre um dos links para destacar a conexão.
Para criar um diagrama de Sankey, forneça um conjunto de linhas, 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, em seguida, 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 estiver vinculada a si mesma ou a B, que está vinculada a C que está vinculada a A, o gráfico não será renderizado.
Sankeys multinível
É possível criar um diagrama de Sankey com vários níveis de conexões:
Os diagramas de Sankey vão adicionar outros níveis conforme necessário, colocando-os automaticamente. Confira 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>
Controlar cores
Os diagramas de 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 de colors (sankey.node.colors e sankey.link.colors, respectivamente). Eles também podem receber diferentes modos de coloração usando a opção colorMode.
Se as cores não forem personalizadas, o padrão será a paleta do Material Design padrão.
var colors = ['#a6cee3', '#b2df8a', '#fb9a99', '#fdbf6f',
'#cab2d6', '#ffff99', '#1f78b4', '#33a02c'];
var options = {
height: 400,
sankey: {
node: {
colors: colors
},
link: {
colorMode: 'gradient',
colors: colors
}
}
};
Você pode controlar as cores dos links, nós e rótulos com as opções de configuração. Aqui, selecionamos três com a mesma matiz, mas brilhos diferentes:
Veja como são essas opções:
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 ao redor 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 rótulos
O texto em diagramas de Sankey pode ser personalizado
usando sankey.node.label.fontName e amigos:
Esta é a estrofe de opção para o 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 será refletida na largura do caminho entre os rótulos.
Columns:
| Coluna 0 | Coluna 1 | Coluna 2 | ... | Coluna N (opcional) | |
|---|---|---|---|---|---|
| Finalidade: | Fonte | Destino | Valor | ... | Papéis opcionais |
| Tipo de dados: | string | string | number | ... | |
| Role: | domínio | domínio | dados | ... | |
| Papéis de coluna opcionais: | Nenhum controle |
Nenhum controle |
Nenhum controle |
... |
Opções de configuração
| Nome | |
|---|---|
| forceIFrame |
Desenha o gráfico dentro de um frame inline. No IE8, essa opção é ignorada. Todos os gráficos do IE8 são desenhados em i-frames. Tipo: booleano
Padrão:false
|
| height |
Altura do gráfico, em pixels. Tipo: número
Padrão:altura do elemento contêiner
|
| sankey.iterations |
Com Sankey multinível, às vezes, não é óbvio onde os nós precisam ser colocados para melhor
legibilidade. Os experimentos do mecanismo de layout D3 com diferentes layouts de nó são interrompidos quando
Tipo: inteiro
Padrão:32
|
| sankey.link |
Controla os atributos das conexões entre os nós. Atualmente, todos os atributos pertencem a 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'
]
}
}
Tipo: objeto
Padrão:nulo
|
| sankey.link.colorMode |
Define um modo de coloração para os vínculos entre os nós. Valores possíveis:
Essa opção substitui sankey.link.color. Tipo: string
Padrão: 'none'
|
| sankey.node |
Controla os 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'
]
}
}
Tipo: objeto
Padrão:nulo
|
| sankey.node.colorMode |
Define um modo de coloração para os nós Sankey. Valores possíveis:
Tipo: string
Padrão: 'unique'
|
| dica |
Um objeto com membros para configurar vários elementos de dica. Para especificar as propriedades desse objeto, use a notação literal de objeto, como mostrado aqui: {textStyle: {color: '#FF0000'}, showColorCode: true}
Tipo: 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 da dica para mais detalhes. Observação:a personalização do conteúdo da dica HTML pelo papel de dados da coluna de dicas não é compatível com a visualização do gráfico de bolhas. Tipo: booleano
Padrão:false
|
| tooltip.textStyle |
Um objeto que especifica o estilo do texto da dica. O objeto tem este formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
O Tipo: objeto
Padrão:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| width |
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 Return Type: nenhum
|
getBoundingBox(id) |
Retorna um objeto que contém as informações de esquerda, parte superior, largura e altura do elemento
Os valores são relativos ao contêiner do gráfico. Chame essa função depois que o gráfico for 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.
Neste gráfico, apenas uma entidade pode ser selecionada por vez.
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.
Neste gráfico, apenas uma entidade pode ser selecionada por vez.
Return Type: nenhum
|
clearChart() |
Limpa o gráfico e libera todos os recursos alocados. Return Type: nenhum
|
Eventos
| Nome | |
|---|---|
error |
Disparado quando ocorre um erro ao tentar renderizar o gráfico. Properties:ID, message
|
onmouseover |
Disparado quando o usuário passa o mouse sobre uma entidade visual. Transmite os índices de linha e coluna do elemento da tabela de dados correspondente. Uma barra correlaciona-se a uma célula na tabela de dados, uma entrada de legenda para uma coluna (o índice de 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 os índices de linha e coluna do elemento da tabela de dados correspondente. Uma barra correlaciona-se a uma célula na tabela de dados, uma entrada de legenda para uma coluna (o índice de 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 Properties:nenhuma
|
select |
Disparado quando o usuário clica em uma entidade visual. Para saber o que foi selecionado, chame
Properties:nenhuma
|
Política de dados
Todos os códigos e dados são processados e renderizados no navegador. Nenhum dado é enviado para nenhum servidor.