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, vínculos. Es mejor usar Sankeys cuando deseas mostrar una asignación de varios a varios entre dos dominios (p.ej., universidades y 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 de las páginas a otras páginas de tu sitio web).
Para los curiosos, se llaman así por el capitán Sankey, quien creó un diagrama de eficiencia de los motores a vapor en el que se usaban flechas con un ancho proporcional a la pérdida de calor.
Nota: Es posible que el gráfico de Sankey se esté sometiendo a revisiones importantes en versiones futuras de los rankings de Google.
Los diagramas de Sankey se renderizan en el navegador con SVG o VML, el que sea adecuado para el navegador del usuario. El código de diseño Sankey de Google se 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.
Un ejemplo simple
Supongamos que tienes dos categorías, A y B, que se conectan con 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 con X y una conexión mucho más gruesa con 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 de las cuales contenga información sobre una conexión: desde, hacia y por 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 los ciclos en tus datos: si A se vincula a sí misma o a B, que se vincula a C que está vinculado a A, tu gráfico no se renderizará.
Sankeys multinivel
Puedes crear un gráfico de Sankey con varios niveles de conexiones:
Los gráficos de Sankey agregarán niveles adicionales según sea necesario y los colocará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 los nodos y los vínculos. Tanto los nodos como los vínculos pueden tener 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 coloreado 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 matiz, pero con brillos diferentes:
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 del trazo se puede especificar en formato RGB o con nombre en inglés.
var options = {
width: 750,
height: 400,
sankey: {
node: { colors: [ '#a61d4c' ] },
link: { color: { stroke: 'black', strokeWidth: 1 } },
}
};
Personaliza las etiquetas
El texto en los gráficos de Sankey se puede personalizar con sankey.node.label.fontName y Friends:
Esta es la estrofa de opción para el 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 } },
};
Ajuste de 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, configuramos 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 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) | |
|---|---|---|---|---|---|
| Objetivo: | Fuente | Destino | Valor | ... | Roles opcionales |
| Tipo de datos: | cadena | cadena | número | ... | |
| Role: | dominio | dominio | datos | ... | |
| Roles de columna opcionales: | Nada de control |
Nada de control |
Nada de control |
... |
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 iframes). Tipo: booleano
Predeterminado: falso
|
| height |
Altura del gráfico en píxeles. Tipo: Número
Predeterminado: la altura del elemento contenedor
|
| sankey.iterations |
Con los sankeys 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 D3 experimenta con diferentes diseños de nodos y se detiene cuando se realizan Tipo: Número entero
Valor predeterminado: 32
|
| sankey.link |
Controla los atributos de las conexiones entre los 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'
]
}
}
Tipo: objeto
Valor predeterminado: nulo
|
| 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'
]
}
}
Tipo: objeto
Valor predeterminado: nulo
|
| sankey.node.colorMode |
Establece un modo de coloración para los nodos Sankey. Valores posibles:
Tipo: string
Predeterminado: “único”
|
| cuadro de información |
Un objeto con miembros para configurar varios elementos de información sobre la herramienta. Para especificar propiedades de este objeto, puedes usar la notación literal de objeto, como se muestra a continuación: {textStyle: {color: '#FF0000'}, showColorCode: true}
Tipo: objeto
Valor predeterminado: nulo
|
| tooltip.isHtml |
Si la estableces como verdadera, usa información sobre la herramienta renderizada por 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 HTML de la información sobre la herramienta mediante el rol de datos de la columna de información no es compatible con la visualización del diagrama 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 este formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Tipo: objeto
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| width |
Es el ancho del gráfico (en píxeles). Tipo: Número
Predeterminado: Ancho del elemento contenedor
|
Métodos
| Método | |
|---|---|
draw(data, options) |
Dibuja el gráfico. El gráfico acepta más llamadas de método solo después de que se activa el evento Tipo de datos que se muestra: ninguno
|
getBoundingBox(id) |
Muestra un objeto que contiene las partes izquierda, superior, ancho y altura del elemento
Los valores están relacionados con el contenedor del gráfico. Llámalo después de que se dibuje el gráfico. Tipo de datos que se muestra: objeto
|
getSelection() |
Muestra un array de las entidades del gráfico seleccionadas.
Las entidades seleccionables son barras, entradas de leyenda y categorías.
Para este gráfico, solo se puede seleccionar una entidad en un momento determinado.
Tipo de datos que se muestra: Es el array de elementos de selección.
|
setSelection() |
Selecciona las entidades del gráfico especificadas. Cancela cualquier selección anterior.
Las entidades seleccionables son barras, entradas de leyenda 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 sus recursos asignados. Tipo de datos que se muestra: ninguno
|
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 fila y columna del elemento de tabla de datos correspondiente. Una barra se correlaciona con una celda de la tabla de datos, una leyenda en una columna (el índice de fila es nulo) y una categoría con una fila (el índice de la columna es nulo). Propiedades:fila, columna
|
onmouseout |
Se activa cuando el usuario aleja el mouse de una entidad visual. Devuelve los índices de filas y columnas del elemento de tabla de datos correspondiente. Una barra se correlaciona con una celda de la tabla de datos, una leyenda en una columna (el índice de fila es nulo) y una categoría con una fila (el índice de la columna es nulo). Propiedades:fila, columna
|
ready |
El gráfico está listo para llamadas de método externas. 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é se seleccionó, llama a Propiedades: ninguna
|
Política de Datos
Todo el código y los datos se procesan y renderizan en el navegador. No se envían datos a ningún servidor.