Graph de barres animées avec Plotly.Graph

Dans le lot des data-visualisations à vocation narrative, les graphiques à barres animées sont souvent très recherchés aussi bien pour leur interactivité que pour leur côté ludique et esthétique. De nombreuses librairies ou applications Java Script en ligne du type Flourish les rendent facilement réalisables et intégrables sur site web sans avoir besoin d’écrire la moindre ligne de code. Du côté des librairies  graphiques python, c’est plus compliqué. La plupart sont très performantes pour accompagner l’analyse de données mais en matière de narration et elles sont souvent limitées et pas toujours très attractives.   

 Plotly.py est, à mon sens, la librairie graphique python qui peut se rapprocher le plus de ce qu’il on peut réaliser en java script. Le module plotly.express permet de créer facilement des graphiques courants en une seule fonction. L’ensemble  Plotly Graph_object fournit un important panel de composants pour réaliser des graphiques pointus de façon intuitive. Et le Framework Plotly Dash permet de les intégrer à des applications et de les déployer sur le web. En gros, Plotly peut être le terrain de jeu privilégié pour les adeptes de graphiques et de data-visualisations 100% Python.

Dans cet article nous utiliserons Plotly Graph Objects  pour réaliser le graphique à barres animées ci-dessous  afin de visualiser et de comparer la progression du Top 10 des équipes africaines de football au classement Caf/FIFA depuis sa création en 1992 jusqu’à la dernière actualisation de mars 2022. Nous verrons ensuite comment nous pouvons l’intégrer sur le post en nous servant d’une hébergement sur Github.  

import pandas as pd

#Caf Dataframe
CafRanking = pd.read_csv('df_afrika_rank.csv')

#Emojis dataFrame

Emoji = pd.read_csv('emojiflags.csv')

#print(CafRanking)
#print(Emoji)

#merge datasets 
CafRanking = pd.merge(CafRanking, Emoji[['country', 'flag']], left_on = 'country_team', right_on='country', how = 'inner') 


#drop column 
CafRanking = CafRanking.drop(columns=['country'])

Attribution des couleurs

Nous devons assigner une couleur unique à chaque pays. Pour ce faire, nous créons une fonction qui accepte en entrée notre dataframe et la série à laquelle nous attribuons un code couleur « hex » généré de façon aléatoire avec random.randint. La fonction renvoie notre dataframe avec une nouvelle colonne « code_color » contenant les couleurs uniques à chaque pays.

Préparation du Frame

 Pour réaliser une Bar Chart Race nous devons transformer notre dataframe et créer une séquence d’images afin qu’à chaque date corresponde un dataframe. Ici, nous avons 319 occurrences allant du 1992-12-31 au 2022-03-11.   Il y a plusieurs façons de configurer ses frames. Nous avons choisit de créer un dictionnaire « x_frame »  à partir de 2 listes :   

• « list_dates » : la liste de toutes nos objets dates.
• « dict_keys » : la liste de nos clés sur la longueur de « list_dates ».
• On utilise la fonction « zip » pour faire itérer les deux listes.
• On créé un nouveau dataframe sur la valeur date.
• Avec la méthode « nlargest() » nous définissons le nombre barres que souhaitons avoir sur la figure.
• Nous classons les dates par ordre croissant avec la fonction `sort_values()`.
• Enfin, nous attribuons chaque clé un dataframe ex :{‘0′: dataframe1[1992-12-31],’1’: dataframe2[1993-08-08] } etc.

Création de la Figure 

   Si ce n’est pas déjà fait, il faut d’abord installer Plotly et  importer Plotly Graph Objects.    

pip install plotly
import plotly.graph_object as go

 Notre visualisation est construite autour de 3 éléments principaux :   

• nos data  x, y, avec leurs paramètres
• Le  Layout : la mise en page (titre, axes, buttons, style etc.)
• Le Frame que nous avons préparé ci-dessus.

 Nous créons un graphique à barres à l’aide de Ploty.graph_objects.Bar.  Nos x reçoivent les valeurs numériques de` »total_points »` du tableau « 0 » renvoyant  à la  date initiale : « 1992-12-31 ». Idem pour  y « country_team ». On entre ensuite nos paramètres :   

• l’orientation des barres,
• la largeur,
• les données couleur
• les données texte
• les infos de survol etc.

       
On se retrouve avec un graphique à barres basique horizontal et correctement ordonné;   La mise en page Le deuxième élément, le Layout que nous créons est la mise en page à l’aide de la fonction plotly.graph_objects.Layout. On va y définir:   Ainsi que toutes les données que l’on souhaite afficher dans notre template.
A ce stade, nous avons le cadre de la visualisation au complet. Par contre, elle est en « mode start ». Pour qu’elle puisse fonctionner, il nous faut intégrer le Frame. Dans le cas présent, le Frame n’est pas très complexe à créer. Il est composé de nos datas et de notre Layout que l’on va reprendre quasiment à l’identique et inclure ces éléments dans une liste compréhension qui va boucler sur nos valeurs, donc sur tous nos DataFrames. En gros, avons la structure suivante :  frames = [(value[data]), (value[layout] ) for keys, value in x_frame.items() ]

Il est important de garder les mêmes éléments de styles afin de conserver  le même aspect graphique tout le déroulé de l’animation. On peut cependant ajouter des données qui apparaitront une fois qu’elle sera lancée ou à la fin, en fonction de ce que l’on souhaite visualiser. Ici,  nous avons ajouté l’équipe leader et le rang qu’elle occupe à une date donnée.

 Intégration via HTML et Github

Une des difficultés rencontrés avec les graphs Plotly, c’est quand il s’agit de les intégrer dans un site web. Plotly Chart Studio ne prenant pas en charge gratuitement les graphiques de plus de 500 Ko. Parmi les alternatives, on a la plateforme Datapane, très pratique et complétement gratuite, mais qui affiche. également des limites de taille de fichiers (moins de 5000 lignes). A mon sens la meilleure option c’est  d’écrire notre visualisation en HTML et de l’héberger sur des pages GitHub. Pour cela nous devons passer par 2 étapes :

 Créer le HTML
Pour générer le fichier HTML de la visualisation Plotly, utilisez : 

import plotly.io as pio

pio.write_html(fig, file=index.html, auto_open = True)

Ce code ouvre la visualisation dans un fichier HTML local dans votre navigateur avec la visualisation.

Héberger vers des pages GitHub

• Publier la visualisation vers des pages Github est assez simple.
• Créez un nouveau repo Github et initialisez-le avec un README.md.
• Téléchargez le fichier index.html que nous venons de créer et « commitez-le » sur la branche master ou main.
• Cliquez sur paramètres, et faites défiler jusqu’à la section des pages Github et sous ‘Source’ sélectionnez ‘master branch’ et ‘docs’ pour le chemin

Dans le cas présent on obtient 

<iframe id="igraph" scrolling="no" style="border:none;" seamless="seamless" src="https://plot.ly/~elizabethts/9.embed" height="525" width="100%"></iframe>

4 – Conclusion

Même si le graphique n’est pas officiellement documenté dans les paramètres de Plotly, on peut s’appuyer sur la structure pour en réaliser. Ici nous avons pu en construire une assez basique qui peut largement être améliorée.
Le code peut parfois paraître un peu long mais la stylisation et ses paramètres occupent beaucoup de place.