Descripción general
Un diagrama de Sankey es una visualización que representa un flujo de un conjunto de valores a otro. Lo que se conecta se denomina nodos y las conexiones se denominan vínculos. Los Sankeys se usan mejor cuando quieres mostrar una asignación de varios a varios entre dos dominios (p.ej., universidades y centros) o varias rutas a través de un conjunto de etapas (por ejemplo, Google Analytics usa Sankeys para mostrar cómo fluye el tráfico de las páginas a otras páginas en tu sitio web).
Los curiosos reciben su nombre por el Capitán Sankey, que creó un diagrama de eficiencia del motor de vapor que usó flechas con anchos proporcionales a la pérdida de calor.
Nota: Es posible que Google Charts esté experimentando importantes revisiones en futuras versiones de los rankings.
Los diagramas de Sankey se renderizan en el navegador con SVG o VML, lo que sea apropiado para el navegador del usuario. El código de diseño Sankey de Google deriva del código de diseño Sankey de D3.
Nota: Los gráficos de Google Sankey no están disponibles en Microsoft Internet Explorer 8 ni en versiones anteriores.
Un ejemplo simple
Supongamos que tienes dos categorías, A y B, que se conectan a otras tres categorías: X, Y y Z. Algunas de esas conexiones son más pesadas que otras. Por ejemplo, B tiene una conexión delgada a X y una conexión mucho más gruesa a Y.
Coloca el cursor sobre uno de los vínculos para destacar la conexión.
Para crear un gráfico de Sankey, proporciona un conjunto de filas, cada una de las cuales contenga información sobre una conexión: desde, hacia y peso. Luego, usa el método google.visualization.Sankey() para inicializar el gráfico y, luego, el método draw() para renderizarlo:
<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>
Nota: Evita ciclos en tus datos: si A se vincula a sí mismo o a B, que se vincula a C y a A, no se renderizará el gráfico.
Sankeys multinivel
Puedes crear un gráfico de Sankey con varios niveles de conexiones:
Los gráficos Sankey agregarán niveles adicionales según sea necesario y los distribuirán automáticamente. Este es el código completo del gráfico anterior:
<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>
Cómo controlar los colores
Los gráficos de Sankey tienen la capacidad de establecer colores personalizados para los nodos y
vínculos. Tanto los nodos como los vínculos pueden recibir paletas de colores personalizadas con las opciones de colors (sankey.node.colors y sankey.link.colors, respectivamente). También se les pueden dar diferentes modos de color mediante la opción colorMode.
Si no se personalizan, se establece de forma predeterminada la paleta estándar de Material.
var colors = ['#a6cee3', '#b2df8a', '#fb9a99', '#fdbf6f',
'#cab2d6', '#ffff99', '#1f78b4', '#33a02c'];
var options = {
height: 400,
sankey: {
node: {
colors: colors
},
link: {
colorMode: 'gradient',
colors: colors
}
}
};
Puedes controlar los colores de los vínculos, los nodos y las etiquetas con las opciones de configuración. Aquí, seleccionamos tres con el mismo tono, pero diferentes brillos:
A continuación, te mostramos cómo se ven esas opciones:
var options = {
width: 600,
sankey: {
link: { color: { fill: '#d799ae' } },
node: { colors: [ '#a61d4c' ],
label: { color: '#871b47' } },
}
};
También puedes controlar la transparencia de los vínculos con la opción sankey.link.color.fillOpacity:
var options = {
width: 600,
sankey: {
link: { color: { fill: '#d799ae', fillOpacity: 0.8 } },
node: { colors: [ '#a61d4c' ],
label: { color: '#871b47' } },
}
};
Para crear un borde alrededor de los vínculos, usa las opciones sankey.link.color.stroke y sankey.link.color.strokeWidth:
El color de trazo se puede especificar en formato RGB o por nombre de inglés.
var options = {
width: 750,
height: 400,
sankey: {
node: { colors: [ '#a61d4c' ] },
link: { color: { stroke: 'black', strokeWidth: 1 } },
}
};
Cómo personalizar las etiquetas
El texto en los gráficos de Sankey se puede personalizar con sankey.node.label.fontName y amigos:
Esta es la estrofa de opción del gráfico anterior:
var options = {
width: 600,
sankey: {
node: { label: { fontName: 'Times-Roman',
fontSize: 14,
color: '#871b47',
bold: true,
italic: true } } },
};
Puedes ajustar la posición de las etiquetas en relación con los nodos con la opción sankey.node.labelPadding:
En el gráfico anterior, agregamos 30 píxeles de padding entre las etiquetas y los nodos.
var options = {
width: 600,
sankey: { node: { labelPadding: 30 } },
};
Cómo ajustar los nodos
Puedes controlar el ancho de los nodos con sankey.node.width:
Arriba, establecemos el ancho del nodo en 2.
var options = {
width: 600,
sankey: { node: { width: 2 } },
};
Puedes ajustar la distancia entre los nodos con sankey.node.nodePadding:
En el gráfico anterior, establecemos sankey.node.nodePadding en 80.
var options = {
width: 900,
sankey: { node: { nodePadding: 80 } },
};
Cargando
El nombre del paquete google.charts.load es "sankey":
google.charts.load("current" {packages: ["sankey"]});
El nombre de clase de la visualización es google.visualization.Sankey:
var visualization = new google.visualization.Sankey(container);
Formato de los datos
Filas: Cada fila de la tabla representa una conexión entre dos etiquetas. La tercera columna indica la intensidad de esa conexión y se reflejará en el ancho de la ruta entre las etiquetas.
Columnas:
| Columna 0 | Columna 1 | Columna 2 | … | Columna N (opcional) | |
|---|---|---|---|---|---|
| Propósito: | Origen | Destino | Valor | … | Roles opcionales |
| Tipo de datos: | cadena | cadena | número | … | |
| Rol: | dominio | dominio | datos | … | |
| Roles de columna opcionales: | Ninguno |
Ninguno |
Ninguno |
… |
Opciones de configuración
| Nombre | |
|---|---|
| fuerzaIFrame |
Dibuja el gráfico dentro de un marco intercalado. (Ten en cuenta que, en IE8, esta opción se ignora; todos los gráficos de IE8 se dibujan en i-frames). Tipo: booleano
Predeterminado: falso
|
| alto |
Altura del gráfico, en píxeles. Tipo: número
Predeterminado: altura del elemento que lo contiene
|
| sankey.iterations |
En el caso de los Sankeys de varios niveles, a veces no es evidente dónde se deben colocar los nodos para facilitar la lectura. El motor de diseño D3 experimenta con diferentes diseños de nodos y se detiene cuando se realizan Tipo: Número entero
Predeterminado: 32
|
| sankey.link. |
Controla los atributos de las conexiones entre nodos. Actualmente, todos los atributos se relacionan con el color:
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:
Configuración predeterminada: null
|
| sankey.link.colorMode |
Establece un modo de coloración para los vínculos entre los nodos. Valores posibles:
Esta opción anula sankey.link.color. Tipo: string
Configuración predeterminada: "ninguna"
|
| sankey.node |
Controla los atributos de los nodos (las barras verticales entre los vínculos):
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:
Configuración predeterminada: null
|
| sankey.node.colorMode. |
Establece un modo de coloración para los nodos Sansan. Valores posibles:
Tipo: string
Configuración predeterminada: “única”
|
| información sobre la herramienta |
Un objeto con miembros para configurar varios elementos de información sobre la herramienta. Para especificar las propiedades de este objeto, puedes usar la notación literal de objeto, como se muestra a continuación: {textStyle: {color: '#FF0000'}, showColorCode: true}
Type:
Configuración predeterminada: null
|
| tooltip.isHtml |
Si se establece como verdadera, usa información sobre la herramienta de renderización HTML (en lugar de SVG). Consulta Cómo personalizar el contenido de la información sobre la herramienta para obtener más detalles. Nota: La personalización del contenido de la herramienta de HTML mediante la función de datos de la columna de información sobre la herramienta no es compatible con la visualización del gráfico de burbujas. Tipo: booleano
Predeterminado: falso
|
| tooltip.textStyle. |
Un objeto que especifica el estilo de texto de la información sobre la herramienta. El objeto tiene el siguiente formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Type:
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| ancho |
Es el ancho del gráfico, en píxeles. Tipo: número
Predeterminado: ancho del elemento que contiene
|
Métodos
| Método | |
|---|---|
draw(data, options) |
Dibuja el gráfico. El gráfico acepta más llamadas a métodos después de que se activa el evento Tipo de devolución: ninguna
|
getBoundingBox(id) |
Muestra un objeto que contiene los elementos izquierdo, superior, ancho y alto del elemento de gráfico
Los valores son relativos al contenedor del gráfico. Llámelo después de que se dibuje el gráfico. Return Type: Objeto
|
getSelection() |
Muestra un array de las entidades del gráfico seleccionadas.
Las entidades seleccionables son barras, entradas de leyendas y categorías.
En este gráfico, solo se puede seleccionar una entidad por momento.
Tipo de datos que se muestra: Es el array de los elementos de la selección.
|
setSelection() |
Selecciona las entidades de gráfico especificadas. Cancela cualquier selección anterior.
Las entidades seleccionables son barras, entradas de leyendas y categorías.
Para este gráfico, solo se puede seleccionar una entidad a la vez.
Tipo de devolución: ninguna
|
clearChart() |
Borra el gráfico y libera todos sus recursos asignados. Tipo de devolución: ninguna
|
Eventos
| Nombre | |
|---|---|
error |
Se activa cuando se produce un error cuando se intenta renderizar el gráfico. Propiedades: id, mensaje
|
onmouseover |
Se activa cuando el usuario desplaza el mouse sobre una entidad visual. Devuelve los índices de filas y columnas del elemento de la tabla de datos correspondiente. Una barra se correlaciona con una celda en la tabla de datos, una entrada de leyenda a una columna (el índice de fila es nulo) y una categoría a una fila (el índice de columna es nulo). Propiedades: fila, columna
|
onmouseout |
Se activa cuando el usuario abandona una entidad visual. Pasa los índices de fila y columna del elemento de la tabla de datos correspondiente. Una barra se correlaciona con una celda en la tabla de datos, una entrada de leyenda a una columna (el índice de fila es nulo) y una categoría a una fila (el índice de columna es nulo). Propiedades: fila, columna
|
ready |
El gráfico está listo para las llamadas a métodos externos. Si deseas interactuar con el gráfico y llamar a los métodos después de dibujarlo, debes configurar un objeto de escucha para este evento antes de llamar al método Propiedades: ninguna
|
select |
Se activa cuando el usuario hace clic en una entidad visual. Para conocer lo que se seleccionó, llama a Propiedades: ninguna
|
Política de datos
El código y los datos se procesan y procesan en el navegador. No se envían datos a ningún servidor.