Descripción general
Un diagrama de Sankey es una visualización que se usa para representar un flujo de un conjunto de valores a otro. Los elementos que se conectan se denominan nodos y las conexiones se denominan vínculos. Los Sankeys son más útiles cuando deseas mostrar una asignación de varios a varios entre dos dominios (p.ej., universidades y centros de golf principales) 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 desde las páginas hacia otras páginas en tu sitio web).
Las personas más curiosas llevan el nombre de Capitán Sankey, quien creó un diagrama de eficiencia de motor de vapor que usó flechas con anchos proporcionales a la pérdida de calor.
Nota: Es posible que Google Charts esté sometido a revisiones significativas en futuras versiones de los rankings.
Los diagramas de Sankey se renderizan en el navegador mediante SVG o VML, lo que sea adecuado para el navegador del usuario. El código de diseño de Sankey de Google deriva del código de diseño Sankey de D3.
Nota: Los gráficos de sankey de Google no están disponibles en Microsoft Internet Explorer 8 y versiones anteriores.
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.
Intenta colocar 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 con información acerca de 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() a fin de 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 los ciclos en tus datos: Si A se vincula a sí mismo, o a B, que se vincula a C y a A, no se procesará el gráfico.
Sankeys de varios niveles
Puedes crear un gráfico de Sankey con varios niveles de conexión:
Los gráficos de 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>
Control de colores
Los gráficos de Sankey tienen la capacidad de establecer colores personalizados para nodos y vínculos. Tanto los nodos como los vínculos pueden recibir paletas de colores personalizadas mediante sus opciones de colors (sankey.node.colors y sankey.link.colors, respectivamente). También se les pueden asignar diferentes modos de colorado con la opción colorMode.
Si los colores no están personalizados, se usará la paleta estándar de Material de forma predeterminada.
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 con brillos diferentes:
A continuación, le 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 en 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 opción de estrofa 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: | Fuente | Destino | Valor | … | Funciones opcionales |
| Tipo de datos: | string | string | número | … | |
| Rol: | dominio | dominio | datos | … | |
| Funciones de columna opcionales: | Ninguno |
Ninguno |
Ninguno |
… |
Opciones de configuración
| Nombre | |
|---|---|
| forceIFrame |
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
Valor predeterminado: falso
|
| alto |
Altura del gráfico, en píxeles. Tipo: número
Predeterminado: altura del elemento que lo contiene
|
| iteraciones de sankey.iterations |
Con lossankeys de varios niveles, a veces no es evidente dónde se deben colocar los nodos para lograr una legibilidad óptima. El motor de diseño de 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 corresponden al 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:
Valor predeterminado: null
|
| sankey.link.colorMode, |
Establece un modo de coloración para los vínculos entre 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:
Valor predeterminado: null
|
| sankey.node.colorMode, |
Establece un modo de coloración para los nodos Sankey. Valores posibles:
Tipo: string
Predeterminado: “unique”
|
| 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 objetos, como se muestra aquí: {textStyle: {color: '#FF0000'}, showColorCode: true}
Type:
Valor predeterminado: null
|
| tooltip.isHtml |
Si estableces la política como verdadera, usa información sobre la herramienta procesada con 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 información sobre la herramienta de HTML a través de la función de datos de la columna de información sobre la herramienta no es compatible con la visualización del cuadro de burbujas. Tipo: booleano
Valor predeterminado: falso
|
| tooltip.textStyle |
Un objeto que especifica el estilo de texto de la información sobre la herramienta. El objeto tiene este formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Type:
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| ancho |
Ancho del gráfico en píxeles. Tipo: número
Predeterminado: ancho del elemento que lo 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 datos que se muestra: ninguno
|
getBoundingBox(id) |
Muestra un objeto que contiene la izquierda, la parte superior, el ancho y la altura 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 arreglo de las entidades del gráfico seleccionadas.
Las entidades que se pueden seleccionar son barras, entradas de leyendas y categorías.
Para este gráfico, solo se puede seleccionar una entidad por momento.
Tipo de datos que se muestra: arreglo de elementos de selección
|
setSelection() |
Selecciona las entidades del gráfico especificadas. Cancela cualquier selección anterior.
Las entidades que se pueden seleccionar son barras, entradas de leyendas y categorías.
Para este gráfico, solo se puede seleccionar una entidad a la vez.
Tipo de datos que se muestra: ninguno
|
clearChart() |
Borra el gráfico y libera todos los recursos asignados. Tipo de datos que se muestra: ninguno
|
Eventos
| Nombre | |
|---|---|
error |
Se activa cuando se produce un error cuando se intenta procesar el gráfico. Propiedades: ID, mensaje
|
onmouseover |
Se activa cuando el usuario desplaza el mouse sobre una entidad visual. Devuelve los índices de fila y de columna del elemento de tabla de datos correspondiente. Una barra se correlaciona con una celda en la tabla de datos, una entrada de leyenda en una columna (el índice de fila es nulo) y una categoría en una fila (el índice de la columna es nulo). Properties: Row, Column
|
onmouseout |
Se activa cuando el usuario se aleja del mouse de una entidad visual. Vuelve a pasar los índices de fila y columna del elemento de tabla de datos correspondiente. Una barra se correlaciona con una celda en la tabla de datos, una entrada de leyenda en una columna (el índice de fila es nulo) y una categoría en una fila (el índice de la columna es nulo). Properties: Row, Column
|
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 saber qué elementos se seleccionaron, 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.