Créer des tableaux de bord avec Python et Dash

Recommandation : utilisez l'éditeur de scène NSDT pour créer rapidement une scène d'application 3D

introduire

Dans le monde de la science et de l'analyse des données, la puissance des données est libérée non seulement par l'extraction d'informations, mais également par la communication efficace de ces informations ; c'est là que la visualisation des données entre en jeu.

La visualisation de données est la représentation graphique d'informations et de données. Il utilise des éléments visuels tels que des tableaux, des graphiques et des cartes pour faciliter la visualisation des modèles, des tendances et des valeurs aberrantes dans les données brutes. Pour les data scientists et les analystes, la visualisation des données est un outil essentiel qui aide à comprendre les données plus rapidement et plus précisément, prend en charge la narration avec les données et aide à prendre des décisions basées sur les données.

Dans cet article, vous apprendrez à utiliser  Python  et  le framework Dash  pour créer un tableau de bord permettant de visualiser la distribution et la catégorisation du contenu de Netflix.

Qu’est-ce que Dash ?

Dash est un framework open source low-code développé par Plotly pour créer des applications Web analytiques en Python pur. Traditionnellement, JavaScript et HTML peuvent être requis à ces fins, ce qui nécessite une expertise dans les technologies back-end (Python) et front-end (JavaScript, HTML).

Cependant, Dash comble cette lacune en permettant aux data scientists et aux analystes de créer de superbes tableaux de bord interactifs en utilisant uniquement Python . Cet aspect du développement low-code fait de Dash un choix approprié pour créer des tableaux de bord analytiques, en particulier pour ceux qui sont principalement familiers avec Python.

Analyse des ensembles de données

Maintenant que vous connaissez Dash, commençons notre projet pratique. Vous utiliserez  l'ensemble de données Netflix Films et émissions de télévision disponible sur  Kaggle   créé  par Shivam Bansal .

Cet ensemble de données contient des détails sur les films et émissions de télévision disponibles sur Netflix à partir de 2021, tels que le type de contenu, le titre, le réalisateur, la distribution, le pays de production, l'année de sortie, la classification, la durée, etc.

Même si cet ensemble de données a été créé en 2021, il reste une ressource inestimable pour développer les compétences en visualisation de données et comprendre les tendances dans les médias et le divertissement.

A l'aide de cet ensemble de données, vous créerez un tableau de bord qui permet de visualiser les points suivants :

1. Distribution géographique du contenu : une carte montrant les changements dans la production de contenu dans différents pays au fil des ans.
2. Catégorisation du contenu : cette visualisation décompose le contenu de Netflix en films et en films pour voir quels genres se démarquent le plus.

Configurer l'espace de travail du projet

Commençons par   créer un répertoire pour un projet appelé netflix-dashboard , puis initialisons et activons un environnement virtuel Python avec la commande suivante :

# Linux & MacOS
mkdir netflix-dashboard && cd netflix-dashboard
python3 -m venv netflix-venv && source netflix-venv/bin/activate

# Windows Powershell
mkdir netflix-dashboard && cd netflix-dashboard
python -m venv netflix-venv && .\netflix-venv\Scripts\activate

Ensuite, vous devez installer des packages externes. Vous l'utiliserez pour manipuler des données, créer des tableaux de bord, créer des graphiques et ajouter du style aux tableaux de bord :pandasdashplotlydash-bootstrap-components

# Linux & MacOS
pip3 install pandas dash plotly dash-bootstrap-components

# Windows Powershell
pip install pandas dash plotly dash-bootstrap-components

nettoyer l'ensemble de données

Parcourez l'ensemble de données Netflix et vous trouverez les valeurs manquantes dans les colonnes , et. Il est également pratique de convertir les valeurs des colonnes pour faciliter l'analyse.directorcastcountrydate_addedstringdatetime

Pour nettoyer l'ensemble de données, créez un nouveau fichier clean_netflix_dataset.py avec le code suivant , puis exécutez-le :

import pandas as pd

# Load the dataset
df = pd.read_csv('netflix_titles.csv')

# Fill missing values
df['director'].fillna('No director', inplace=True)
df['cast'].fillna('No cast', inplace=True)
df['country'].fillna('No country', inplace=True)

# Drop missing and duplicate values
df.dropna(inplace=True)
df.drop_duplicates(inplace=True)

# Strip whitespaces from the `date_added` col and convert values to `datetime`
df['date_added'] = pd.to_datetime(df['date_added'].str.strip())

# Save the cleaned dataset
df.to_csv('netflix_titles.csv', index=False)

Premiers pas avec Dash

Une fois que vous avez configuré votre espace de travail et nettoyé votre ensemble de données, vous êtes prêt à commencer à travailler sur votre tableau de bord. Créez un nouveau fichier  app.py avec le code suivant :

from dash import Dash, dash_table, html
import pandas as pd

# Initialize a Dash app
app = Dash(__name__)

# Define the app layout
app.layout = html.Div([
        html.H1('Netflix Movies and TV Shows Dashboard'),
        html.Hr(),
])

# Start the Dash app in local development mode
if __name__ == '__main__':
    app.run_server(debug=True)

Décomposons le code dans  app.py :

• app = Dash(__name__): Cette ligne initialise une nouvelle application Dash. Considérez-le comme la base de votre candidature.
• app.layout = html.Div(…): Cet attribut vous permet d'écrire du code de type HTML pour concevoir l'interface utilisateur de votre application. La mise en page ci-dessus utilise un élément d'en-tête pour le titre du tableau de bord et un élément de règle horizontale sous l'en-tête.app.layouthtml.H1(…)html.Hr()
• app.run(debug=True): Cette ligne démarre un serveur de développement qui sert votre application Dash en mode de développement local. Dash utilise Flask , un framework de serveur Web léger, pour diffuser votre application sur les navigateurs Web.

Après avoir exécuté  app.py  , vous verrez un message dans le terminal indiquant que votre application Dash est en cours d'exécution,  accessible sur http://127.0.0.1:8050/ . Ouvrez cette URL dans un navigateur Web pour l'afficher :

Votre première application Dash !

Il s'avère que cela semble assez simple, non ? Ne t'inquiète pas! Cette section vise à présenter la structure et les composants les plus élémentaires de l'application Dash. Vous ajouterez bientôt plus de fonctionnalités et de composants pour en faire un superbe tableau de bord !

Intégrer les composants d'amorçage du tableau de bord

L'étape suivante consiste à coder la mise en page du tableau de bord et à y ajouter quelques styles ! Pour cela, vous pouvez utiliser Dash Bootstrap Components (DBC), une bibliothèque qui fournit des composants d'amorçage pour Dash , vous permettant de développer des applications stylisées avec des mises en page réactives.

Les tableaux de bord seront présentés sous forme d'onglets , ce qui offre un moyen compact d'organiser différents types d'informations dans le même espace. Chaque onglet correspondra à une visualisation différente.

Allons-y et modifions  le contenu de app.py  pour incorporer DBC :

from dash import Dash,dcc, html
import pandas as pd
import dash_bootstrap_components as dbc

# Initialize the Dash app and import the Bootstrap theme to style the dashboard
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(
    [
        dcc.Store(id='store'),
        html.H1('Netflix Movies and TV Shows Dashboard'),
        html.Hr(),
        dbc.Tabs(
            [
                dbc.Tab(label='Geographical content distribution', tab_id='tab1'),
                dbc.Tab(label='Content classification', tab_id='tab2'),
            ],
            id='tabs',
            active_tab='tab1',
        ),
        html.Div(id='tab-content', className='p-4'),
    ]
)

if __name__ == '__main__':
    app.run(debug=True)

Dans cette présentation modifiée, vous verrez les nouveaux composants :

• dbc.Container: utilisé comme composant de niveau supérieur pour envelopper l’intégralité de la présentation du tableau de bord dans un conteneur réactif et flexible.dbc.Container
• dcc.Store: Ce composant Dash Core vous permet de stocker des données côté client (sur le navigateur de l'utilisateur), améliorant ainsi les performances de votre application en conservant les données localement.
• dbc.Tabset : chacun représente un onglet distinct qui contiendra différentes visualisations. Cet attribut est ce qui est affiché sur l'onglet lui-même et identifie l'onglet. La propriété est utilisée pour spécifier l'onglet actif au démarrage de l'application Dash.dbc.Tabdbc.Tablabeltab_idactive_tabdbc.Tabs

Exécutez maintenant  app.py. Le tableau de bord résultant aura désormais une disposition de style bootstrap avec deux onglets vides :

Fusionner le bootstrap pour une disposition de style onglet

c'est bon d'y aller ! Vous êtes enfin prêt à ajouter des visualisations à votre tableau de bord.

Ajouter des rappels et des visualisations

Lors de l'utilisation de Dash, l'interactivité est obtenue grâce aux fonctions de rappel . Une fonction de rappel est une fonction qui est appelée automatiquement lorsqu'une propriété d'entrée change. Il est nommé « rappel » car Dash le « rappelle » chaque fois qu'il y a un changement dans l'application.

Dans ce tableau de bord, vous utiliserez des rappels pour afficher les visualisations associées dans l'onglet sélectionné, et chaque visualisation sera stockée dans son propre fichier Python sous un nouveau répertoire de composants pour une meilleure organisation et modularisation de la structure du projet .

Visualisation de la distribution géographique du contenu

Créons un nouveau répertoire appelé  composants  et créons-y  le fichier Geographic_content.py  qui générera une carte zonale illustrant comment la production de contenu chez Netflix varie selon les pays au fil des années :

import pandas as pd
import plotly.express as px
from dash import dcc, html

df = pd.read_csv('netflix_titles.csv')

# Filter out entries without country information and if there are multiple production countries,
# consider the first one as the production country
df['country'] = df['country'].str.split(',').apply(lambda x: x[0].strip() if isinstance(x, list) else None)

# Extract the year from the date_added column
df['year_added'] = pd.to_datetime(df['date_added']).dt.year
df = df.dropna(subset=['country', 'year_added'])

# Compute the count of content produced by each country for each year
df_counts = df.groupby(['country', 'year_added']).size().reset_index(name='count')

# Sort the DataFrame by 'year_added' to ensure the animation frames are in ascending order
df_counts = df_counts.sort_values('year_added')

# Create the choropleth map with a slider for the year
fig1 = px.choropleth(df_counts,
                     locations='country',
                     locationmode='country names',
                     color='count',
                     hover_name='country',
                     animation_frame='year_added',
                     projection='natural earth',
                     title='Content produced by countries over the years',
                     color_continuous_scale='YlGnBu',
                     range_color=[0, df_counts['count'].max()])
fig1.update_layout(width=1280, height=720, title_x=0.5)

# Compute the count of content produced for each year by type and fill zeros for missing type-year pairs
df_year_counts = df.groupby(['year_added', 'type']).size().reset_index(name='count')

# Create the line chart using plotly express
fig2 = px.line(df_year_counts, x='year_added', y='count', color='type',
               title='Content distribution by type over the years',
               markers=True, color_discrete_map={'Movie': 'dodgerblue', 'TV Show': 'darkblue'})
fig2.update_traces(marker=dict(size=12))
fig2.update_layout(width=1280, height=720, title_x=0.5)

layout = html.Div([
    dcc.Graph(figure=fig1),
    html.Hr(),
    dcc.Graph(figure=fig2)
])

Le code ci-dessus filtre et regroupe les données, puis calcule le nombre de contenus générés par an pour chaque pays dans le bloc de données.'country''year_added'df_counts

La fonction construit ensuite un tracé cartographique en utilisant les colonnes du bloc de données comme valeurs pour ses arguments :px.choropletdf_counts

• locations='country': Permet de préciser les valeurs de géolocalisation à inclure dans la colonne.'country'
• locationmode='country names': Ce paramètre « indique à la fonction » que les noms de pays sont fournis, puisque Plotly Express prend également en charge d'autres modèles de localisation, tels que les codes de pays ISO-3 ou les États américains.locations
• color='count': Utilisé pour spécifier les données numériques utilisées pour colorer la carte. Ici, il s'agit de la colonne qui contient le nombre de contenus produits par pays et par an.'count'
• color_continous_scale='YlGnBu': Construit une échelle de couleurs continue pour chaque pays de la carte lorsque la colonne représentée contient des données numériques.color
• animation_frame='year_added': Ce paramètre crée une animation sur la colonne. Il ajoute un curseur annuel à la carte, vous permettant de voir des animations représentant l'évolution de la production de contenu dans chaque pays d'année en année.'year_added'
• projection='natural earth': Ce paramètre n'utilise aucune colonne dans le bloc de données ; cependant, cette valeur est requise pour définir la projection avec une carte du monde.df_counts'natural earth'

Juste en dessous du tableau de répartition, vous trouverez un graphique linéaire avec des marqueurs montrant l'évolution du volume de contenu par genre (émission de télévision ou film) au fil des ans.

Pour générer un graphique linéaire, une nouvelle trame de données est créée qui regroupe les données brutes par colonnes et compte le contenu de chaque regroupement.df_year_countsdf'year_added''type'

Ces données groupées se voient ensuite attribuer le paramètre AND à la colonne AND, respectivement, le paramètre AND étant défini pour différencier les émissions de télévision des films.px.line'x''y''year_added''count''color''type'

Visualisation de la catégorie de contenu

L'étape suivante consiste à créer un nouveau fichier appelé content_classification.py qui  générera un dendrogramme qui visualise le contenu de Netflix en termes de type et de type :

import pandas as pd
import plotly.express as px
from dash import dcc, html

df = pd.read_csv('netflix_titles.csv')

# Split the listed_in column and explode to handle multiple genres
df['listed_in'] = df['listed_in'].str.split(', ')
df = df.explode('listed_in')

# Compute the count of each combination of type and genre
df_counts = df.groupby(['type', 'listed_in']).size().reset_index(name='count')

fig = px.treemap(df_counts, path=['type', 'listed_in'], values='count', color='count',
                 color_continuous_scale='Ice', title='Content by type and genre')

fig.update_layout(width=1280, height=960, title_x=0.5)
fig.update_traces(textinfo='label+percent entry', textfont_size=14)

layout = html.Div([
    dcc.Graph(figure=fig),
])

Dans le code ci-dessus, une fois les données chargées, les colonnes sont ajustées pour gérer plusieurs genres par contenu en divisant et en décomposant les genres, créant ainsi une nouvelle ligne pour chaque genre de chaque type de contenu.'listed_in'

Ensuite, créez un bloc de données pour regrouper les données par colonnes et et calculez le nombre pour chaque combinaison de types.df_counts'type''listed_in'

Les colonnes du bloc de données sont ensuite utilisées comme valeurs pour les arguments de la fonction, comme ceci :df_countspx.treemap

• path=['type', 'listed_in']: Ce sont les catégories hiérarchiques représentées dans le dendrogramme. Les colonnes et contiennent respectivement le type de contenu (émission télévisée ou film) et le genre.'type''listed_in'
• values='count': La taille de chaque rectangle du dendrogramme correspond à une colonne représentant la quantité de contenu pour chaque combinaison genre-genre.'count'
• color='count': Cette colonne sert également à colorer les rectangles du dendrogramme.'count'
• color_continous_scale='Ice': Construit une échelle de couleurs continue pour chaque rectangle du dendrogramme lorsque la colonne représentée contient des données numériques.color

Après avoir créé deux nouveaux fichiers de visualisation, la structure actuelle du projet devrait ressembler à ceci :

netflix-dashboard
├── app.py
├── clean_netflix_dataset.py
├── components
│   ├── content_classification.py
│   └── geographical_content.py
├── netflix-venv
│   ├── bin
│   ├── etc
│   ├── include
│   ├── lib
│   ├── pyvenv.cfg
│   └── share
└── netflix_titles.csv

implémenter le rappel

La dernière étape consiste à modifier  app.py  pour importer deux nouvelles visualisations du catalogue de composants et implémenter une fonction de rappel pour restituer le graphique lorsqu'un onglet est sélectionné :

from dash import Dash, dcc, html, Input, Output
import dash_bootstrap_components as dbc
from components import (
    geographical_content,
    content_classification
)

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(
    [
        dcc.Store(id='store'),
        html.H1('Netflix Movies and TV Shows Dashboard'),
        html.Hr(),
        dbc.Tabs(
            [
                dbc.Tab(label='Geographical content distribution', tab_id='tab1'),
                dbc.Tab(label='Content classification', tab_id='tab2'),
            ],
            id='tabs',
            active_tab='tab1',
        ),
        html.Div(id='tab-content', className='p-4'),
    ]
)


# This callback function switches between tabs in a dashboard based on user selection.
# It updates the 'tab-content' component with the layout of the newly selected tab.
@app.callback(Output('tab-content', 'children'), [Input('tabs', 'active_tab')])
def switch_tab(at):
    if at == 'tab1':
        return geographical_content.layout
    elif at == 'tab2':
        return content_classification.layout


if __name__ == '__main__':
    app.run(debug=True)

Les décorateurs de rappel écoutent les changements dans les propriétés des composants, représentés par des objets.@app.callback'active_tab''tabs'Input

La fonction est déclenchée chaque fois que quelque chose change. Cette fonction vérifie l'identifiant et renvoie la mise en page correspondante à restituer dans le Div comme indiqué dans l'objet. Ainsi, lorsque vous changez d'onglet, la visualisation associée s'affichera.'active_tab'switch_tab'active_tab''tab-content'Output

Enfin, exécutez  à nouveau app.py  pour voir un tableau de bord mis à jour avec de nouvelles visualisations :

Tableau de bord des films et émissions de télévision Netflix – Résultats finaux

Résumer

Cet article décrit comment créer un tableau de bord pour explorer et visualiser la distribution et la catégorisation du contenu de Netflix. En tirant parti de la puissance de Python et Dash, vous pouvez désormais créer vos propres visualisations qui fournissent des informations précieuses sur vos données.

Vous pouvez consulter le code complet de ce projet dans le référentiel GitHub suivant : GitHub - gutyoh/netflix-dashboard

Lien d'origine : Créer un tableau de bord avec Python et Dash (mvrlink.com)