Comment créer un histogramme avec Plotly

Les histogrammes sont des représentations graphiques populaires où des points de données sont regroupés par intervalles. On les rencontre souvent en statistiques pour afficher la quantité d’une variable qui apparaît dans une certaine plage. Par exemple, votre professeur de maths utilisait peut-être un histogramme pour visualiser la répartition des notes dans votre classe. 

Figure 1 : Exemple d’histogramme affichant la distribution des notes d’une classe. 

[Source : Example Histogram with Matplotlib] 

Leur succession de barres de hauteurs variables rappelle les diagrammes en barres, à ceci près que les histogrammes servent à visualiser des données quantitatives, et non des données catégorielles comme les diagrammes en barres. 

En général, les données numériques visualisées en histogrammes sont continues, donc potentiellement infinies. Tracer directement toutes les valeurs d’une variable continue est souvent peu pratique. Les histogrammes contournent ce problème en regroupant plusieurs points dans des intervalles logiques (appelés « bins » ou classes) afin de les visualiser efficacement. 

Dans ce tutoriel, nous verrons comment créer des histogrammes en Python avec la bibliothèque de visualisation de données Plotly. Nous verrons également différentes manières de personnaliser un histogramme Plotly et, plus largement, pourquoi la visualisation de données est incontournable. 

Consultez ce cahier DataLab pour suivre le code du tutoriel. 

L’importance de la visualisation de données dans l’analyse

Aucune entreprise ne peut prétendre ne pas tirer profit d’une meilleure compréhension de ses données. Le rôle de l’analyse de données est d’aider les entreprises à optimiser leurs performances et à améliorer leurs résultats ; cette discipline s’applique à tous les domaines où les données existent, car l’insight est un véritable levier. 

Les visualisations de données sont des représentations graphiques utilisées pour présenter l’information et les données. Leur objectif est de résumer les données sous un format facilement compréhensible, en mettant en évidence les enseignements clés. 

Autrement dit, les entreprises s’appuient sur la visualisation pour repérer rapidement des tendances qui seraient difficiles à déceler sans support visuel. Les représentations graphiques facilitent une communication universelle, rapide et efficace. 

Introduction à Plotly

Plotly est une bibliothèque de visualisation de données interactive et open source pour Python et R, écrite en JavaScript. Dans cet article, nous nous concentrerons sur Plotly pour Python, parfois appelé « plotly.py » pour le distinguer de sa version JavaScript. 

Astuce : suivez les cours Introduction to data visualization with Plotly in Python ou Interactive data visualization with Plotly in R pour bien prendre en main Plotly.  

Beaucoup d’utilisateurs de Plotly disent avoir été d’abord « séduits » par l’esthétique moderne que la bibliothèque permet d’obtenir très facilement. Plotly pour Python permet de créer de superbes visualisations web interactives qui peuvent être : 

• affichées dans des notebooks Jupyter, 
• enregistrées en fichiers HTML autonomes, 
• intégrées à des applications web 100 % Python avec Dash.

Autre atout de Plotly : la richesse des types de graphiques disponibles. La bibliothèque prend en charge plus de 40 graphiques couvrant des cas d’usage variés, dont la statistique, la finance, la géographie, les sciences et la 3D. 

Il est facile d’exporter des visualisations créées avec Plotly grâce à son intégration avec Kaleido – un utilitaire d’export d’images. Il existe aussi un large support hors web, notamment pour les éditeurs de bureau (Spyder, PyCharm, etc.) et la publication de documents statiques (par exemple, l’export de notebooks Jupyter en PDF). 

L’installation de plotly.py est simple ; vous pouvez l’installer avec pip : 

pip install plotly>=5.11.0, <5.12.0

Ou avec Conda : 

conda install -c plotly plotly>=5.11.0, <5.12.0

Remarque : il est recommandé d’installer les bibliothèques dans un environnement virtuel afin d’isoler les dépendances de vos projets. Vous pouvez aussi démarrer dans un cahier DataLab – un IDE Data Science Python & R dans le cloud. 

Utiliser DataLab

DataLab est un environnement de développement intégré (IDE) en ligne qui permet d’écrire du code, d’analyser des données en solo ou en équipe, et de partager des insights. En d’autres termes, pensez à DataLab comme à un Google Docs conçu pour la data science ; pour en savoir plus, consultez notre article Using DataLab in the Classroom.

Pour cette tâche, nous allons créer un cahier à partir d’un jeu de données. DataCamp propose heureusement un catalogue riche et grandissant de jeux de données intéressants à explorer. Quand vous créez un cahier à partir d’un dataset, l’environnement contient toutes les données préconfigurées et une brève description pour vous permettre de passer à l’action immédiatement.   

Voici les étapes pour créer un cahier à partir d’un dataset DataCamp : 

• Dans l’application DataLab, sélectionnez « Datasets » dans la barre latérale.
• Choisissez un dataset qui vous intéresse. Une boîte de dialogue s’affiche avec un aperçu du dataset sélectionné, incluant un dictionnaire des variables et un lien vers la source, un choix de langage (Python ou R), ainsi qu’un aperçu des publications réalisées par d’autres utilisateurs avec ce dataset.
• Cliquez sur Create workbook.

Figure 2 : GIF illustrant les étapes pour créer un cahier à partir d’un dataset.

Remarque : ouvrez Creating a Plotly Histogram with Olympics Data pour suivre le code.

Nous utiliserons le dataset Olympics Data issu de la collection interne de DataCamp. D’après la description, il s’agit d’un jeu de données historique couvrant les Jeux olympiques modernes d’Athènes 1896 à Rio 2016. Chaque ligne correspond à un athlète (271116 instances) ayant participé à une épreuve olympique et précise la médaille obtenue (le cas échéant).

Les colonnes sont les suivantes : 

À ce stade, les colonnes pertinentes pour construire un histogramme sont : age, height, weight et year. En effet, les histogrammes s’appuient sur des valeurs numériques continues : ils représentent la distribution de données numériques, regroupées en classes avec un effectif par classe. 

Nous utiliserons la colonne age pour créer notre histogramme. 

Créer un histogramme Plotly

Créer un histogramme en Python avec Plotly est très simple ; nous pouvons utiliser Plotly Express, une interface de haut niveau facile à prendre en main…

import plotly.express as px

# Create a histogram
fig = px.histogram(olympic_data.age, x="age",
                  title="Distribution of Athletes age")
fig.show()

Figure 3 : Un histogramme créé avec Plotly Express

Nous pouvons aussi utiliser Graph Objects.

import plotly.graph_objects as go

fig = go.Figure(data=[go.Histogram(x=olympic_data.age)])

# add the title
fig.update_layout(title=dict(text="Distribution of Athletes age"))
fig.show()

Figure 4 : Un histogramme créé avec Plotly Graph Objects. 

Les fonctions express de Plotly appellent en interne graph_objects, qui renvoie une figure. Plotly Express est donc utile car il permet de créer des visualisations qui nécessiteraient normalement plus de lignes de code avec graph_objects. 

« Le module plotly.express (généralement importé sous l’alias px) contient des fonctions capables de créer des figures complètes et est appelé Plotly Express ou PX. Plotly Express fait partie intégrante de Plotly et constitue le point de départ recommandé pour créer la plupart des figures courantes. Chaque fonction Plotly Express utilise en interne les graph objects et renvoie une instance de plotly.graph_objects.Figure. »

Source : Plotly Express in Python. 

Même si express est la porte d’entrée recommandée, nous allons utiliser graph_objects pour personnaliser l’apparence de notre histogramme, car cette approche offre davantage de flexibilité.  

Personnaliser l’apparence de l’histogramme Plotly

Pour l’instant, notre histogramme est assez sobre. Donnons-lui plus de relief en modifiant la police du titre et en ajoutant des libellés d’axes. 

# Create histogram
fig = go.Figure(data=[go.Histogram(x=olympic_data.age)])

fig.update_layout(
    # Set the global font
    font = {
        "family":"Times new Roman",
        "size":16
    },
    # Update title font
    title = {
        "text": "Distribution of Athletes age",
        "y": 0.9, # Sets the y position with respect to `yref`
        "x": 0.5, # Sets the x position of title with respect to `xref`
        "xanchor":"center", # Sets the title's horizontal alignment with respect to its x position
        "yanchor": "top", # Sets the title's vertical alignment with respect to its y position. "      
        "font": { # Only configures font for title
            "family":"Arial",
            "size":20,
            "color": "red"
        }
    }
)

# Add X and Y labels
fig.update_xaxes(title_text="Age")
fig.update_yaxes(title_text="Number of Athletes")

# Display plot
fig.show()

Figure 5 : Histogramme Plotly avec un titre mis à jour et des libellés d’axes. 

Avec ces ajouts, notre histogramme devient plus informatif. 

Ensuite, modifions la taille des classes. 

# Create histogram
fig = go.Figure(data = [
    go.Histogram(
        x = olympic_data.age,
        xbins=go.histogram.XBins(size=5) # Change the bin size to 5
    )
  ]
)

Figure 6 : Histogramme Plotly avec une taille de classe égale à 5. 

Dans le code ci-dessus, nous définissons le paramètre xbins de l’instance go.Histogram sur une instance go.histogram.Xbins et indiquons la taille de classe souhaitée. Notez que nous aurions aussi pu effectuer cette opération avec un objet dict aux propriétés compatibles. 

Enfin, changeons la couleur des barres en orange pour faire ressortir la visualisation. 

# Create histogram
fig = go.Figure(data = [
    go.Histogram(
        x = olympic_data.age,
        xbins=go.histogram.XBins(size=5), # Change the bin size
        marker=go.histogram.Marker(color="orange") # Change the color
    )
  ]
)

Figure 7 : Histogramme Plotly avec des barres orange.

Bien mieux. 

Dans le code ci-dessus, nous définissons le paramètre marker de l’instance go.Histogram sur une instance go.histogram.Marker et spécifions la couleur souhaitée en paramètre. 

Vous pouvez aller plus loin avec de nombreuses autres personnalisations, par exemple en ajoutant du texte au survol. 

Activer le texte au survol

Actuellement, un texte s’affiche quand vous survolez une barre – voir la figure 8. 

Figure 8 : Texte de survol actuellement affiché au passage de la souris. 

Ce n’est pas très explicite. En visualisation, nous voulons des graphiques autoportants – jusque dans le texte de survol. Mettons donc à jour les informations affichées au survol d’une classe. 

# Create histogram
fig = go.Figure(data = [
    go.Histogram(
        x = olympic_data.age,
        xbins=go.histogram.XBins(size=5), # Change the bin size
        marker=go.histogram.Marker(color="orange"), # Change the color
        hovertemplate="<br>".join([
            "Age Range: %{x}",
            "Number of Athletes: %{y}"]) # Make hover text more informative
    )
  ]
)

Figure 9 : Texte de survol mis à jour. 

Le texte affiché au survol d’une barre est désormais bien plus informatif, ce qui facilite l’interprétation. Nous l’avons obtenu en modifiant le paramètre hovertemplate dans notre instance go.Histogram. 

Ajouter des options de filtrage

Plus haut, nous avons indiqué que nous pouvions construire un histogramme à partir des variables age, height, weight et year. Inutile de créer un histogramme séparé pour chacune. 

Nous pouvons plutôt créer un seul histogramme et ajouter des boutons de filtre pour basculer la variable affichée dans la visualisation. 

Voici à quoi cela ressemble en code.

"""
Starter code provided by vestland on StackOverflow
Link: https://bit.ly/3ipqOMo
"""
# continuous features
continuous_vars = ["age", "height", "weight", "year"]

# plotly
fig = go.Figure()

# set up ONE trace
fig.add_trace(
    go.Histogram(x = olympic_data.age,
                xbins=go.histogram.XBins(size=5), # Change the bin size
                marker=go.histogram.Marker(color="orange"), # Change the color
            )
)

buttons = []

# button with one option for each dataframe
for col in continuous_vars:
    buttons.append(dict(method='restyle',
                        label=col,
                        visible=True,
                        args=[{"x":[olympic_data[col]],
                              "type":'histogram', [0]],
                        )
                  )

# some adjustments to the updatemenus
updatemenu = []
your_menu = dict()
updatemenu.append(your_menu)

updatemenu[0]['buttons'] = buttons
updatemenu[0]['direction'] = 'down'
updatemenu[0]['showactive'] = True

# add dropdown menus to the figure
fig.update_layout(showlegend=False, updatemenus=updatemenu)
fig.show()

Figure 10 : Histogramme avec filtres permettant de parcourir plusieurs variables dans une même visualisation.

Et voilà. N’oubliez pas de consulter le cahier Creating a Plotly Histogram with Olympics Data et d’expérimenter avec ce que nous avons construit dans ce tutoriel. 

Pour conclure 

Vous savez désormais créer un histogramme avec Plotly en Python. Dans ce tutoriel, nous avons vu :

• ce qu’est un histogramme et comment il fonctionne ;
• l’importance de la visualisation de données dans l’analyse ;
• comment démarrer avec DataLab ;
• comment créer un histogramme avec Plotly ;
• différentes façons de personnaliser votre histogramme ;
• comment ajouter des filtres. 

Pour aller plus loin sur les histogrammes ou Plotly, consultez les liens ci-dessous :

• Histograms in Matplotlib
• How to make a Histogram with ggplot2
• Intermediate Interactive Data Visualization with Plotly in R