Diagrammes Sankey : Analyse des flux en une heure

Diagrammes de Sankey pour l'analyse des flux financiers : De la donnée à l'interactivité

Les diagrammes de Sankey visualisent les flux de ressources, montrant le mouvement des fonds depuis les sources à travers des nœuds jusqu'aux destinataires. Contrairement aux diagrammes circulaires, qui se concentrent sur les parts, les diagrammes de Sankey affichent la chaîne complète : d'où viennent les fonds, par quels nœuds intermédiaires ils passent et où ils sont distribués.

Cela permet d'identifier des motifs cachés. Par exemple, de petites dépenses individuellement semblent insignifiantes, mais collectivement elles représentent 21 % du budget. Le diagramme comporte quatre couches : revenus, budget total, catégories de dépenses, sous-catégories.

Principaux enseignements :

• La direction du flux est visible : salaire → pool commun → alimentation/transport.
• Les nœuds (par ex. banques) montrent la concentration des fonds.
• L'imbrication préserve les connexions : virement vers T-Bank → détail ultérieur.

Comparaison avec les diagrammes circulaires

Les diagrammes circulaires perdent en lisibilité avec 5 à 7 catégories : les segments sont difficiles à comparer, il n'y a pas de direction de mouvement ni d'imbrication. Sankey résout ce problème en affichant le processus comme une séquence de flux avec des largeurs de ligne proportionnelles.

| Aspect | Diagramme circulaire | Sankey |

|--------|-----------|--------|

| Lisibilité | Chute avec >5 catégories | Évolutive avec zoom |

| Direction | Aucune | Explicite : de gauche à droite |

| Imbrication | Non | Prise en charge |

| Flux | Uniquement des parts | Trajectoire complète |

Sankey convient aux tâches avec une séquence claire d'étapes.

Étapes pour créer un Sankey interactif

Stack : React + D3.js avec disposition Sankey personnalisée. Le processus a été accéléré par l'IA (Claude) pour générer du code basé sur des descriptions.

• Préparation des données : De l'extrait PDF au CSV via l'IA. Nettoyage, regroupement, normalisation des catégories. Montants <1000 roubles regroupés dans "Divers" avec détails dans l'infobulle.
• Structure : Revenus (par source : salaire, virements) → budget total → dépenses → sous-catégories.
• Première itération : Rendu de base avec infobulles.
• Affinements :

- Centrage des sous-catégories.

- Limitation de la largeur du flux.

- Zoom pour la lisibilité des étiquettes.

- Adaptation mobile : panneau inférieur au lieu des infobulles.

Exemple de formulation de tâche pour l'IA :

"Sankey sur D3.js avec infobulles. Revenus → budget → dépenses. Regrouper <1000 roubles dans 'Divers'."

Fonctionnalités interactives et affinements

Infobulles : au survol — informations brèves, maintien — liste des opérations, clic fixe la position. Le positionnement tient compte des limites de l'écran.

Problèmes IA et corrections :

• Décalage de l'infobulle : règles ajoutées.
• Catégorisation des paiements : correction manuelle des ambiguës (par ex. MAPP_SBERBANK → "Autres virements").
• L'épargne n'est pas traitée comme une dépense.

Version Mobile :

• Zoom avec boutons + gestes.
• Mode liste pour la vue détaillée.
• Panneau inférieur pour les infobulles.

Les étiquettes ne se séparent pas des nombres (₽ attaché).

Applications au-delà des finances personnelles

• Mouvement de fonds entre comptes/unités.
• Analyse des coûts avec des nœuds intermédiaires.
• Flux de clients, demandes, étapes dans l'entreprise.

Limitations :

• Pas pour l'analyse précise (pas de chiffres sur les axes).
• Médiocre sans flux ou >3 niveaux d'imbrication.
• Encombré avec de grands volumes de données.

Ce qui compte

• Vitesse de développement : Diagramme statique dans Illustrator — 2 jours ; interactif sur D3 — 1 heure + affinements.
• Barrière à l'entrée : Nécessite de comprendre les données et de savoir formuler des tâches pour l'IA.
• Compromis de lisibilité : Zoom et masquage des étiquettes qui se chevauchent ; détails dans les infobulles.
• L'IA comme outil : Génère du code, mais les itérations et la logique métier reposent sur le développeur.
• Changement d'approche : Les expérimentations sont devenues moins chères, accent sur l'interactivité.

— Editorial Team