mailinapp
Documentation menu

Bloc Sankey

Des bandes de flux proportionnelles entre des nœuds nommés — des lignes De, Vers, et Valeur, par ex. source de trafic → page d'atterrissage → conversion. C'est la forme pour tracer où va le volume à mesure qu'il se déplace à travers une séquence d'étapes, quand la séquence linéaire unique d'un simple entonnoir ne suffit pas à montrer des chemins qui se ramifient.

Comment ça fonctionne

Contrairement à tout autre graphique de cette famille, les nœuds d'un diagramme Sankey ne sont pas saisis directement — il n'y a aucune colonne « nœud » à remplir du tout. À la place, les nœuds sont dérivés de tous les libellés qui se répètent dans les colonnes De et Vers : tapez « Visité » comme valeur De sur une ligne et comme valeur Vers sur une autre, et c'est le même nœud les deux fois. La position de gauche à droite de chaque nœud (dans quelle couche verticale il se situe) est également calculée, via un parcours de plus long chemin sur le graphe orienté que décrivent vos lignes. Un nœud sans afflux démarre à la couche la plus à gauche, et chaque autre nœud se situe une couche après son prédécesseur le plus en amont. Rien de tout cela ne se positionne à la main.

La valeur de chaque flux est une quantité positive simple — un flux n'a aucune lecture « négative » significative, donc une valeur saisie nulle ou négative est écartée au moment du regroupement plutôt que tracée comme une bande à l'envers ou de largeur nulle. Une auto-boucle (une ligne dont le De et le Vers sont le même libellé) est ignorée d'emblée, puisqu'un nœud qui se déverse en lui-même n'a aucune bande significative dans une disposition de gauche à droite. Les lignes répétées décrivant la même paire De/Vers sont additionnées ensemble, pas écrasées — deux lignes disant toutes deux « Référencement → Inscrit » signifient vraiment deux fois plus de flux, contrairement à une mesure unique qu'une modification ultérieure devrait remplacer.

La couleur d'un flux utilise par défaut celle de son nœud source (la lecture Sankey conventionnelle « colorée par origine ») à moins que vous ne la remplaciez ligne par ligne via la cellule facultative Couleur du flux. Les couleurs des nœuds eux-mêmes ne sont pas directement personnalisables — un nœud prend simplement le prochain emplacement de couleur fixe dans l'ordre de première apparition, la même attribution de couleur basée sur l'identité que chaque autre graphique de cette famille utilise.

Au-delà du plafond de nœuds ou de flux (12 nœuds, 24 flux), un nœud en surplus est abandonné, pas replié. C'est une différence délibérée par rapport à la façon dont le camembert ou le treemap gère le surplus. Fusionner deux points de terminaison de flux distincts en un seul nœud synthétique « Autre » déformerait ce que montre réellement le diagramme, puisque tout l'intérêt d'un Sankey est de tracer des chemins distincts, pas de résumer une part d'un tout.

Tout flux dont la source ou la cible a été abandonnée avec un nœud coupé est également abandonné. Le tableau de données, cependant, liste toujours chaque ligne que vous avez saisie, qu'elle soit ou non parvenue dans le diagramme dessiné, y compris les flux qu'une erreur de saisie cyclique (A → B → A) laisse non dessinés mais toujours réels. Rien de ce que vous avez tapé ne disparaît silencieusement de la vue.

Champs configurables :

  • Titre du graphique — texte d'en-tête facultatif au-dessus du graphique.
  • Flux (de, vers, valeur) — la liste de lignes : un libellé De, un libellé Vers, une Valeur numérique, et une Couleur du flux de remplacement facultative par ligne.
  • Couleur de fond, remplissage, bordure et rayon de bordure sur la carte.
  • Couleur/taille du titre et couleur/taille de la légende — style de texte pour l'en-tête et le texte de légende/tableau sous l'image.

Si aucune ligne de flux valide n'est encore saisie — chaque ligne vide, en auto-boucle, ou non positive — le bloc saute l'image. Il rend seulement son titre et le cadre de la carte, avec un simple avis « Ajoutez au moins une ligne de données de flux (de, vers, valeur) pour afficher ce graphique » à la place.

Exemples

Un diagramme de parcours utilisateur — Visité → Inscrit → Acheté, avec une seconde branche vers Rebondi et une troisième vers Perdu — rend la baisse et la ramification visibles en une seule image là où un entonnoir forcerait tout dans une seule ligne. Un flux d'allocation budgétaire (Revenu → Budgets de département → Postes de dépense) donne à un récapitulatif financier une trace visuelle d'où va l'argent étape par étape. Une équipe de support peut faire circuler le volume de tickets depuis le Canal (email/chat/téléphone) à travers la Catégorie (facturation/bug/comment faire) jusqu'à la Résolution (résolu/escaladé), faisant apparaître quels canaux alimentent quels résultats.

À quoi ressemble l'alternative statique

<div style="margin:12px 0;background-color:#ffffff;padding:16px">
  <p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Signup journey</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="360"
       alt="Flow diagram: Visited to Signed up 120, Visited to Bounced 380, Signed up to Purchased 45, Signed up to Churned 75" />
  <table style="width:100%;border-collapse:collapse;margin-top:4px">
    <tr>
      <th style="text-align:left;padding:4px 8px;font-weight:600">From</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">To</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Value</th>
    </tr>
    <tr>
      <td style="padding:4px 8px">Visited</td>
      <td style="padding:4px 8px">Signed up</td>
      <td style="padding:4px 8px">120</td>
    </tr>
  </table>
</div>

Le texte alternatif liste chaque bande de flux dessinée ; le tableau liste chaque ligne saisie, y compris toute ligne qu'un plafond de nœud/flux ou une disposition cyclique a laissée non dessinée.

Voir aussi