La visualisation des données expliquée (partie 5) : visualisation des données de séries chronologiques en Python (Matplotlib, Plotly et Altair)

dans ma série de visualisation de données. Voir ce qui suit :

Il est temps de commencer à créer vos propres visualisations de données. Dans cet article, je vais parcourir en détail le processus de visualisation des données de séries chronologiques en Python. Si vous n’avez pas lu les articles précédents de ma série sur la visualisation de données, je vous recommande fortement de lire au moins l’article précédent pour une revue de Python.

Au cours du codage des visualisations en Python, je me concentrerai sur trois packages Python : Matplotlib, Plotly et Altair. Une approche pour les apprendre pourrait consister à rédiger 1 à 2 articles par package, chacun approfondissant en détail le package choisi. Bien qu’il s’agisse d’une approche valable, ma série ne se concentre pas sur une bibliothèque en particulier ; il s’agit du processus de visualisation des données lui-même. Ces packages ne sont que des outils, un moyen pour parvenir à une fin.

De ce fait, je structurerai cet article et ceux qui suivront chacun autour d’un thème particulier. taper de visualisation de données, et je discuterai de la façon de mettre en œuvre cette visualisation dans chacun des packages répertoriés pour garantir que vous disposez d’un large éventail d’approches.

Tout d’abord : une définition des données de séries chronologiques.

Qu’est-ce que les données de séries chronologiques ?

Officiellement, données de séries chronologiques implique une variable fonction du temps. En termes simples, cela signifie simplement certaines données qui changent au fil du temps.

Par exemple, le cours des actions d’une société publique au cours des dix dernières années est une série de données chronologiques. Si vous préférez un exemple plus scientifique, pensez à la météo. Un graphique illustrant la température quotidienne de votre ville préférée au cours de l’année est un graphique qui représente des données chronologiques.

Les données de séries chronologiques constituent un excellent point de départ pour la visualisation des données pour plusieurs raisons :

• Il s’agit d’un type de données extrêmement courant et utile. Il existe de nombreuses informations qui dépendent du temps, et leur compréhension fournit un aperçu significatif du sujet qui nous intéresse à l’avenir.
• Il existe des méthodes éprouvées pour visualiser efficacement les données de séries chronologiques, comme vous le verrez ci-dessous. Maîtrisez-les et vous serez en bonne forme.
• Par rapport à certains autres types de données, les visualisations de séries chronologiques sont assez intuitives pour les humains et correspondent à notre perception du temps. Cela permet de se concentrer plus facilement sur les éléments de base de la conception d’une visualisation au début, au lieu de s’enliser dans la tentative de donner un sens à des données très complexes.

Commençons par examiner différentes méthodes de visualisation au niveau conceptuel.

Comment les données de séries chronologiques sont-elles visualisées ?

La norme pour la visualisation de séries chronologiques est le célèbre graphique linéaire :

Ce graphique place généralement le temps sur l’axe des x et la variable qui change avec le temps sur l’axe des y. Cela donne une vision qui semble « avancer », conformément à la perception linéaire du temps par les humains.

Bien que le graphique linéaire soit la norme, il existe d’autres possibilités connexes.

Graphique à lignes multiples

Cette approche est une extension directe d’un graphique linéaire singulier et affiche plusieurs séries temporelles associées sur le même graphique, permettant une comparaison entre des groupes ou des catégories (par exemple, ventes par région) :

Graphique en aires

Sur le plan fonctionnel, un graphique en aires est presque exactement identique à un graphique en courbes, mais la zone sous la ligne est remplie. Il met l’accent sur l’ampleur du changement :

Graphique à aires empilées

Techniquement, le graphique en aires empilées est l’analogue du graphique en courbes multiples, mais il est un peu plus difficile à lire. En particulier, le total est cumulatifavec la ligne de base de chaque ligne empilée commençant par celle située en dessous. Par exemple, en 2023, dans le graphique ci-dessous, la « tranche d’âge 25-64 ans » représente environ 4 milliards de personnes, puisque nous commençons à compter où se termine la « tranche d’âge 15-24 ».

Graphique à barres (vertical ou horizontal)

Enfin, dans certains cas, un graphique à barres convient également à la visualisation de séries chronologiques. Cette approche est utile si vous souhaitez afficher des intervalles de temps discrets, tels que la somme mensuelle ou la moyenne annuelle d’une mesure, plutôt que des données continues. Cela dit, je ne coderai pas de graphiques à barres dans cet article.

Passons maintenant à la création de ces visualisations. Dans chacun des exemples ci-dessous, je vais parcourir le code dans une bibliothèque de visualisation spécifique pour construire des graphiques linéaires et des graphiques en aires. J’ai lié les données ici et vous encourage à suivre. Pour internaliser ces techniques, vous devez vous entraîner à les utiliser vous-même.

Codage de visualisations de séries chronologiques dans Matplotlib

import pandas as pd
import matplotlib.pyplot as plt

# Load data
df = pd.read_csv('sales_data.csv')
df['Date'] = pd.to_datetime(df['Date'])

# Example 1: Simple Line Chart
fig1, ax1 = plt.subplots(figsize=(10, 6))
ax1.plot(df['Date'], df['Product A Sales'], linewidth=2)
ax1.set_xlabel('Date')
ax1.set_ylabel('Sales')
ax1.set_title('Product A Sales Over Time')
ax1.grid(True, alpha=0.3)
plt.tight_layout()
# Display with: fig1

# Example 2: Multiple Line Chart
fig2, ax2 = plt.subplots(figsize=(10, 6))
ax2.plot(df['Date'], df['Product A Sales'], label='Product A', linewidth=2)
ax2.plot(df['Date'], df['Product B Sales'], label='Product B', linewidth=2)
ax2.plot(df['Date'], df['Product C Sales'], label='Product C', linewidth=2)
ax2.set_xlabel('Date')
ax2.set_ylabel('Sales')
ax2.set_title('Sales Comparison - All Products')
ax2.legend()
ax2.grid(True, alpha=0.3)
plt.tight_layout()
# Display with: fig2

# Example 3: Area Chart
fig3, ax3 = plt.subplots(figsize=(10, 6))
ax3.fill_between(df['Date'], df['Product A Sales'], alpha=0.4)
ax3.plot(df['Date'], df['Product A Sales'], linewidth=2)
ax3.set_xlabel('Date')
ax3.set_ylabel('Sales')
ax3.set_title('Product A Sales - Area Chart')
ax3.grid(True, alpha=0.3)
plt.tight_layout()
# Display with: fig3

# Example 4: Stacked Area Chart
fig4, ax4 = plt.subplots(figsize=(10, 6))
ax4.stackplot(df['Date'], df['Product A Sales'], df['Product B Sales'], df['Product C Sales'],
              labels=['Product A', 'Product B', 'Product C'], alpha=0.7)
ax4.set_xlabel('Date')
ax4.set_ylabel('Sales')
ax4.set_title('Total Sales - Stacked Area Chart')
ax4.legend(loc='upper left')
ax4.grid(True, alpha=0.3)
plt.tight_layout()
# Display with: fig4

L’exécution de ce code produit les quatre visualisations suivantes :

Décomposons le code étape par étape pour vous assurer de bien comprendre ce qui se passe :

1. Tout d’abord, nous chargeons les données dans pandas sous forme de fichier CSV et assurez-vous que la date est correctement représentée sous forme de fichier datetime objet.
2. Matplotlib structure les graphiques dans le Figure objet, qui représente l’ensemble du canevas. Celui-ci est accessible directement en utilisant plt.figuremais ayant plusieurs variables utilisant plt.subplots est plus intuitif pour plusieurs visualisations. Chaque appel à plt.subplots définit un nouveau, distinct Figure (toile).
3. La ligne fig1, ax1 = plt.subplots(figsize=(10, 6)) définit la première sous-intrigue ; fig1 représente la toile, mais ax1 représente le zone de traçage réelle à l’intérieur et c’est la variable dans laquelle vous apporterez la plupart des modifications.
4. Matplotlib a différentes fonctions pour différents graphiques. Le plot La fonction trace des points en 2D, puis les connecte pour construire un graphique linéaire. C’est ce que nous précisons dans la ligne ax1.plot(df['Date'], df['Product A Sales'], linewidth=2).
5. Les lignes restantes sont principalement des fonctions esthétiques qui font exactement ce que leurs noms suggèrent : étiqueter les axes, ajouter un quadrillage et spécifier la disposition.
6. Pour le graphique à plusieurs lignesle code est exactement le même, sauf qu’on appelle plot trois fois : une pour chaque ensemble de points xy que nous voulons représenter graphiquement pour montrer tous les produits.
7. Le graphique en aires est presque identique au graphique linéaire, à l’exception de l’ajout de ax3.fill_between(df['Date'], df['Product A Sales'], alpha=0.4), qui indique à Matplotlib d’ombrer la zone située en dessous de la ligne.
8. Le graphique en aires empiléesen revanche, nous oblige à utiliser le stacked_plot fonction, qui prend en compte les trois tableaux de données que nous voulons tracer en même temps. Le reste du code esthétique est cependant le même.

Essayez de les programmer vous-même dans votre IDE préféré ou dans un notebook Jupyter. Quels modèles voyez-vous ? Quel tableau préférez-vous le plus ?

N’oubliez pas non plus que vous n’avez pas besoin de mémoriser cette syntaxe, surtout si vous débutez dans la programmation de visualisations de données ou si vous êtes nouveau dans Python en général. Concentrez-vous sur la compréhension de ce qui se passe au niveau conceptuel ; vous pouvez toujours rechercher la syntaxe particulière et connecter vos données si nécessaire.

Cela sera également vrai pour les deux exemples restants.

Codage de visualisations de séries chronologiques dans Plotly

Voici le code pour générer les mêmes visualisations que ci-dessus, cette fois dans le style de Plotly :

import pandas as pd
import plotly.graph_objects as go

# Load data
df = pd.read_csv('sales_data.csv')
df['Date'] = pd.to_datetime(df['Date'])

# Example 1: Simple Line Chart
fig1 = go.Figure()
fig1.add_trace(go.Scatter(x=df['Date'], y=df['Product A Sales'], mode='lines', name='Product A'))
fig1.update_layout(
    title='Product A Sales Over Time',
    xaxis_title='Date',
    yaxis_title='Sales',
    template='plotly_white'
)
# Display with: fig1

# Example 2: Multiple Line Chart
fig2 = go.Figure()
fig2.add_trace(go.Scatter(x=df['Date'], y=df['Product A Sales'], mode='lines', name='Product A'))
fig2.add_trace(go.Scatter(x=df['Date'], y=df['Product B Sales'], mode='lines', name='Product B'))
fig2.add_trace(go.Scatter(x=df['Date'], y=df['Product C Sales'], mode='lines', name='Product C'))
fig2.update_layout(
    title='Sales Comparison - All Products',
    xaxis_title='Date',
    yaxis_title='Sales',
    template='plotly_white'
)
# Display with: fig2

# Example 3: Area Chart
fig3 = go.Figure()
fig3.add_trace(go.Scatter(
    x=df['Date'], y=df['Product A Sales'],
    mode='lines',
    name='Product A',
    fill='tozeroy'
))
fig3.update_layout(
    title='Product A Sales - Area Chart',
    xaxis_title='Date',
    yaxis_title='Sales',
    template='plotly_white'
)
# Display with: fig3

# Example 4: Stacked Area Chart
fig4 = go.Figure()
fig4.add_trace(go.Scatter(
    x=df['Date'], y=df['Product A Sales'],
    mode='lines',
    name='Product A',
    stackgroup='one'
))
fig4.add_trace(go.Scatter(
    x=df['Date'], y=df['Product B Sales'],
    mode='lines',
    name='Product B',
    stackgroup='one'
))
fig4.add_trace(go.Scatter(
    x=df['Date'], y=df['Product C Sales'],
    mode='lines',
    name='Product C',
    stackgroup='one'
))
fig4.update_layout(
    title='Total Sales - Stacked Area Chart',
    xaxis_title='Date',
    yaxis_title='Sales',
    template='plotly_white'
)
# Display with: fig4

Nous obtenons les quatre visualisations suivantes :

Voici une répartition du code :

• Plotly est totalement indépendant de Matplotlib. Il utilise un nom similaire Figure objets, mais n’en a pas ax objets.
• Le Scatter fonctionner avec mode « lignes » est utilisé pour créer un graphique linéaire avec les données spécifiées des axes X et Y. Vous pouvez penser au add_trace fonctionner comme l’ajout d’un nouveau composant à un existant Figure. Ainsi, pour le graphique à courbes multiples, nous appelons simplement add_trace avec le approprié Scatter entrées trois fois.
• Pour l’étiquetage et l’esthétique dans Plotly, utilisez le update_layout fonction.
• Le graphique en aires est construit de la même manière que le graphique en courbes, avec l’ajout de l’argument facultatif fill='tozeroy'.
  • À première vue, cela peut ressembler à une couleur obscure, mais cela signifie en fait « TO ZERO Y », spécifiant à Plotly la zone qui doit être remplie.
  • Si vous avez du mal à visualiser cela, essayez de changer l’argument en « tozerox » et voyez ce qui se passe.
• Pour le graphique en aires empilées, nous avons besoin d’un paramètre facultatif différent : stackgroup='one'. En ajoutant ceci à chacun des Scatter les appels indiquent à Plotly qu’ils doivent tous être construits dans le cadre de la même pile.

Un avantage de Plotly est que par défaut, tous les graphiques Plotly sont interactifs et offrent la possibilité de zoomer, de survoler les info-bulles et de basculer la légende. (Notez que les images ci-dessus sont enregistrées au format PNG, vous devrez donc générer les tracés vous-même pour les voir.)

Codage de visualisations de séries chronologiques dans Altair

Terminons en générant ces quatre visualisations dans Altair. Voici le code :

import pandas as pd
import altair as alt

# Load data
df = pd.read_csv('sales_data.csv')
df['Date'] = pd.to_datetime(df['Date'])

# Example 1: Simple Line Chart
chart1 = alt.Chart(df).mark_line().encode(
    x='Date:T',
    y='Product A Sales:Q'
).properties(
    title='Product A Sales Over Time',
    width=700,
    height=400
)
# Display with: chart1

# Example 2: Multiple Line Chart
# Reshape data for Altair
df_melted = df.melt(id_vars='Date', var_name='product', value_name='sales')

chart2 = alt.Chart(df_melted).mark_line().encode(
    x='Date:T',
    y='sales:Q',
    color='product:N'
).properties(
    title='Sales Comparison - All Products',
    width=700,
    height=400
)
# Display with: chart2

# Example 3: Area Chart
chart3 = alt.Chart(df).mark_area(opacity=0.7).encode(
    x='Date:T',
    y='Product A Sales:Q'
).properties(
    title='Product A Sales - Area Chart',
    width=700,
    height=400
)
# Display with: chart3

# Example 4: Stacked Area Chart
chart4 = alt.Chart(df_melted).mark_area(opacity=0.7).encode(
    x='Date:T',
    y='sales:Q',
    color='product:N'
).properties(
    title='Total Sales - Stacked Area Chart',
    width=700,
    height=400
)
# Display with: chart4

On obtient les graphiques suivants :

Décomposons le code :

• Altair a une structure légèrement différente de Matplotlib et Plotly. Il faut un peu de pratique pour le comprendre, mais une fois que vous l’avez compris, son caractère intuitif facilite la création de nouvelles visualisations.
• Tout dans Altair tourne autour du Chart objet dans lequel vous transmettez vos données. Ensuite, vous utilisez un mark_ fonction pour spécifier le type de graphique que vous souhaitez créer, et le encoding fonction pour spécifier quelles variables correspondront à quels éléments visuels sur le graphique (par exemple, axe des x, axe des y, couleur, taille, etc.).
• Pour le graphique linéaire, nous utilisons le mark_line fonction, puis précisez que nous voulons la date sur l’axe des x et les ventes sur l’axe des y.
• Le melt la fonction ne change pas les données elles-mêmes, juste leurs structure. Il regroupe tous les produits dans une seule colonne, un « format long » qui se prête mieux au modèle de visualisation d’Altair. Pour plus de détails, consultez cet article utile.
• Une fois que nous avons transformé les données comme ci-dessus, nous pouvons créer notre graphique à lignes multiples simplement en ajoutant un encodage « couleur », comme indiqué dans le code. Cela a été rendu possible car tous les types de produits sont désormais disponibles dans une seule colonne et nous pouvons demander à Altair de les distinguer par couleur.
• Le code de génération de graphiques en aires met en valeur la beauté de la structure d’Altair. Tout reste pareil : il vous suffit de changer la fonction utilisée pour mark_area!

Au fur et à mesure que vous explorerez d’autres types de visualisations par vous-même (et dans les prochains articles !), le modèle d’Altair pour créer des visualisations deviendra plus facile à mettre en œuvre (et, espérons-le, à apprécier).

Quelle est la prochaine étape ?

Dans les prochains articles, j’expliquerai comment utiliser ces bibliothèques pour créer des types supplémentaires de visualisations. Au fur et à mesure de votre apprentissage, rappelez-vous que le but de ces articles est pas maîtriser n’importe quel outil. Il s’agit d’apprendre la visualisation des données de manière holistique, et j’espère que vous avez quitté cet article avec une meilleure compréhension de la façon dont les données de séries chronologiques sont visualisées.

Quant au code, ce confort vient avec le temps et la pratique. Pour l’instant, n’hésitez pas à prendre les exemples ci-dessus et à les ajuster à vos propres données si nécessaire.

Jusqu’à la prochaine fois.

Références