Présentation
Un diagramme de Sankey est une visualisation qui permet de représenter un flux d'un ensemble de valeurs à un autre. Les éléments en cours de connexion sont appelés nœuds et les connexions sont appelées liens. Les Sankeys sont particulièrement adaptés lorsque vous souhaitez afficher un mappage de type plusieurs à plusieurs entre deux domaines (par exemple, des universités et des majors) ou plusieurs chemins dans un ensemble d'étapes (par exemple, Google Analytics utilise sankeys pour montrer comment le trafic passe des pages aux autres pages de votre site Web).
Pour leur curiosité, ils portent le nom du capitaine Sankey, qui a créé un diagramme de l'efficacité des machines à vapeur qui utilisait des flèches dont la largeur était proportionnelle à la perte de chaleur.
Remarque:Des modifications importantes seront peut-être apportées au graphique sankey dans les prochaines versions de Google Charts.
Les diagrammes de Sankey sont affichés dans le navigateur à l'aide de SVG ou de VML, selon ce qui convient au navigateur de l'utilisateur. Le code de mise en page sankey de Google est dérivé du code sankey de D3.
Remarque:Les graphiques 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 se connectent à trois autres catégories, X, Y et Z. Certaines de ces connexions sont plus lourdes que d'autres. Par exemple, B dispose d'une connexion fine à X et d'une connexion beaucoup plus épaisse à Y.
Essayez de pointer sur un lien pour le mettre en surbrillance.
Pour créer un graphique sankey, fournissez un ensemble de lignes, chacune contenant des informations sur une connexion: de, vers et (pondérations). 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 dans vos données. Si A renvoie vers lui-même ou renvoie vers B qui renvoie vers C qui renvoie vers A, votre graphique ne s'affichera pas.
Sankeys multiniveaux
Vous pouvez créer un graphique Sankey avec plusieurs niveaux de connexions:
Les graphiques Sankey ajoutent des niveaux supplémentaires si nécessaire et les affichent automatiquement. Voici le code complet du 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 peuvent définir des couleurs personnalisées pour les nœuds et les liens. Vous pouvez attribuer des palettes de couleurs personnalisées aux nœuds et aux liens à l'aide des options colors (sankey.node.colors et sankey.link.colors, respectivement). Des modes de coloration différents peuvent également leur être attribués à l'aide de l'option colorMode.
Si les couleurs ne sont pas personnalisées, elles sont définies par défaut sur 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 les couleurs des liens, des nœuds et des libellés à l'aide des options de configuration. Nous en sélectionnons trois avec la même teinte, mais des luminosités différentes:
Ces options se présentent comme suit:
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 en anglais.
var options = {
width: 750,
height: 400,
sankey: {
node: { colors: [ '#a61d4c' ] },
link: { color: { stroke: 'black', strokeWidth: 1 } },
}
};
Personnaliser les libellés
Le texte des graphiques Sankey peut être personnalisé à l'aide de sankey.node.label.fontName et d'amis:
Voici le bloc d'options du 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é une marge intérieure de 30 pixels 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 à l'aide de la commande sankey.node.width:
En haut, 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 du tableau représente une connexion entre deux étiquettes. La troisième colonne indique l'intensité de cette connexion et est reflétée dans la largeur du tracé entre les étiquettes.
Columns:
| Colonne 0 | Colonne 1 | Colonne 2 | … | Colonne N (facultatif) | |
|---|---|---|---|---|---|
| Objectif : | Source | Destination | Valeur | … | Rôles facultatifs |
| Type de données: | chaîne | chaîne | nombre | … | |
| Rôle : | domaine | domaine | données ou y ayant accédé. | … | |
| Rôles de colonne facultatifs: | Aucune note |
Aucune note |
Aucune note |
… |
Options de configuration
| Nom | |
|---|---|
| force_frame |
Permet de dessiner le graphique dans un cadre intégré. Notez que dans IE8, cette option est ignorée. Tous les graphiques IE8 sont dessinés dans des cadres i-frame. Type:booléen
Default : "false"
|
| hauteur |
Hauteur du graphique, en pixels. Type:nombre
Par défaut:hauteur de l'élément conteneur
|
| sankey.itérations |
Avec des sankeys à plusieurs niveaux, il n'est pas toujours évident de savoir où placer les nœuds pour une lisibilité optimale. Le moteur de mise en page D3 teste différentes mises en page de nœuds et s'arrête lorsque Type:entier
Default:32
|
| lien_santé.lien |
Contrôle les attributs des connexions entre les nœuds. Actuellement, tous les attributs concernent 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 coloration pour les liens entre les nœuds. Les valeurs possibles sont :
Cette option remplace sankey.link.color. Type:chaîne
Default : "none"
|
| 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 coloration pour les nœuds sankey. Les valeurs possibles sont :
Type:chaîne
Default : "unique"
|
| info-bulle |
Objet avec des membres permettant de configurer divers éléments d'info-bulles. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation de littéral d'objet, comme indiqué ci-dessous: {textStyle: {color: '#FF0000'}, showColorCode: true}
Type:objet
Par défaut:null
|
| tooltip.isHTML |
Si ce paramètre est défini sur "true", utilisez les info-bulles affichées en HTML (au lieu de la version SVG). Pour en savoir plus, consultez Personnaliser le contenu de l'info-bulle. Remarque:La personnalisation du contenu de l'info-bulle HTML via le rôle de données de la colonne d'info-bulles n'est pas compatible avec la visualisation sous forme de graphique à bulles. Type:booléen
Default : "false"
|
| tooltip.textStyle |
Objet qui spécifie le style du texte de l'info-bulle. L'objet est au 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 conteneur
|
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 éléments gauche, haut, largeur et hauteur de l'élément de graphique
Les valeurs sont relatives au conteneur du graphique. Appelez-la après le graphique. Return Type (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, une seule entité peut être sélectionnée à la fois.
Return Type (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 ses 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 Transmettez les index de ligne et de colonne de l'élément de table de données correspondant. Une barre est associée à une cellule du tableau de données, à une entrée de légende dans une colonne (l'index de ligne est nul) et une catégorie à une ligne (l'index de colonne est nul). Properties (Propriétés) : ligne, colonne
|
onmouseout |
Déclenché lorsque l'utilisateur quitte une entité visuelle Transmettez les index de ligne et de colonne de l'élément de table de données correspondant. Une barre est associée à une cellule du tableau de données, à une entrée de légende dans une colonne (l'index de ligne est nul) et une catégorie à une ligne (l'index de colonne est nul). Properties (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 Properties (Propriétés) : aucune
|
select |
Déclenché lorsque l'utilisateur clique sur une entité visuelle Pour en savoir plus, sélectionnez Properties (Propriétés) : aucune
|
Règles sur 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 à un serveur.