Diagramma di Sankey

  1. Panoramica
  2. Esempio semplice
  3. Sankey multilivello
  4. Controllo dei colori
  5. Personalizzazione dei caratteri
  6. Regolazione dei nodi
  7. Caricamento in corso…
  8. Formato dei dati
  9. Opzioni di configurazione
  10. Metodi
  11. Eventi
  12. Norme sui dati

Panoramica

Un diagramma di Sankey è una visualizzazione utilizzata per rappresentare un flusso da un insieme di valori a un altro. Gli elementi collegati sono chiamati nodi e le connessioni sono chiamate link. I Sankey sono ideali per mostrare una mappatura many-to-many tra due domini (ad es. università e principali) o più percorsi tramite un insieme di fasi (ad esempio, Google Analytics utilizza i Sankey per mostrare il flusso del traffico da pagine ad altre pagine del sito web).

Più curiosi prendono il nome dal capitano Sankey, che ha creato uno diagramma dell'efficienza di un motore a vapore utilizzando frecce con larghezze proporzionali alla perdita di calore.

Nota: il grafico di Sankey potrebbe subire modifiche sostanziali nelle versioni future di Google Classifiche.

I diagrammi di Sankey vengono visualizzati nel browser tramite SVG o VML, a seconda di quale sia appropriato per il browser dell'utente. Il codice del layout Sankey di Google deriva dal codice di layout Sankey di D3.

Nota: i grafici di Sankey di Google non sono disponibili in Microsoft Internet Explorer 8 e versioni precedenti.

Esempio semplice

Supponiamo che tu abbia due categorie, A e B, collegate ad altre tre categorie, X, Y e Z. Alcune di queste connessioni sono più pesanti di altre. Ad esempio, B ha una connessione sottile a X e una connessione molto più spessa a Y.

Prova a passare il mouse sopra uno dei link per evidenziare la connessione.

Per creare un grafico di Sankey, fornisci un insieme di righe, ognuna contenente informazioni su una connessione: da, A e peso. A questo punto, utilizza il metodo google.visualization.Sankey() per inizializzare il grafico e il metodo draw() per visualizzarlo:

<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 cicli nei dati: se A si collega a se stesso o a B che rimanda a C e ad A, il grafico non verrà visualizzato.

Sankey multilivello

Puoi creare un grafico di Sankey con più livelli di connessioni:

I grafici di Sankey aggiungono ulteriori livelli in base alle esigenze, li dispongono automaticamente. Ecco il codice completo del grafico riportato sopra:

<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>

Controllo dei colori

I grafici di Sankey consentono di impostare colori personalizzati per nodi e link. È possibile assegnare tavolozze dei colori personalizzate sia ai nodi che ai link utilizzando le opzioni colors (rispettivamente sankey.node.colors e sankey.link.colors). È anche possibile avere diverse modalità di colorazione utilizzando l'opzione colorMode.

Se i colori non vengono personalizzati, vengono usati per impostazione predefinita la tavolozza Materiale standard.

    var colors = ['#a6cee3', '#b2df8a', '#fb9a99', '#fdbf6f',
                  '#cab2d6', '#ffff99', '#1f78b4', '#33a02c'];

    var options = {
      height: 400,
      sankey: {
        node: {
          colors: colors
        },
        link: {
          colorMode: 'gradient',
          colors: colors
        }
      }
    };

Puoi controllare i colori di link, nodi ed etichette tramite le opzioni di configurazione. Qui ne selezioniamo tre con la stessa tonalità, ma con luminosità diverse:

Queste opzioni hanno questo aspetto:

    var options = {
      width: 600,
      sankey: {
        link: { color: { fill: '#d799ae' } },
        node: { colors: [ '#a61d4c' ],
                label: { color: '#871b47' } },
      }
    };

Puoi anche controllare la trasparenza dei link con l'opzione sankey.link.color.fillOpacity:

    var options = {
      width: 600,
      sankey: {
        link: { color: { fill: '#d799ae', fillOpacity: 0.8 } },
        node: { colors: [ '#a61d4c' ],
                label: { color: '#871b47' } },
      }
    };

Per creare un bordo intorno ai link, utilizza le opzioni sankey.link.color.stroke e sankey.link.color.strokeWidth:

Il colore del tratto può essere specificato in formato RGB o con un nome in inglese.

    var options = {
      width: 750,
      height: 400,
      sankey: {
        node: { colors: [ '#a61d4c' ] },
        link: { color: { stroke: 'black', strokeWidth: 1 } },
      }
    };

Personalizzazione delle etichette

Il testo nei grafici di Sankey può essere personalizzato con sankey.node.label.fontName e amici:

Questa è l'opzione stanza per la tabella riportata sopra:

    var options = {
      width: 600,
      sankey: {
        node: { label: { fontName: 'Times-Roman',
                         fontSize: 14,
                         color: '#871b47',
                         bold: true,
                         italic: true } } },
    };

Puoi modificare la posizione delle etichette rispetto ai nodi con l'opzione sankey.node.labelPadding:

Nel grafico in alto, abbiamo aggiunto 30 pixel di spaziatura interna tra le etichette e i nodi.

    var options = {
      width: 600,
      sankey: { node: { labelPadding: 30 } },
    };

Regolazione dei nodi

Puoi controllare la larghezza dei nodi con sankey.node.width:

Sopra, abbiamo impostato la larghezza del nodo su 2.

    var options = {
      width: 600,
      sankey: { node: { width: 2 } },
    };

Puoi regolare la distanza tra i nodi con sankey.node.nodePadding:

Nel grafico in alto, abbiamo impostato sankey.node.nodePadding su 80.

    var options = {
      width: 900,
      sankey: { node: { nodePadding: 80 } },
    };

Caricamento in corso...

Il nome del pacchetto google.charts.load è "sankey": 

  google.charts.load("current" {packages: ["sankey"]});

Il nome della classe della visualizzazione è google.visualization.Sankey: 

  var visualization = new google.visualization.Sankey(container);

Formato dei dati

Righe: ogni riga della tabella rappresenta una connessione tra due etichette. La terza colonna indica la forza della connessione e si rifletterà nella larghezza del percorso tra le etichette.

Colonne:

  Colonna 0 Colonna 1 Colonna 2 ... Colonna N (facoltativa)
Scopo: Origine Destinazione Valore ... Ruoli facoltativi
Tipo di dati: stringa stringa numero ...
Ruolo: dominio dominio dati ...
Ruoli colonna facoltativi:

Assente

Assente

Assente

 ...

 

Opzioni di configurazione

Nome
forceIFrame

Disegna il grafico all'interno di un frame in linea. Tieni presente che in IE8 questa opzione viene ignorata; tutti i grafici di IE8 vengono tracciati in i-frame.

Tipo: booleano
Predefinito:false
altezza

Altezza del grafico, in pixel.

Tipo:numero
Predefinita: altezza dell'elemento contenitore
sankey.iterations

Con i valori di Sankey multilivello, a volte non è ovvio stabilire dove posizionare i nodi per una leggibilità ottimale. Il motore di layout D3 sperimenta con layout dei nodi diversi, interrompendosi dopo sankey.iterations tentativi. Più questo numero è elevato, più gradevole sarà il layout dei grafici di Sankey complessi, ma ha un costo: il rendering dei Sankey richiederà più tempo. Al contrario, più breve è questo numero, più velocemente verranno visualizzati i grafici.

Tipo: numero intero
Predefinito:32
sankey.link

Controlla gli attributi delle connessioni tra nodi. Attualmente tutti gli attributi riguardano il colore: 

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:oggetto
Predefinito:null
sankey.link.colorMode

Imposta una modalità di colorazione per i collegamenti tra nodi. Valori possibili:

  • 'source' - Il colore del nodo di origine viene utilizzato per i link a tutti i nodi di destinazione.
  • 'target' - Il colore del nodo target viene utilizzato per il collegamento ai suoi nodi di origine.
  • 'gradient' - Il collegamento tra un nodo di origine e un nodo target viene colorato sotto forma di gradiente dal colore del nodo di origine al colore del nodo target.
  • 'none': l'opzione predefinita; i colori dei link verranno impostati sul valore predefinito (o su un colore specificato dalle opzioni sankey.link.color.fill e sankey.link.color.fillOpacity).

Questa opzione sostituisce sankey.link.color.

Tipo:stringa
Predefinito: "nessuno"
sankey.node

Controlla gli attributi dei nodi (le barre verticali tra i link):

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:oggetto
Predefinito:null
sankey.node.colorMode

Imposta una modalità di colorazione per i nodi di Sankey. Valori possibili:

  • 'unique' - Ogni nodo riceverà un colore univoco.
Tipo:stringa
Predefinito: "univoco"
Descrizione comando

Un oggetto con membri per configurare vari elementi della descrizione comando. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale oggetto, come mostrato qui: 

{textStyle: {color: '#FF0000'}, showColorCode: true}
Tipo:oggetto
Predefinito:null
tooltip.isHtml

Se il criterio viene impostato su true, utilizza le descrizioni comando per il rendering HTML (anziché SVG). Per ulteriori dettagli, consulta Personalizzazione dei contenuti della descrizione comando.

Nota: la personalizzazione dei contenuti della descrizione comando HTML tramite il ruolo dei dati della colonna della descrizione comando non è supportata dalla visualizzazione Grafico a bolle.

Tipo: booleano
Predefinito:false
tooltip.textStyle

Un oggetto che specifica lo stile di testo della descrizione comando. L'oggetto ha questo formato:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color può essere qualsiasi stringa di colore HTML, ad esempio 'red' o '#00cc00'. Vedi anche fontName e fontSize.

Tipo:oggetto
Predefinita: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
larghezza

Larghezza del grafico, in pixel.

Tipo:numero
Predefinita: larghezza dell'elemento contenitore

Metodi

Metodo
draw(data, options)

Disegna il grafico. Il grafico accetta ulteriori chiamate di metodo solo dopo che è stato attivato l'evento ready. Extended description.

Tipo di reso: nessuno
getBoundingBox(id)

Restituisce un oggetto contenente i valori sinistra, superiore, larghezza e altezza dell'elemento del grafico id. Il formato per id non è ancora documentato (sono i valori restituiti dei gestori di eventi), ma ecco alcuni esempi:

var cli = chart.getChartLayoutInterface();

Altezza dell'area del grafico
cli.getBoundingBox('chartarea').height
Larghezza della terza barra nella prima serie di un grafico a barre o a colonne
cli.getBoundingBox('bar#0#2').width
Riquadro di delimitazione del quinto segmento di un grafico a torta
cli.getBoundingBox('slice#4')
Riquadro di delimitazione dei dati di un grafico verticale (ad es. a colonne):
cli.getBoundingBox('vAxis#0#gridline')
Riquadro di delimitazione dei dati di un grafico orizzontale (ad es. a barre):
cli.getBoundingBox('hAxis#0#gridline')

I valori sono relativi al contenitore del grafico. Viene chiamato dopo che il grafico è stato disegnato.

Tipo restituito: oggetto
getSelection()

Restituisce un array delle entità del grafico selezionate. Le entità selezionabili sono barre, voci di legenda e categorie. Per questo grafico, è possibile selezionare una sola entità alla volta. Extended description

Tipo restituito: array di elementi di selezione
setSelection()

Seleziona le entità del grafico specificate. Annulla la selezione precedente. Le entità selezionabili sono barre, voci di legenda e categorie. Per questo grafico è possibile selezionare una sola entità alla volta. Extended description

Tipo di reso: nessuno
clearChart()

Cancella il grafico e rilascia tutte le risorse allocate.

Tipo di reso: nessuno

Eventi

Nome
error

Attivato quando si verifica un errore durante il tentativo di rendering del grafico.

Proprietà: id, messaggio
onmouseover

Attivato quando l'utente passa il mouse sopra un'entità visiva. Restituisce gli indici di righe e colonne dell'elemento della tabella di dati corrispondente. Una barra è correlata a una cella nella tabella dati, a una voce di legenda a una colonna (l'indice di riga è nullo) e a una categoria a una riga (l'indice di colonna è nullo).

Proprietà:riga, colonna
onmouseout

Attivato quando l'utente allontana il mouse dall'entità visiva. Restituisce gli indici di righe e colonne dell'elemento della tabella di dati corrispondente. Una barra è correlata a una cella nella tabella dati, a una voce di legenda a una colonna (l'indice di riga è nullo) e a una categoria a una riga (l'indice di colonna è nullo).

Proprietà:riga, colonna
ready

Il grafico è pronto per le chiamate di metodi esterne. Se vuoi interagire con il grafico e richiamare i metodi dopo averlo tracciato, devi impostare un listener per questo evento prima di chiamare il metodo draw e richiamarli solo dopo l'attivazione dell'evento.

Proprietà:nessuna
select

Attivato quando l'utente fa clic su un'entità visiva. Per sapere quali elementi sono stati selezionati, chiama getSelection().

Proprietà:nessuna

Norme sui dati

Tutto il codice e i dati vengono elaborati e visualizzati nel browser. Nessun dato viene inviato a nessun server.