Python >> Tutoriel Python >  >> Python

Python Dash :Comment créer un beau tableau de bord en 3 étapes

La visualisation des données est une boîte à outils importante pour un data scientist. Construire de beaux tableaux de bord est une compétence importante à acquérir si vous envisagez de montrer vos idées à un cadre de niveau C.

Dans cet article de blog, vous obtiendrez une introduction à un framework de visualisation en Python. Vous apprendrez à créer un tableau de bord, de la récupération des données à la création de widgets interactifs à l'aide de Dash, un framework de visualisation en Python.

📖 Apprentissage complémentaire :Pour un guide complet sur la façon de créer votre belle application de tableau de bord en Python pur, consultez notre livre à succès Python Dash avec l'éditeur NoStarch basé à San Francisco.

Présentation de Dash

Le cadre de tableau de bord peut être divisé en deux composants

  1. Mises en page :La mise en page est l'élément d'interface utilisateur de votre tableau de bord. Vous pouvez utiliser des composants tels que Button, Table, Radio Buttons et les définir dans votre mise en page.
  2. Rappels :Les rappels fournissent la fonctionnalité pour ajouter de la réactivité à votre tableau de bord. Cela fonctionne en utilisant une fonction de décorateur pour définir les entités d'entrée et de sortie.

Dans la section suivante, vous apprendrez à créer un tableau de bord simple pour visualiser les performances du marathon de 1991 à 2018. 

Importer les bibliothèques

Importons d'abord toutes les bibliothèques d'importation

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_split_pane
import plotly.express as px
import pandas as pd
from datetime import datetime

Nous importons le pandas bibliothèque pour charger les données et la bibliothèque de tableau de bord pour construire le tableau de bord.

Le plotly express est construite sur Plotly pour fournir des fonctionnalités faciles à utiliser pour la visualisation des données.

Tout d'abord, nous commencerons par télécharger les données. Les données sont accessibles sur Kaggle via le lien suivant.

Étape 1 :Initialiser une application Dash

Nous commençons par initialiser une application dash et en utilisant la commande run_server pour démarrer le serveur.

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
 
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
 
 
if __name__ == '__main__':
   app.run_server(debug=True)

Étape 2 :Création de la mise en page

Nous commencerons par diviser notre couche d'interface utilisateur en deux parties - le volet de gauche affichera la fenêtre des paramètres qui comprendra une option pour sélectionner l'année. Le volet de droite comprendra une fenêtre graphique affichant un diagramme à barres.

app.layout = html.Div(children=[
   html.H1(children='World Marathon Analysis',
    style={'textAlign': 'center'}),
  
   dash_split_pane.DashSplitPane(
   children=[
  
   html.Div(children=[
        html.H1(children='Settings', style={'textAlign': 'center'}),
           ], style={'margin-left': '50%', 'verticalAlign': 'middle'}),
   html.Div(children=[
        html.H1(children='Graph View', style={'textAlign': 'center'}),
            ])
   ],
   id="splitter",
   split="vertical",
   size=1000,
)
  
])

On construit deux div éléments - un pour le volet de gauche et l'autre pour le volet de droite. Pour aligner les éléments d'en-tête au centre, nous utilisons le style balise et en utilisant la syntaxe CSS standard pour positionner les éléments HTML.

Si vous démarrez maintenant le serveur et accédez à votre navigateur sur localhost:8050 , vous verrez la fenêtre suivante.

Étape 3 :Création du widget déroulant et de la fenêtre graphique

Une fois que nous avons la configuration de base de la mise en page, nous pouvons continuer avec les parties restantes.

Charger les données

Nous commençons par charger les données à l'aide de la bibliothèque pandas

def convert_to_time(time_in_some_format):
   time_obj =  datetime.strptime(time_in_some_format, '%H:%M:%S').time()
   return time_obj
 
def get_data():
  df = pd.read_csv('world_marathon_majors.csv', engine="python")
  df['time'] = df['time'].apply(convert_to_time)
  return df

Nous créons deux fonctions pour charger les données et convertir la valeur de temps en datetime valeurs d'objet.

Le tableau ci-dessous montre les cinq premières lignes de l'ensemble de données.

Chaque ligne se compose de

  1. L'année le marathon a eu lieu
  2. Le gagnant du marathon cette année-là
  3. Le genre du gagnant
  4. Le pays le gagnant représente
  5. Le temps pour finir la course
  6. Le pays dans lequel le marathon a eu lieu.

Étendre la mise en page

L'étape suivante consiste à étendre notre couche de mise en page en ajoutant le widget déroulant et la fenêtre graphique.

app.layout = html.Div(children=[
   html.H1(children='World Marathon Analysis',
    style={'textAlign': 'center'}),
  
   dash_split_pane.DashSplitPane(
   children=[
  
   html.Div(children=[
        html.H1(children='Settings', style={'textAlign': 'center'}),
        dcc.Dropdown(id='dropdown-menu', options=[{'label':x, 'value': x} for x in range(df['year'].min(), df['year'].max()+1)],
         value=df['year'].max(),
         style={'width': '220px','font-size': '90%','height': '40px',}
        )
    ], style={'margin-left': '50%', 'verticalAlign': 'middle'}),
   html.Div(children=[
        html.H1(children='Graph View', style={'textAlign': 'center'}),
        dcc.Graph( id='input-graph',figure=get_default_data())
    ]) 
   ],
   id="splitter",
   split="vertical",
   size=1000,
)
])

Nous donnons au widget déroulant un identifiant unique appelé dropdown-menu et la fenêtre graphique reçoit un id input-graph.

Rappels

Les rappels sont utilisés pour permettre la communication entre deux widgets.

Nous définissons une fonction appelée update_output_div qui prend la valeur de l'année chaque fois que le menu déroulant est modifié.

A chaque modification de la valeur de la liste déroulante, la fonction update_output_div est exécuté et un diagramme à barres est dessiné pour indiquer les meilleurs pays qui ont remporté la course.

@app.callback(
   dash.dependencies.Output('input-graph', 'figure'),
   [dash.dependencies.Input('dropdown-menu', 'value')]
)
def update_output_div(value):
   test_sample = df[df['year'] == value]
   test_sample = test_sample.groupby('country')['time'].min().reset_index()
   tt = test_sample.sort_values(by=['time'])
   fig = px.bar(tt, y='country', x='time', orientation='h', hover_data=["time"], )
   return fig

Démo en direct

Voyons maintenant le tableau de bord en action.

Résumé

Dans cet article de blog, vous avez appris à créer un tableau de bord simple en Python. Vous pouvez étendre le tableau de bord ci-dessus pour inclure plus de widgets et afficher plus de graphiques pour une analyse plus approfondie.

Livre de tableau de bord Python


Si vous souhaitez en savoir plus sur la création de superbes applications de tableau de bord en Python, consultez notre nouveau livre Python Dash.

Vous avez déjà vu des tableaux de bord ; pensez à des visualisations des résultats des élections que vous pouvez mettre à jour en temps réel ou à des cartes de la population que vous pouvez filtrer par groupe démographique.

Avec la bibliothèque Python Dash, vous allez créer des tableaux de bord analytiques qui présentent les données de manière efficace, utilisable et élégante en quelques lignes de code seulement.

Obtenez le livre sur NoStarch ou Amazon !