Module 4

Introduction à la Visualisation Interactive avec Plotly

Passez des graphiques statiques aux visualisations web interactives que les utilisateurs peuvent explorer eux-mêmes.

4.1 Pourquoi l'Interactif ? La Différence entre une Photo et une Carte

Jusqu'à présent, avec Matplotlib et Seaborn, nous avons appris à créer de superbes visualisations. Mais elles ont une limite : ce sont des images statiques.

Analogie : La Photographie vs. Google Maps 🗺️

Matplotlib/Seaborn : C'est comme prendre une photographie de haute qualité de vos données. L'image est belle, informative, mais figée.

Plotly : C'est comme créer une version Google Maps de vos données. Le résultat est une application web HTML et JavaScript "vivante". L'utilisateur peut zoomer, panner, et survoler des points pour obtenir des informations détaillées.

Plotly Express (px) est l'interface de haut niveau de Plotly. C'est l'équivalent de Seaborn pour Matplotlib : une manière simple de créer des graphiques complexes et interactifs en une seule ligne de code.

4.2 L'Anatomie d'un Graphique Plotly Express

La plupart des fonctions partagent une structure similaire, très proche de celle de Seaborn.

px.nom_du_graphique(data_frame, x='colonne_x', y='colonne_y', color='col_categorie', size='col_numerique', hover_data=['col1', 'col2'])

data_frame : Le DataFrame Pandas.
x, y : Les colonnes pour les axes.
color : Colore les points en fonction d'une colonne catégorielle.
size : Change la taille des points en fonction d'une colonne numérique.
hover_data : Ajoute des colonnes supplémentaires qui s'affichent dans la bulle d'information au survol.

4.3 Créer des Graphiques Interactifs Courants

Le Nuage de Points Enrichi (px.scatter)

C'est le graphique parfait pour montrer la puissance de l'interactivité. Nous allons visualiser la relation entre l'espérance de vie et le PIB par habitant, en ajoutant la population et le continent comme dimensions supplémentaires.

import plotly.express as px

# Charger un des jeux de données inclus avec Plotly
gapminder_df = px.data.gapminder()

# Créer un nuage de points interactif
fig = px.scatter(
    gapminder_df.query("year==2007"), # On filtre pour garder l'année 2007
    x="gdpPercap",            # PIB par habitant sur l'axe X
    y="lifeExp",              # Espérance de vie sur l'axe Y
    size="pop",               # La taille de la bulle dépend de la population
    color="continent",        # La couleur dépend du continent
    hover_name="country",     # Le nom du pays s'affiche au survol
    log_x=True,               # Utiliser une échelle logarithmique pour l'axe X
    size_max=60,              # Taille maximale des bulles
    title="Espérance de Vie vs. PIB par Habitant en 2007"
)

# Afficher le graphique
fig.show()

Le Diagramme en Barres (px.bar)

Très simple, mais bénéficie aussi de l'interactivité au survol.

import plotly.express as px

# On prend les données de 2007 et on garde les 10 pays les plus peuplés
top10_pop = px.data.gapminder().query("year==2007").sort_values(by='pop', ascending=False).head(10)

fig = px.bar(
    top10_pop,
    x='country',
    y='pop',
    title='Top 10 des Pays les Plus Peuplés en 2007',
    labels={'pop': 'Population', 'country': 'Pays'} # Pour renommer les axes
)

fig.show()

4.4 Aller Plus Loin : Les Cartes Géographiques (px.choropleth)

Plotly excelle dans la création de cartes choroplèthes, où la couleur d'une région dépend d'une valeur numérique.

import plotly.express as px

gapminder_df = px.data.gapminder().query("year==2007")

fig = px.choropleth(
    gapminder_df,
    locations="iso_alpha",      # Colonne avec les codes pays à 3 lettres
    color="gdpPercap",          # Colonne qui détermine la couleur
    hover_name="country",       # Colonne à afficher dans la bulle d'info
    color_continuous_scale=px.colors.sequential.Plasma,
    title="PIB par Habitant dans le Monde (2007)"
)

fig.show()

4.5 Personnaliser sa Figure (fig.update_layout)

Même si Plotly Express crée le graphique en une ligne, l'objet fig retourné est entièrement personnalisable avec la méthode .update_layout().

# (On reprend le graphique en barres précédent)
top10_pop = px.data.gapminder().query("year==2007").sort_values(by='pop', ascending=False).head(10)
fig = px.bar(top10_pop, x='country', y='pop')

fig.update_layout(
    title_text='Top 10 Pays par Population (2007)', # Modifie le titre
    title_font_size=22,
    xaxis_title_text='Pays', # Renomme l'axe X
    yaxis_title_text='Population (en milliards)', # Renomme l'axe Y
    title_x=0.5 # Centre le titre
)

fig.show()

Exercices Pratiques

Exercice 1 : Diagramme en Barres Interactif

En utilisant le jeu de données `tips` de Seaborn (que vous pouvez charger avec `sns.load_dataset("tips")`), créez un diagramme en barres interactif avec Plotly Express qui montre le montant total de l'addition (`total_bill`) pour chaque jour de la semaine (`day`).

Voir la solution

import plotly.express as px
import seaborn as sns # Pour charger le jeu de données

# 1. Charger les données
tips = sns.load_dataset("tips")

# 2. Agréger les données : calculer la somme des additions par jour
total_par_jour = tips.groupby('day')['total_bill'].sum().reset_index()

# 3. Créer le graphique en barres interactif
fig = px.bar(
    total_par_jour,
    x='day',
    y='total_bill',
    title='Chiffre d\'Affaires Total par Jour de la Semaine',
    labels={'total_bill': 'Chiffre d\'Affaires ($)', 'day': 'Jour'}
)

fig.show()

Exercice 2 : Nuage de Points avec Informations au Survol

Toujours avec le jeu de données `tips`, créez un nuage de points (`scatterplot`) montrant la relation entre le pourboire (`tip`) et la taille du groupe (`size`). Utilisez le paramètre `hover_data` pour afficher également le montant de l'addition (`total_bill`) et le jour (`day`) lorsque vous survolez un point.

Voir la solution

import plotly.express as px
import seaborn as sns

# Charger les données
tips = sns.load_dataset("tips")

# Créer le nuage de points interactif
fig = px.scatter(
    tips,
    x='size',
    y='tip',
    color='sex', # Ajout d'une dimension couleur pour le sexe
    title='Relation entre Taille du Groupe et Montant du Pourboire',
    labels={'tip': 'Pourboire ($)', 'size': 'Taille du Groupe'},
    hover_data=['total_bill', 'day'] # Ajoute des infos au survol
)

fig.show()