Panoramica
Un diagramma di Sankey è una visualizzazione utilizzata per rappresentare un flusso da un insieme di valori a un altro. Gli elementi connessi vengono chiamati nodi e le connessioni vengono chiamate link. Le Sankey sono ideali quando vuoi mostrare una mappatura many-to-many tra due domini (ad es.università e principali) o più percorsi attraverso una serie di fasi (ad es. Google Analytics utilizza le sankey per mostrare come il traffico passa dalle pagine ad altre pagine del tuo sito web).
Per curiosità prendono il nome dal capitano Sankey, che creò un diagramma dell'efficienza dei motori a vapore che utilizzava frecce di larghezza proporzionale alla dispersione di calore.
Nota: il grafico delle sanzioni potrebbe essere soggetto a revisioni sostanziali nelle prossime versioni di Google Class.
I diagrammi di Sankey vengono visualizzati nel browser utilizzando SVG o VML, a seconda di quale risulti appropriato per il browser dell'utente. Il codice di layout sankey di Google ricava il codice di layout sankey di D3.
Nota: i grafici con le sankey di Google non sono disponibili in Microsoft Internet Explorer 8 e nelle versioni precedenti.
Esempio semplice
Supponi di avere due categorie, A e B, che si collegano 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 delle condizioni, fornisci un insieme di righe, ciascuna contenente informazioni su una connessione: da, a e peso. Quindi utilizza il metodo google.visualization.Sankey() per inizializzare il grafico e poi il metodo draw() per eseguire il rendering:
<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 di cicli nei tuoi dati: se A rimanda a se stesso o ai link B che rimandano a C e A, il grafico non viene visualizzato.
Sankey multilivello
Puoi creare un grafico Sankey con più livelli di connessioni:
I grafici Sankey aggiungono ulteriori livelli in base alle necessità, disposti automaticamente. Ecco il codice completo per il grafico 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 Sankey possono impostare colori personalizzati per nodi e link. Sia ai nodi che ai link possono essere fornite tavolozze dei colori personalizzate utilizzando
le relative opzioni colors (sankey.node.colors e sankey.link.colors). Possono essere
anche offerte diverse modalità di colorazione utilizzando l'opzione
colorMode.
Se i colori non sono personalizzati, viene usata per impostazione predefinita la tavolozza dei materiali 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 utilizzando le opzioni di configurazione. Ne selezioniamo tre con la stessa tonalità, ma con luminosità diverse:
Ecco come si presentano queste opzioni:
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 attorno ai link, usa le opzioni sankey.link.color.stroke e sankey.link.color.strokeWidth:
Il colore del tratto può essere specificato in formato RGB o in nome inglese.
var options = {
width: 750,
height: 400,
sankey: {
node: { colors: [ '#a61d4c' ] },
link: { color: { stroke: 'black', strokeWidth: 1 } },
}
};
Personalizzare le etichette
Il testo sui grafici di emergenza può essere personalizzato
utilizzando sankey.node.label.fontName e i suoi amici:
Di seguito è riportata la rappresentazione dell'opzione per il grafico riportato sopra:
var options = {
width: 600,
sankey: {
node: { label: { fontName: 'Times-Roman',
fontSize: 14,
color: '#871b47',
bold: true,
italic: true } } },
};
Puoi regolare la posizione delle etichette rispetto ai nodi con l'opzione sankey.node.labelPadding:
Nel grafico sopra, abbiamo aggiunto 30 pixel di spaziatura interna tra le etichette e i nodi.
var options = {
width: 600,
sankey: { node: { labelPadding: 30 } },
};
Regolare i nodi
Puoi controllare la larghezza dei nodi con sankey.node.width:
Sopra, impostiamo 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 sopra, abbiamo impostato sankey.node.nodePadding su 80.
var options = {
width: 900,
sankey: { node: { nodePadding: 80 } },
};
Caricamento
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) | |
|---|---|---|---|---|---|
| Finalità: | Origine | Destinazione | Valore | … | Ruoli facoltativi |
| Tipo di dati: | stringa | stringa | numero | … | |
| Ruolo: | dominio | dominio | dati | … | |
| Ruoli di colonna facoltativi: | Assente |
Assente |
Assente |
… |
Opzioni di configurazione
| Nome | |
|---|---|
| Forza iframe |
Disegna il grafico all'interno di un frame in linea. (Tieni presente che su IE8 questa opzione viene ignorata, mentre tutti i grafici IE8 vengono tracciati negli i-frames.) Tipo: booleano
Predefinito: falso
|
| altezza |
Altezza del grafico, in pixel. Tipo: numero
Predefinito: altezza dell'elemento contenitore
|
| sankey.iterations |
Con le sansh multilivello, a volte non è evidente dove posizionare i nodi per una leggibilità ottimale. Il motore del layout D3 prova layout dei nodi diversi, interrompendosi quando vengono eseguiti Tipo: numero intero
Predefinito: 32
|
| link sankey. |
Controlla gli attributi delle connessioni tra i 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
Valore predefinito: null
|
| sankey.link.colorMode |
Imposta una modalità di colorazione per i collegamenti tra nodi. Valori possibili:
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
Valore predefinito: null
|
| sankey.node.colorMode |
Imposta una modalità di colorazione per i nodi sankey. Valori possibili:
Tipo: stringa
Predefinito: "univoco"
|
| descrizione comando |
Un oggetto con membri per configurare i vari elementi della descrizione comando. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale dell'oggetto, come mostrato di seguito: {textStyle: {color: '#FF0000'}, showColorCode: true}
Tipo: oggetto
Valore predefinito: null
|
| tooltip.isHTML |
Se è impostata su true, utilizza le descrizioni comando HTML-rendering (anziché rendering SVG). Per ulteriori dettagli, consulta Personalizzazione del contenuto della descrizione comando. Nota: la personalizzazione dei contenuti della descrizione comando HTML tramite il ruolo di dati della colonna Descrizione comando non è supportata dalla visualizzazione del grafico a bolle. Tipo: booleano
Predefinito: falso
|
| tooltip.textStyle |
Un oggetto che specifica lo stile del testo della descrizione comando. L'oggetto ha questo formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Tipo: oggetto
Predefinito:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| width |
Larghezza del grafico, in pixel. Tipo: numero
Predefinito: larghezza dell'elemento che lo contiene
|
Metodi
| Metodo | |
|---|---|
draw(data, options) |
Disegna il grafico. Il grafico accetta ulteriori chiamate di metodo solo dopo l'attivazione dell'evento Tipo di reso:nessuno
|
getBoundingBox(id) |
Restituisce un oggetto contenente la parte sinistra, superiore, larghezza e altezza dell'elemento grafico
I valori sono relativi al contenitore del grafico. Chiamalo dopo il disegno del grafico. Tipo di ritorno: oggetto
|
getSelection() |
Restituisce una matrice 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.
Tipo di ritorno:array di elementi di selezione.
|
setSelection() |
Seleziona le entità del grafico specificate. Annulla qualsiasi selezione precedente.
Le entità selezionabili sono barre, voci di legenda e categorie.
Per questo grafico, è possibile selezionare una sola entità alla volta.
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. Properties: id (messaggio): id
|
onmouseover |
Attivato quando l'utente passa il mouse sopra un'entità visiva. Ritrae gli indici delle righe e delle colonne dell'elemento della tabella di dati corrispondente. Una barra è correlata a una cella della tabella dati, una voce di legenda a una colonna (l'indice della riga è null) e una categoria a una riga (l'indice della colonna è null). Proprietà: riga, colonna
|
onmouseout |
Attivato quando l'utente allontana il mouse da un'entità visiva. Ritrae gli indici di riga e colonna dell'elemento della tabella di dati corrispondente. Una barra è correlata a una cella della tabella dati, una voce di legenda a una colonna (l'indice della riga è null) e una categoria a una riga (l'indice della colonna è null). Proprietà: riga, colonna
|
ready |
Il grafico è pronto per le chiamate ai metodi esterni. Se vuoi interagire con il grafico e chiamare i metodi dopo averlo tracciato, devi impostare un listener per questo evento prima di chiamare il metodo Proprietà: nessuna
|
select |
Attivato quando l'utente fa clic su un'entità visiva. Per sapere cosa è stato selezionato, chiama
Proprietà: nessuna
|
Norme sui dati
Tutto il codice e i dati vengono elaborati e visualizzati nel browser. Nessun dato viene inviato ad alcun server.