Diagrama de Sankey

Stay organized with collections Save and categorize content based on your preferences.

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 sankey.iterations intentos. Cuanto más grande sea este número, más atractivo será el diseño de los sankeys complejos, pero viene con un costo: los sankeys tardarán más en renderizarse. Por el contrario, cuanto más bajo sea este número, más rápido se mostrarán sus gráficos.

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:

  • 'source': El color del nodo de origen se usa para los vínculos a todos los nodos de destino.
  • 'target': El color del nodo de destino se usa para el vínculo a los nodos de origen.
  • 'gradient': El vínculo entre un nodo de origen y uno de destino tiene un color como un gradiente que va desde el color del nodo fuente hasta el color del nodo objetivo.
  • 'none': Es la opción predeterminada. Los colores del vínculo se establecerán en el valor predeterminado (o un color según se especifica en las opciones sankey.link.color.fill y sankey.link.color.fillOpacity).

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:

  • 'unique': Cada nodo recibirá un color único.
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> }
    

color puede ser cualquier string de color HTML, por ejemplo: 'red' o '#00cc00'. Consulta también fontName y fontSize.

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 ready. Extended description

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 id. El formato para id aún no está documentado (son los valores de retorno de los controladores de eventos), pero estos son algunos ejemplos:

var cli = chart.getChartLayoutInterface();

Altura del área del gráfico
cli.getBoundingBox('chartarea').height
Ancho de la tercera barra en la primera serie de un gráfico de barras o columnas
cli.getBoundingBox('bar#0#2').width
Cuadro de límite de la quinta cuña de un gráfico circular
cli.getBoundingBox('slice#4')
Cuadro de límite de los datos de gráfico de un gráfico vertical (p.ej., columna)
cli.getBoundingBox('vAxis#0#gridline')
Cuadro de límite de los datos de gráfico de un gráfico horizontal (p.ej., barra)
cli.getBoundingBox('hAxis#0#gridline')

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. Extended description.

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. Extended description.

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 draw y llamarlo solo después de que se active el evento.

Propiedades: ninguna
select

Se activa cuando el usuario hace clic en una entidad visual. Para saber qué elementos se seleccionaron, llama a getSelection().

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.