Présentation
Un diagramme Sankey est une visualisation utilisée pour illustrer un flux d'un ensemble de valeurs à un autre. Les éléments connectés sont appelés nœuds et les connexions appelées liens. Les clés Sankey sont idéales lorsque vous souhaitez afficher un mappage plusieurs à plusieurs entre deux domaines (par exemple, des universités et des étudiants) ou plusieurs chemins à travers un ensemble d'étapes (par exemple, Google Analytics les utilise pour afficher le flux de trafic entre les pages et les autres pages de votre site Web).
Pour les plus curieux, elles portent le nom du capitaine Sankey, qui a créé un diagramme d'efficacité d'une machine à vapeur utilisant des flèches dont la largeur est proportionnelle à la perte de chaleur.
Remarque:Le diagramme de Sankey est peut-être en train de faire l'objet de révisions importantes dans les futures versions de Google Charts.
Les diagrammes Sankey sont affichés dans le navigateur à l'aide du format SVG ou VML, selon ce qui convient au navigateur de l'utilisateur. Le code de mise en page Sankey de Google est dérivé du code de mise en page Sankey de D3.
Remarque:Les diagrammes de Sankey Google ne sont pas disponibles dans Microsoft Internet Explorer 8 et les versions antérieures.
Exemple simple
Supposons que vous ayez deux catégories, A et B, qui sont reliées à trois autres catégories, X, Y et Z. Certaines de ces connexions sont plus lourdes que d'autres. Par exemple, la connexion de B à X et celle de Y est beaucoup plus épaisse.
Essayez de pointer sur l'un des liens pour mettre en évidence la connexion.
Pour créer un diagramme de Sankey, fournissez un ensemble de lignes, chacune contenant des informations sur une connexion : "De", "Vers" et "Pondération". Utilisez ensuite la méthode google.visualization.Sankey() pour initialiser le graphique, puis la méthode draw() pour l'afficher:
<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>
Remarque : Évitez les cycles de données dans vos données. Si A est relié à lui-même, ou à B, qui renvoie à C, qui renvoie à A, votre graphique ne s'affichera pas.
Sankeys à plusieurs niveaux
Vous pouvez créer un graphique Sankey avec plusieurs niveaux de connexions:
Les graphiques Sankey permettent d'ajouter des niveaux supplémentaires si nécessaire, en les mettant automatiquement en page. Voici le code complet pour le graphique ci-dessus:
<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>
Contrôler les couleurs
Les graphiques Sankey permettent de définir des couleurs personnalisées pour les nœuds et les liens. Des palettes de couleurs personnalisées peuvent être attribuées aux nœuds et aux liens à l'aide des options colors (sankey.node.colors et sankey.link.colors, respectivement). Différents modes de coloration peuvent également leur être attribués à l'aide de l'option colorMode.
Si les couleurs ne sont pas personnalisées, elles utilisent par défaut la palette Material standard.
var colors = ['#a6cee3', '#b2df8a', '#fb9a99', '#fdbf6f',
'#cab2d6', '#ffff99', '#1f78b4', '#33a02c'];
var options = {
height: 400,
sankey: {
node: {
colors: colors
},
link: {
colorMode: 'gradient',
colors: colors
}
}
};
Vous pouvez contrôler la couleur des liens, des nœuds et des libellés à l'aide d'options de configuration. Ici, nous en sélectionnons trois ayant la même teinte, mais des luminosités différentes:
Voici comment se présentent ces options:
var options = {
width: 600,
sankey: {
link: { color: { fill: '#d799ae' } },
node: { colors: [ '#a61d4c' ],
label: { color: '#871b47' } },
}
};
Vous pouvez également contrôler la transparence des liens à l'aide de l'option sankey.link.color.fillOpacity:
var options = {
width: 600,
sankey: {
link: { color: { fill: '#d799ae', fillOpacity: 0.8 } },
node: { colors: [ '#a61d4c' ],
label: { color: '#871b47' } },
}
};
Pour créer une bordure autour des liens, utilisez les options sankey.link.color.stroke et sankey.link.color.strokeWidth:
La couleur du trait peut être spécifiée au format RVB ou par nom anglais.
var options = {
width: 750,
height: 400,
sankey: {
node: { colors: [ '#a61d4c' ] },
link: { color: { stroke: 'black', strokeWidth: 1 } },
}
};
Personnaliser les libellés
Le texte des diagrammes de Sankey peut être personnalisé à l'aide de sankey.node.label.fontName et d'amis:
Voici le stanza d'options pour le graphique ci-dessus:
var options = {
width: 600,
sankey: {
node: { label: { fontName: 'Times-Roman',
fontSize: 14,
color: '#871b47',
bold: true,
italic: true } } },
};
Vous pouvez ajuster la position des étiquettes par rapport aux nœuds à l'aide de l'option sankey.node.labelPadding:
Dans le graphique ci-dessus, nous avons ajouté 30 pixels de marge intérieure entre les étiquettes et les nœuds.
var options = {
width: 600,
sankey: { node: { labelPadding: 30 } },
};
Ajuster les nœuds
Vous pouvez contrôler la largeur des nœuds avec sankey.node.width:
Ci-dessus, nous définissons la largeur du nœud sur 2.
var options = {
width: 600,
sankey: { node: { width: 2 } },
};
Vous pouvez ajuster la distance entre les nœuds avec sankey.node.nodePadding:
Dans le graphique ci-dessus, nous avons défini sankey.node.nodePadding sur 80.
var options = {
width: 900,
sankey: { node: { nodePadding: 80 } },
};
Chargement...
Le nom du package google.charts.load est "sankey":
google.charts.load("current" {packages: ["sankey"]});
Le nom de classe de la visualisation est google.visualization.Sankey:
var visualization = new google.visualization.Sankey(container);
Format des données
Lignes:chaque ligne de la table représente une connexion entre deux étiquettes. La troisième colonne indique l'intensité de cette connexion et est reflétée par la largeur du chemin entre les étiquettes.
Columns:
| Colonne 0 | Colonne 1 | Colonne 2 | ... | Colonne N (facultative) | |
|---|---|---|---|---|---|
| Objectif : | Source | Destination | Valeur | ... | Rôles facultatifs |
| Type de données : | chaîne | chaîne | Nombre | ... | |
| Rôle : | domaine | domaine | Données | ... | |
| Rôles de colonne facultatifs: | Aucun contrôle |
Aucun contrôle |
Aucun contrôle |
... |
Options de configuration
| Nom | |
|---|---|
| forceIFrame |
Dessine le graphique dans un cadre intégré. Notez que dans IE8, cette option est ignorée, car tous les graphiques IE8 sont dessinés dans des i-frames. Type:booléen
Par défaut : "false"
|
| taille |
Hauteur du graphique, en pixels. Type:nombre
Par défaut:hauteur de l'élément parent
|
| sankey.iterations |
Avec les Sankeys à plusieurs niveaux, il n'est parfois pas évident de déterminer où placer les nœuds pour une lisibilité optimale. Le moteur de mise en page D3 teste différentes dispositions de nœuds et s'arrête après Type:entier
Par défaut:32
|
| sankey.link |
Contrôle les attributs des connexions entre les nœuds. Actuellement, tous les attributs se rapportent à la couleur:
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:objet
Par défaut:null
|
| sankey.link.colorMode |
Définit un mode de couleur pour les liens entre les nœuds. Valeurs possibles :
Cette option remplace sankey.link.color. Type:chaîne
Par défaut : "none" (aucun)
|
| sankey.node |
Contrôle les attributs des nœuds (barres verticales entre les liens):
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:objet
Par défaut:null
|
| sankey.node.colorMode |
Définit un mode de couleur pour les nœuds Sankey. Valeurs possibles :
Type:chaîne
Par défaut : "unique" (unique).
|
| Info-bulle |
Objet avec des membres permettant de configurer divers éléments d'info-bulle. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation littérale d'objet, comme indiqué ci-dessous: {textStyle: {color: '#FF0000'}, showColorCode: true}
Type:objet
Par défaut:null
|
| tooltip.isHtml |
Si elle est définie sur "True", utilisez les info-bulles affichées en HTML (plutôt que SVG). Pour en savoir plus, consultez Personnaliser le contenu des info-bulles. Remarque:La personnalisation du contenu de l'info-bulle HTML via le rôle de données des colonnes d'info-bulles n'est pas disponible pour la visualisation Graphique à bulles. Type:booléen
Par défaut : "false"
|
| tooltip.textStyle |
Objet spécifiant le style de texte de l'info-bulle. L'objet a le format suivant:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Type:objet
Par défaut:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| largeur |
Largeur du graphique, en pixels. Type:nombre
Par défaut:largeur de l'élément parent
|
Méthodes
| Méthode | |
|---|---|
draw(data, options) |
Permet de dessiner le graphique. Le graphique n'accepte d'autres appels de méthode qu'après le déclenchement de l'événement Return Type (Type renvoyé) : aucun
|
getBoundingBox(id) |
Renvoie un objet contenant les valeurs gauche, supérieure, largeur et hauteur de l'élément de graphique
Les valeurs sont relatives au conteneur du graphique. Appelez-le après que le graphique est dessiné. Type renvoyé:objet
|
getSelection() |
Renvoie un tableau des entités de graphique sélectionnées.
Les entités sélectionnables sont les barres, les entrées de légende et les catégories.
Pour ce graphique, vous ne pouvez sélectionner qu'une seule entité à la fois.
Type renvoyé:tableau d'éléments de sélection
|
setSelection() |
Sélectionne les entités de graphique spécifiées. Annule toute sélection précédente.
Les entités sélectionnables sont les barres, les entrées de légende et les catégories.
Pour ce graphique, vous ne pouvez sélectionner qu'une seule entité à la fois.
Return Type (Type renvoyé) : aucun
|
clearChart() |
Efface le graphique et libère toutes les ressources allouées. Return Type (Type renvoyé) : aucun
|
Événements
| Nom | |
|---|---|
error |
Déclenché lorsqu'une erreur se produit lors de la tentative d'affichage du graphique. Propriétés:id, message
|
onmouseover |
Déclenché lorsque l'utilisateur pointe sur une entité visuelle. Renvoie les index de ligne et de colonne de l'élément correspondant du tableau de données. Une barre correspond à une cellule du tableau de données, une entrée de légende à une colonne (l'index de ligne est nul) et une catégorie à une ligne (l'index de colonne est nul). Propriétés:ligne, colonne
|
onmouseout |
Déclenché lorsque l'utilisateur éloigne le curseur de la souris d'une entité visuelle. Renvoie les index de ligne et de colonne de l'élément correspondant du tableau de données. Une barre correspond à une cellule du tableau de données, une entrée de légende à une colonne (l'index de ligne est nul) et une catégorie à une ligne (l'index de colonne est nul). Propriétés:ligne, colonne
|
ready |
Le graphique est prêt pour les appels de méthode externes. Si vous souhaitez interagir avec le graphique et appeler des méthodes après l'avoir dessiné, vous devez configurer un écouteur pour cet événement avant d'appeler la méthode Propriétés:aucune
|
select |
Déclenché lorsque l'utilisateur clique sur une entité visuelle. Pour savoir ce qui a été sélectionné, appelez Propriétés:aucune
|
Règles concernant les données
L'ensemble du code et des données sont traités et affichés dans le navigateur. Aucune donnée n'est envoyée à aucun serveur.