Historique
Les diagrammes circulaires, également connus sous le nom de chord diagrams en anglais, sont des représentations graphiques qui mettent en évidence les relations entre des éléments en reliant les points sur un cercle à l'aide de cordes.
Depuis les années 1960, les diagrammes circulaires ont été utilisé pour visualiser les liens entre différents nœuds ou entités dans un réseau. Dans les années 1980, ils ont commencé à être utilisés dans des domaines tels que la biologie moléculaire pour représenter les interactions entre différentes molécules dans les réseaux génétiques et protéiques.
Leur utilisation s'est également étendue à d'autres disciplines telles que la sociologie et l'économie pour représenter des réseaux de collaboration ou d'interaction entre individus ou organisations.
Dans les années 2000, les diagrammes circulaires ont gagné en popularité en tant qu'outil de visualisation efficace pour représenter des réseaux complexes. Des logiciels ou bibliothèques, tels que D3.js (une bibliothèque JavaScript pour la visualisation interactive de données) ou ggplot2 en R, ont permis de créer plus facilement des diagrammes circulaires et de les intégrer dans des applications.
Chronologie de l’histoire de la dataviz
Pourquoi des diagrammes circulaires ?
Ces diagrammes permettent de visualiser les réseaux complexes de relations entre différentes entités, Dans un diagramme circulaire, les entités sont disposées autour d'un cercle, et les liens entre ces entités sont représentés par des cordes. La largeur des cordes est proportionnelle à l’intensité de la relation entre les entités.
Très esthétique, cette représentation peut toutefois s’avérer complexe à comprendre. L’interactivité permet d’améliorer son intelligibilité : l’utilisateur peut explorer les données en cliquant sur différents éléments pour révéler des informations supplémentaires sur les liens.
Comprendre un diagramme circulaire
À partir de l’exemple de l’article de Nadieh Bremer : Comportement de changement entre les marques de téléphone aux Pays-Bas.
- Le cercle extérieur représente les parts de marché des différentes marques en 2014. La somme fait 100%. Pour Apple, l’intervalle des parts de marché s’étend de 0% à 19,2%, c’est la part totale des téléphones à la pomme en 2014.
- Un lien correspond à une évolution de part de marché. Parmi les clients qui ont changé de téléphone en 2014. Il est possible de dessiner deux types de formes :
- Le client reste sur la même marque de téléphone : la corde reboucle vers la même zone et crée une bosse.
- Le client change de marque, la corde traverse alors le cercle des parts de marché de part en part.
- Les bosses représentent donc les clients qui sont restés fidèles à la marque. Par exemple, pour Apple, la bosse part de 0% et reboucle sur 9.7% : c’est la proportion des téléphones Apple ont été achetés par déjà des possesseurs d’un téléphone Apple.
- Les cordes représentent le flux entre les marques. Tirons une première corde depuis Apple vers Nokia. Elle représente les utilisateurs qui ont échangé leur iPhone contre un Nokia. La largeur de la base de la corde en partance d’Apple représente 2,55% des 19,2% parts de marché au total. À l’arrivée, cet apport de déçus de Steve Jobs ne représente que 0,22% des 15,9% des ventes totales de Nokia.
- La couleur permet de marquer la marque avantagée lors de cet échange. Pour Apple, l’avantage est à l’arrivée : il y a plus de personnes qui ont échangé leur Nokia contre un Apple, la couleur de la corde est alors de la couleur du vainqueur, ici, en gris.
- Le diagramme complet donne une vision des différents échanges. Cela peut semble confus à cause des trop nombreux arcs, toutefois, ce diagramme permet de faire ressortir une information : seul Apple a gagné des parts de marché. En effet, tous les arcs restent gris. Comparons à Samsung. Nous voyons un unique arc gris en partant vers Apple, signe qu’il a perdu des clients.
- Le diagramme ne donne pas d’indications sur l’évolution des parts de marché en 2014. Elle est de 19,6% en 2014, mais la valeur en 2013 est inconnue. Nous n’avons juste qu’une information sur les flux.
- Version dynamique (sur pc) avec Observable
Les variantes des diagrammes circulaires
Diagramme circulaire amélioré
L’esthétique des diagrammes circulaires peut être amélioré en agissant sur l'espacement entre les entités.
Diagramme circulaire monodirectionnel
C’est le diagramme que nous venons de voir. Il est composé d’un diagramme en anneau (donut), vu dans le chapitre des diagrammes sectoriels, et d’arcs reliant ces différents segments.
- Chaque segment sur le cercle représente donc une catégorie de données et la taille de chaque segment est proportionnelle à la quantité de cette catégorie par rapport au total. Rien de nouveau, cela reste un diagramme sectoriel.
- Les arcs permettent de représenter les flux entre ces catégories, la longueur de la base des arcs est proportionnelle à la valeur entrante et sortante. La couleur permet d’associer l’arc à la catégorie qui a la plus grande valeur. Le terme “monodirectionnel” indique que les segments sont disposés dans une seule direction, généralement dans le sens des aiguilles d’une montre pour faciliter la lecture.
Diagramme circulaire enrichi (1)
Des couches supplémentaires d’anneaux peuvent être ajoutées pour enrichir le diagramme en informations, au détriment de sa lecture.
Diagramme circulaire enrichi (2)
Ce diagramme peut aussi être associé à un diagramme à barres.
Recommandations
Les données
Les valeurs numériques, suivant les outils, peuvent être présentées sous la forme d’un tableau de 3 colonnes
Source area | Target area | value |
Apple | Apple | 0.096899 |
Apple | HTC | 0.008859 |
Apple | Huawei | 0.000554 |
Apple | LG | 0.00443 |
… | … | … |
ㅤ | ㅤ | ㅤ |
Ou sous la forme d’une matrice
ㅤ | Apple | HTC | Huawei | LG | Nokia | Samsung | Sony | Other |
Apple | 0.096899 | 0.008859 | 0.000554 | 0.00443 | 0.025471 | 0.024363 | 0.005537 | 0.025471 |
HTC | 0.001107 | 0.018272 | 0 | 0.004983 | 0.011074 | 0.01052 | 0.002215 | 0.004983 |
Huawei | 0.000554 | 0.002769 | 0.002215 | 0.002215 | 0.003876 | 0.008306 | 0.000554 | 0.003322 |
LG | 0.000554 | 0.001107 | 0.000554 | 0.012182 | 0.011628 | 0.006645 | 0.004983 | 0.01052 |
Nokia | 0.002215 | 0.00443 | 0 | 0.002769 | 0.104097 | 0.012182 | 0.004983 | 0.028239 |
Samsung | 0.011628 | 0.026024 | 0 | 0.013843 | 0.087486 | 0.168328 | 0.017165 | 0.055925 |
Sony | 0.000554 | 0.004983 | 0 | 0.003322 | 0.00443 | 0.008859 | 0.017719 | 0.00443 |
Other | 0.002215 | 0.007198 | 0 | 0.003322 | 0.016611 | 0.01495 | 0.001107 | 0.054264 |
Recommandation 1
- Trop de connexions peuvent rendre le diagramme illisible. Utilisez-les pour des jeux de données en réduisant le nombre de connexions en ne choisissant que celles qui sont le plus significatives.
Recommandation 2
- Utilisez des versions interactives où l’utilisateur peut survoler ou cliquer sur des éléments pour obtenir plus d’informations.
Recommandation 3
- Fournissez une légende claire, des annotations et des explications pour faciliter la compréhension du diagramme.
Recommandation 4
- Choisissez des couleurs pour les différentes catégories afin d’améliorer la lisibilité
Exemples
Les exemples ci-dessous présentent des réalisations basiques. Pensez à sélectionner l’onglet correspondant au diagramme.
Explications complémentaires
EXCEL
- L’outil ne propose pas la création de diagrammes circulaires.
GOOGLE SHEET (on line)
- L’add-on “Chord Snip add-on” permet de créer des diagrammes circulaires avec Google Sheet. Non testé !
TABLEAU SOFTWARE
CALC OpenOffice
L’outil ne propose pas la création de diagrammes circulaires.
Les langages de programmation
Observablehq : Diagrammes circulaires
Python : Diagrammes circulaires
Javascript : Diagrammes circulaires