Développer des interfaces de visualisation de données en Python avec Dash – Real Python

By | janvier 6, 2021

Python pas cher

Dans le passé, la création d'applications Web analytiques était une tâche pour les développeurs chevronnés qui nécessitaient une connaissance de plusieurs langages et cadres de programmation. Ce n’est plus le cas. De nos jours, vous pouvez créer des interfaces de visualisation de données à l'aide de Python pur. Un outil populaire pour cela est Dash.

Dash donne aux scientifiques des données la possibilité de présenter leurs résultats dans des applications Web interactives. Vous n'avez pas besoin d'être un expert en développement Web. Dans un après-midi, vous pouvez créer et déployer une application Dash à partager avec d'autres.

Dans ce didacticiel, vous apprendrez à:

  • Créer un Application Dash
  • Utiliser Dash composants principaux et Composants HTML
  • Personnalisez le style de votre application Dash
  • Utilisation rappels pour créer des applications interactives
  • Déployez votre application sur Heroku

Vous pouvez télécharger le code source, les données et les ressources de l'exemple d'application que vous allez créer dans ce didacticiel en cliquant sur le lien ci-dessous:

Qu'est-ce que Dash?

Dash est un framework open source pour la création d'interfaces de visualisation de données. Sorti en 2017 en tant que bibliothèque Python, il a été développé pour inclure des implémentations pour R et Julia. Dash aide les data scientists à créer des applications Web analytiques sans avoir besoin de connaissances avancées en développement Web.

Trois technologies constituent le cœur de Dash:

  1. Ballon fournit la fonctionnalité de serveur Web.
  2. React.js rend l'interface utilisateur de la page Web.
  3. Plotly.js génère les graphiques utilisés dans votre application.

Mais vous n’avez pas à vous soucier de faire en sorte que toutes ces technologies fonctionnent ensemble. Dash le fera pour vous. Il vous suffit d'écrire Python, R ou Julia et de le saupoudrer d'un peu de CSS.

Plotly, une entreprise canadienne, a construit Dash et soutient son développement. Vous connaissez peut-être l'entreprise grâce aux bibliothèques graphiques populaires qui partagent son nom. Plotly (la société) a ouvert Dash et l'a publié sous une licence MIT, afin que vous puissiez utiliser Dash sans frais.

Plotly propose également un compagnon commercial de Dash appelé Dash Enterprise. Ce service payant fournit aux entreprises des services d'assistance tels que l'hébergement, le déploiement et la gestion de l'authentification sur les applications Dash. Mais ces fonctionnalités ne font pas partie de l’écosystème open source de Dash.

Dash vous aidera à créer rapidement des tableaux de bord. Si vous avez l'habitude d'analyser des données ou de créer des visualisations de données à l'aide de Python, Dash sera un ajout utile à votre boîte à outils. Voici quelques exemples de ce que vous pouvez faire avec Dash:

Ceci n'est qu'un petit échantillon. Si vous souhaitez voir d'autres cas d'utilisation intéressants, consultez la galerie d'applications Dash.

Si vous vous sentez à l'aise avec les exigences et souhaitez apprendre à utiliser Dash dans votre prochain projet, passez à la section suivante!

Premiers pas avec Dash en Python

Dans ce didacticiel, vous passerez par le processus de bout en bout de création d'un tableau de bord à l'aide de Dash. Si vous suivez les exemples, vous passerez d'un tableau de bord simple sur votre ordinateur local à un tableau de bord stylisé déployé sur Heroku.

Pour créer le tableau de bord, vous utiliserez un ensemble de données sur les ventes et les prix des avocats aux États-Unis entre 2015 et 2018. Cet ensemble de données a été compilé par Justin Kiggins à partir des données du Hass Avocado Board.

Comment configurer votre environnement local

Pour développer votre application, vous aurez besoin d'un nouveau répertoire pour stocker votre code et vos données et d'un environnement virtuel Python 3 propre. Pour les créer, suivez les instructions ci-dessous, en choisissant la version qui correspond à votre système d'exploitation.

Si vous utilisez les fenêtres, puis ouvrez une invite de commande et exécutez ces commandes:

c: > mkdir avocado_analytics && CD avocado_analytics
c: > c:  chemin  vers  python  launcher  python -m venv venv
c: > venv  Scripts  activate.bat

La première commande crée un répertoire pour votre projet et y déplace votre emplacement actuel. La deuxième commande crée un environnement virtuel à cet emplacement. La dernière commande active l'environnement virtuel. Assurez-vous de remplacer le chemin dans la deuxième commande par le chemin de votre lanceur Python 3.

Si vous utilisez macOS ou Linux, puis suivez ces étapes depuis un terminal:

$ mkdir avocado_analytics && CD avocado_analytics
$ python3 -m venv venv
$ la source venv / bin / activer

Les deux premières commandes exécutent les actions suivantes:

  1. Créez un répertoire appelé avocado_analytics
  2. Déplacez votre position actuelle vers le avocado_analytics annuaire
  3. Créez un environnement virtuel propre appelé venv dans ce répertoire

La dernière commande active l'environnement virtuel que vous venez de créer.

Ensuite, vous devez installer les bibliothèques requises. Vous pouvez le faire en utilisant pépin dans votre environnement virtuel. Installez les bibliothèques comme suit:

(venv) $ python -m pip installer tiret==1.13,3 pandas==1.0.5

Cette commande installera Dash et pandas dans votre environnement virtuel. Vous utiliserez des versions spécifiques de ces packages pour vous assurer que vous disposez du même environnement que celui utilisé tout au long de ce didacticiel. En plus de Dash, les pandas vous aideront à lire et à gérer les données que vous utiliserez dans votre application.

Enfin, vous avez besoin de quelques données pour alimenter votre tableau de bord. Vous pouvez télécharger les données ainsi que le code que vous voyez tout au long de ce tutoriel en cliquant sur le lien ci-dessous:

Enregistrez les données sous avocado.csv dans le répertoire racine du projet. À présent, vous devriez avoir un environnement virtuel avec les bibliothèques requises et les données dans le dossier racine de votre projet. La structure de votre projet doit ressembler à ceci:

avocado_analytics /
|
├── venv /
|
└── avocat.csv

Vous êtes prêt à partir! Ensuite, vous allez créer votre première application Dash.

Comment créer une application Dash

À des fins de développement, il est utile de penser au processus de création d’une application Dash en deux étapes:

  1. Définissez l'apparence de votre application à l'aide de l'application disposition.
  2. Utilisation rappels pour déterminer quelles parties de votre application sont interactives et à quoi elles réagissent.

Dans cette section, vous en apprendrez plus sur la mise en page, et dans une section ultérieure, vous apprendrez comment rendre votre tableau de bord interactif. Vous commencerez par configurer tout ce dont vous avez besoin pour initialiser votre application, puis vous définirez la mise en page de votre application.

Initialisation de votre application Dash

Créez un fichier vide nommé app.py dans le répertoire racine de votre projet, puis passez en revue le code de app.py dans cette section. Pour faciliter la copie du code complet, vous trouverez l'intégralité du contenu de app.py à la fin de cette section.

Voici les premières lignes de app.py:

    1importer tiret
    2importer dash_core_components comme dcc
    3importer dash_html_components comme html
    4importer pandas comme pd
    5
    6Les données = pd.read_csv("avocado.csv")
    septLes données = Les données.requete("type == 'conventionnel' et région == 'Albany'")
    8Les données[[[["Date"] = pd.to_datetime(Les données[[[["Date"], format="% Y-% m-%ré")
    9Les données.sort_values("Date", en place=Vrai)
dix
11app = tiret.Tiret(__Nom__)

Sur les lignes 1 à 4, vous importez les bibliothèques requises: tiret, dash_core_components, dash_html_components, et pandas. Chaque bibliothèque fournit un élément de base pour votre application:

  • tiret vous aide à initialiser votre application.
  • dash_core_components vous permet de créer des composants interactifs tels que des graphiques, des listes déroulantes ou des plages de dates.
  • dash_html_components vous permet d'accéder aux balises HTML.
  • pandas vous aide à lire et à organiser les données.

Aux lignes 6 à 9, vous lisez les données et les prétraitez pour les utiliser dans le tableau de bord. Vous filtrez certaines données, car la version actuelle de votre tableau de bord n'est pas interactive et les valeurs tracées n'auraient aucun sens autrement.

À la ligne 11, vous créez une instance du Tiret classe. Si vous avez déjà utilisé Flask, initialiser un Tiret la classe peut sembler familière. Dans Flask, vous initialisez généralement une application WSGI à l'aide de Flacon (__ nom__). De même, pour une application Dash, vous utilisez Dash (__ nom__).

Définition de la disposition de votre application Dash

Ensuite, vous définirez le disposition propriété de votre application. Cette propriété dicte l'apparence de votre application. Dans ce cas, vous utiliserez un en-tête avec une description en dessous et deux graphiques. Voici comment vous le définissez:

13app.disposition = html.Div(
14    les enfants=[[[[
15        html.H1(les enfants="Analyse de l'avocat",),
16        html.P(
17            les enfants="Analyser le comportement des prix de l'avocat"
18            "et le nombre d'avocats vendus aux États-Unis"
19            "entre 2015 et 2018",
20        ),
21        dcc.Graphique(
22            figure=
23                "Les données": [[[[
24                    
25                        "X": Les données[[[["Date"],
26                        "y": Les données[[[["Prix moyen"],
27                        "type": "lignes",
28                    ,
29                ],
30                "disposition": "Titre": "Prix moyen des avocats",
31            ,
32        ),
33        dcc.Graphique(
34            figure=
35                "Les données": [[[[
36                    
37                        "X": Les données[[[["Date"],
38                        "y": Les données[[[["Volume total"],
39                        "type": "lignes",
40                    ,
41                ],
42                "disposition": "Titre": "Avocats vendus",
43            ,
44        ),
45    ]
46)

Ce code définit le disposition propriété du app objet. Cette propriété détermine l'apparence de votre application à l'aide d'une arborescence composée de composants Dash.

Les composants Dash sont pré-emballés dans les bibliothèques Python. Certains d'entre eux sont livrés avec Dash lorsque vous l'installez. Le reste, vous devez installer séparément. Vous verrez deux ensembles de composants dans presque toutes les applications:

  1. Dash HTML Components vous fournit des wrappers Python pour les éléments HTML. Par exemple, vous pouvez utiliser cette bibliothèque pour créer des éléments tels que des paragraphes, des en-têtes ou des listes.
  2. Dash Core Components vous fournit des abstractions Python pour créer des interfaces utilisateur interactives. Vous pouvez l'utiliser pour créer des éléments interactifs tels que des graphiques, des curseurs ou des listes déroulantes.

Aux lignes 13 à 20, vous pouvez voir les composants HTML Dash en pratique. Vous commencez par définir le composant parent, un html.Div. Ensuite, vous ajoutez deux éléments supplémentaires, un titre (html.H1) et un paragraphe (html.P), comme ses enfants.

Ces composants sont équivalents au div, h1, et p Balises HTML. Vous pouvez utiliser les arguments des composants pour modifier les attributs ou le contenu des balises. Par exemple, pour spécifier ce qui entre dans le div tag, vous utilisez le les enfants argument dans html.Div.

Il existe également d'autres arguments dans les composants, tels que style, nom du cours, ou id, qui font référence aux attributs des balises HTML. Vous verrez comment utiliser certaines de ces propriétés pour styliser votre tableau de bord dans la section suivante.

La partie de la mise en page affichée aux lignes 13 à 20 sera transformée en code HTML suivant:

<div>
  <h1>Analyse de l'avocat</h1>
  <p>
    Analyser le comportement des prix de l'avocat et le nombre
    d'avocats vendus aux États-Unis entre 2015 et 2018
  </p>
  
</div>

Ce code HTML est rendu lorsque vous ouvrez votre application dans le navigateur. Il suit la même structure que votre code Python, avec un div balise contenant un h1 et un p élément.

Aux lignes 21 à 24 de l'extrait de code de mise en page, vous pouvez voir le composant graphique de Dash Core Components en pratique. Il y en a deux dcc.Graph composants dans le app.layout. Le premier trace les prix moyens des avocats pendant la période d'étude et le second le nombre d'avocats vendus aux États-Unis pendant la même période.

Sous le capot, Dash utilise Plotly.js pour générer des graphiques. le dcc.Graph les composants attendent un objet figure ou un dictionnaire Python contenant les données et la disposition du tracé. Dans ce cas, vous fournissez ce dernier.

Enfin, ces deux lignes de code vous aident à exécuter votre application:

48si __Nom__ == "__principale__":
49    app.run_server(déboguer=Vrai)

Les lignes 48 et 49 permettent d'exécuter votre application Dash localement à l'aide du serveur intégré de Flask. le debug = True paramètre de app.run_server active le rechargement à chaud option dans votre application. Cela signifie que lorsque vous apportez une modification à votre application, elle se recharge automatiquement, sans que vous ayez à redémarrer le serveur.

Enfin, voici la version complète de app.py. Vous pouvez copier ce code dans le vide app.py vous avez créé plus tôt.

importer tiret
importer dash_core_components comme dcc
importer dash_html_components comme html
importer pandas comme pd

Les données = pd.read_csv("avocado.csv")
Les données = Les données.requete("type == 'conventionnel' et région == 'Albany'")
Les données[[[["Date"] = pd.to_datetime(Les données[[[["Date"], format="% Y-% m-%ré")
Les données.sort_values("Date", en place=Vrai)

app = tiret.Tiret(__Nom__)

app.disposition = html.Div(
    les enfants=[[[[
        html.H1(les enfants="Analyse de l'avocat",),
        html.P(
            les enfants="Analyser le comportement des prix de l'avocat"
            "et le nombre d'avocats vendus aux États-Unis"
            "entre 2015 et 2018",
        ),
        dcc.Graphique(
            figure=
                "Les données": [[[[
                    
                        "X": Les données[[[["Date"],
                        "y": Les données[[[["Prix moyen"],
                        "type": "lignes",
                    ,
                ],
                "disposition": "Titre": "Prix moyen des avocats",
            ,
        ),
        dcc.Graphique(
            figure=
                "Les données": [[[[
                    
                        "X": Les données[[[["Date"],
                        "y": Les données[[[["Volume total"],
                        "type": "lignes",
                    ,
                ],
                "disposition": "Titre": "Avocats vendus",
            ,
        ),
    ]
)

si __Nom__ == "__principale__":
    app.run_server(déboguer=Vrai)

C'est le code pour un tableau de bord simple. Il comprend tous les extraits de code que vous avez examinés plus tôt dans cette section.

Il est maintenant temps d’exécuter votre application. Ouvrez un terminal dans le répertoire racine de votre projet et dans l’environnement virtuel du projet. Courir python app.py, ensuite aller à http: // localhost: 8050 en utilisant votre navigateur préféré.

C'est vivant! Votre tableau de bord devrait ressembler à ceci:

Exemple de tableau de bord Python Dash + Barebones

La bonne nouvelle est que vous disposez désormais d'une version fonctionnelle de votre tableau de bord. La mauvaise nouvelle est qu’il reste du travail à faire avant de pouvoir le montrer à d’autres. Le tableau de bord est loin d'être visuellement agréable et vous devez encore y ajouter une certaine interactivité.

Mais ne vous inquiétez pas, vous apprendrez comment résoudre ces problèmes dans les sections suivantes.

Personnalisez votre application Dash

Dash vous offre une grande flexibilité pour personnaliser l'apparence de votre application. Vous pouvez utiliser vos propres fichiers CSS ou JavaScript, définir un favicon (petite icône affichée sur le navigateur Web) et incorporer des images, entre autres options avancées.

Dans cette section, vous apprendrez à appliquer des styles personnalisés à des composants, puis vous styliserez le tableau de bord que vous avez créé dans la section précédente.

Comment appliquer un style personnalisé à vos composants

Vous pouvez styliser les composants de deux manières:

  1. En utilisant le style argument des composants individuels
  2. Fournir un fichier CSS externe

En utilisant le style L'argument pour personnaliser votre tableau de bord est simple. Cet argument prend un dictionnaire Python avec des paires clé-valeur comprenant les noms des propriétés CSS et les valeurs que vous souhaitez définir.

Si vous vouliez changer la taille et la couleur du H1 élément dans app.py, vous pouvez alors définir l'élément style argument comme suit:

html.H1(
    les enfants="Analyse de l'avocat",
    style="taille de police": "48px", "Couleur": "rouge",
),

Ici, vous fournissez à style un dictionnaire avec les propriétés et les valeurs que vous souhaitez leur définir. Dans ce cas, le style spécifié doit avoir un en-tête rouge avec une taille de police de 48 pixels.

L'inconvénient d'utiliser le style L'argument est qu'il ne s'adapte pas bien à mesure que votre base de code grandit. Si votre tableau de bord comporte plusieurs composants que vous souhaitez ressembler, vous finirez par répéter une grande partie de votre code. Au lieu de cela, vous pouvez utiliser un fichier CSS personnalisé.

Si vous souhaitez inclure vos propres fichiers CSS ou JavaScript locaux, vous devez créer un dossier appelé les atouts/ dans le répertoire racine de votre projet et enregistrez les fichiers que vous souhaitez y ajouter. Par défaut, Dash sert automatiquement tout fichier inclus dans les atouts/. Cela fonctionnera également pour ajouter un favicon ou incorporer des images, comme vous le verrez dans un instant.

Ensuite, vous pouvez utiliser le nom du cours ou id arguments des composants pour ajuster leurs styles en utilisant CSS. Ces arguments correspondent à la classe et id attributs lorsqu'ils sont transformés en balises HTML.

Si vous souhaitez ajuster la taille de la police et la couleur du texte du H1 élément dans app.py, alors vous pouvez utiliser le nom du cours argument comme suit:

html.H1(
    les enfants="Analyse de l'avocat",
    nom du cours="titre-en-tête",
),

Réglage du nom du cours L'argument définira l'attribut de classe pour le H1 élément. Vous pouvez ensuite utiliser un fichier CSS dans le les atouts dossier pour spécifier à quoi vous voulez qu'il ressemble:

.titre-en-tête 
  taille de police: 48px;
  Couleur: rouge;

Vous utilisez un sélecteur de classe pour mettre en forme l'en-tête dans votre fichier CSS. Ce sélecteur ajustera le format du titre. Vous pouvez également l'utiliser avec un autre élément qui doit partager le format en définissant className = "titre-en-tête".

Ensuite, vous stylisez votre tableau de bord.

Comment améliorer l'apparence de votre tableau de bord

Vous venez de couvrir les bases du style dans Dash. Vous allez maintenant apprendre à personnaliser l'apparence de votre tableau de bord. Vous apporterez ces améliorations:

  • Ajouter un favicon et un titre à la page
  • Changer la famille de polices de votre tableau de bord
  • Utilisez un fichier CSS externe pour styliser les composants Dash

Vous commencerez par apprendre à utiliser des ressources externes dans votre application. Cela vous permettra d'ajouter un favicon, une famille de polices personnalisée et une feuille de style CSS. Ensuite, vous apprendrez à utiliser le nom du cours argument pour appliquer des styles personnalisés à vos composants Dash.

Ajout d'actifs externes à votre application

Créez un dossier appelé les atouts/ dans le répertoire racine de votre projet. Téléchargez un favicon du projet open source Twemoji et enregistrez-le sous favicon.ico dans les atouts/. Enfin, créez un fichier CSS dans les atouts/ appelé style.css et le code dans la section réductible ci-dessous.

corps 
    famille de polices: "Lato", sans-serif;
    marge: 0;
    Couleur de l'arrière plan: # F7F7F7;


.entête 
    Couleur de l'arrière plan: # 222222;
    la taille: 256px;
    afficher: fléchir;
    flex-direction: colonne;
    justifier le contenu: centre;


.en-tête-emoji 
    taille de police: 48px;
    marge: 0 auto;
    texte-align: centre;


.titre-en-tête 
    Couleur: #FFFFFF;
    taille de police: 48px;
    poids de la police: audacieux;
    texte-align: centre;
    marge: 0 auto;


.en-tête-description 
    Couleur: #CFCFCF;
    marge: 4px auto;
    texte-align: centre;
    largeur maximale: 384px;


.emballage 
    marge droite: auto;
    marge gauche: auto;
    largeur maximale: 1024px;
    padding-right: dixpx;
    padding-left: dixpx;
    margin-top: 32px;


.carte 
    marge-bas: 24px;
    boîte ombre: 0 4px 6px 0 rgba(0, 0, 0, 0,18);

le les atouts/ Le fichier contient les styles que vous appliquerez aux composants de la mise en page de votre application. À présent, la structure de votre projet devrait ressembler à ceci:

avocado_analytics /
│
├── actifs /
│ ├── favicon.ico
│ └── style.css
│
├── venv /
│
├── app.py
└── avocat.csv

Une fois que vous démarrez le serveur, Dash servira automatiquement les fichiers situés dans les atouts/. Vous incluez deux fichiers dans les atouts/: favicon.ico et style.css. Pour définir un favicon par défaut, vous n'avez pas à effectuer d'étapes supplémentaires. Pour utiliser les styles que vous avez définis dans style.css, vous devrez utiliser le nom du cours argument dans les composants Dash.

app.py nécessite quelques modifications. Vous allez inclure une feuille de style externe, ajouter un titre à votre tableau de bord et styliser les composants à l'aide du style.css fichier. Passez en revue les changements ci-dessous. Ensuite, dans la dernière partie de cette section, vous trouverez le code complet de votre version mise à jour de app.py.

Voici comment inclure une feuille de style externe et ajouter un titre à votre tableau de bord:

11external_stylesheets = [[[[
12    
13        "href": "https://fonts.googleapis.com/css2?"
14                "family = Lato: wght @ 400; 700 & display = swap",
15        "rel": "feuille de style",
16    ,
17]
18app = tiret.Tiret(__Nom__, external_stylesheets=external_stylesheets)
19app.Titre = "Avocado Analytics: Comprenez vos avocats!"

Aux lignes 11 à 18, vous spécifiez un fichier CSS externe, une famille de polices, que vous souhaitez charger dans votre application. Les fichiers externes sont ajoutés au tête tag de votre application et chargé avant le corps des charges de votre application. Vous utilisez le external_stylesheets argument pour ajouter des fichiers CSS externes ou external_scripts pour les fichiers JavaScript externes comme Google Analytics.

À la ligne 19, vous définissez le titre de votre demande. Il s’agit du texte qui apparaît dans la barre de titre de votre navigateur Web, dans les résultats de recherche Google et dans les cartes de réseaux sociaux lorsque vous partagez votre site.

Personnalisation des styles de composants

Pour utiliser les styles dans style.css, vous devrez utiliser le nom du cours argument dans les composants Dash. Le code ci-dessous ajoute un nom du cours avec un sélecteur de classe correspondant à chacun des composants qui composent l'en-tête de votre tableau de bord:

21app.disposition = html.Div(
22    les enfants=[[[[
23        html.Div(
24            les enfants=[[[[
25                html.P(les enfants="🥑", nom du cours="en-tête-emoji"),
26                html.H1(
27                    les enfants="Analyse de l'avocat", nom du cours="titre-en-tête"
28                ),
29                html.P(
30                    les enfants="Analyser le comportement des prix de l'avocat"
31                    "et le nombre d'avocats vendus aux États-Unis"
32                    "entre 2015 et 2018",
33                    nom du cours="en-tête-description",
34                ),
35            ],
36            nom du cours="entête",
37        ),

Aux lignes 21 à 37, vous pouvez voir qu'il y a eu deux changements dans la version initiale du tableau de bord:

  1. Il y a un nouvel élément de paragraphe avec un emoji avocat qui servira de logo.
  2. Il y a un nom du cours argument dans chaque composant. Ces noms de classe doivent correspondre à un sélecteur de classe dans style.css, qui définira l'apparence de chaque composant.

Par exemple, le en-tête-description classe affectée au composant de paragraphe commençant par "Analyser le comportement des prix de l'avocat" a un sélecteur correspondant dans style.css:

29.en-tête-description 
30    Couleur: #CFCFCF;
31    marge: 4px auto;
32    texte-align: centre;
33    largeur maximale: 384px;
34

Lignes 29 à 34 de style.css définir le format du en-tête-description sélecteur de classe. Ceux-ci changeront la couleur, la marge, l'alignement et la largeur maximale de tout composant avec className = "en-tête-description". Tous les composants ont des sélecteurs de classe correspondants dans le fichier CSS.

L'autre changement important se situe dans les graphiques. Voici le nouveau code du tableau des prix:

38html.Div(
39    les enfants=[[[[
40        html.Div(
41            les enfants=dcc.Graphique(
42                id="prix-graphique",
43                config="displayModeBar": Faux,
44                figure=
45                    "Les données": [[[[
46                        
47                            "X": Les données[[[["Date"],
48                            "y": Les données[[[["Prix moyen"],
49                            "type": "lignes",
50                            "hovertemplate": "$%y: .2f"
51                                                "",
52                        ,
53                    ],
54                    "disposition": 
55                        "Titre": 
56                            "texte": "Prix moyen des avocats",
57                            "X": 0,05,
58                            "xanchor": "la gauche",
59                        ,
60                        "xaxis": "fixedrange": Vrai,
61                        "yaxis": 
62                            "tickprefix": "$",
63                            "fixedrange": Vrai,
64                        ,
65                        "coloris": [[[["# 17B897"],
66                    ,
67                ,
68            ),
69            nom du cours="carte",
70        ),

Dans ce code, vous définissez un nom du cours et quelques personnalisations pour le config et figure paramètres de votre graphique. Voici les changements:

  • Ligne 43: Vous supprimez la barre flottante qui affiche par défaut Plotly.
  • Lignes 50 et 51: Vous définissez le modèle de survol de sorte que lorsque les utilisateurs survolent un point de données, il affiche le prix en dollars. Au lieu de 2,5, il s'affichera comme 2,5 $.
  • Lignes 54 à 66: Vous ajustez l'axe, la couleur de la figure et le format du titre dans la section de mise en page du graphique.
  • Ligne 69: Vous enveloppez le graphique dans un html.Div avec un "carte" classe. Cela donnera au graphique un fond blanc et ajoutera une petite ombre en dessous.

Des ajustements similaires sont apportés aux graphiques des ventes et des volumes. Vous pouvez les voir dans le code complet de la mise à jour app.py dans la section pliable ci-dessous.

importer tiret
importer dash_core_components comme dcc
importer dash_html_components comme html
importer pandas comme pd

Les données = pd.read_csv("avocado.csv")
Les données = Les données.requete("type == 'conventionnel' et région == 'Albany'")
Les données[[[["Date"] = pd.to_datetime(Les données[[[["Date"], format="% Y-% m-%ré")
Les données.sort_values("Date", en place=Vrai)

external_stylesheets = [[[[
    
        "href": "https://fonts.googleapis.com/css2?"
        "family = Lato: wght @ 400; 700 & display = swap",
        "rel": "feuille de style",
    ,
]
app = tiret.Tiret(__Nom__, external_stylesheets=external_stylesheets)
app.Titre = "Avocado Analytics: Comprenez vos avocats!"

app.disposition = html.Div(
    les enfants=[[[[
        html.Div(
            les enfants=[[[[
                html.P(les enfants="🥑", nom du cours="en-tête-emoji"),
                html.H1(
                    les enfants="Analyse de l'avocat", nom du cours="titre-en-tête"
                ),
                html.P(
                    les enfants="Analyser le comportement des prix de l'avocat"
                    "et le nombre d'avocats vendus aux États-Unis"
                    "entre 2015 et 2018",
                    nom du cours="en-tête-description",
                ),
            ],
            nom du cours="entête",
        ),
        html.Div(
            les enfants=[[[[
                html.Div(
                    les enfants=dcc.Graphique(
                        id="prix-graphique",
                        config="displayModeBar": Faux,
                        figure=
                            "Les données": [[[[
                                
                                    "X": Les données[[[["Date"],
                                    "y": Les données[[[["Prix moyen"],
                                    "type": "lignes",
                                    "hovertemplate": "$%y: .2f"
                                                     "",
                                ,
                            ],
                            "disposition": 
                                "Titre": 
                                    "texte": "Prix moyen des avocats",
                                    "X": 0,05,
                                    "xanchor": "la gauche",
                                ,
                                "xaxis": "fixedrange": Vrai,
                                "yaxis": 
                                    "tickprefix": "$",
                                    "fixedrange": Vrai,
                                ,
                                "coloris": [[[["# 17B897"],
                            ,
                        ,
                    ),
                    nom du cours="carte",
                ),
                html.Div(
                    les enfants=dcc.Graphique(
                        id="volume-chart",
                        config="displayModeBar": False,
                        figure=
                            "data": [[[[
                                
                                    "x": Les données[[[["Date"],
                                    "y": Les données[[[["Total Volume"],
                                    "type": "lines",
                                ,
                            ],
                            "layout": 
                                "title": 
                                    "text": "Avocados Sold",
                                    "x": 0.05,
                                    "xanchor": "left",
                                ,
                                "xaxis": "fixedrange": True,
                                "yaxis": "fixedrange": True,
                                "colorway": [[[["#E12D39"],
                            ,
                        ,
                    ),
                    className="card",
                ),
            ],
            className="wrapper",
        ),
    ]
)

si __name__ == "__main__":
    app.run_server(debug=True)

This is the updated version of app.py. It has the required changes in the code to add a favicon and a page title, update the font family, and use an external CSS file. After these changes, your dashboard should look like this:

Python Dash + Dashboard With Styling Example

In the next section, you’ll learn how to add interactive components to your dashboard.

Add Interactivity to Your Dash Apps Using Callbacks

In this section, you’ll learn how to add interactive elements to your dashboard.

Dash’s interactivity is based on a reactive programming paradigm. This means that you can link components with elements of your app that you want to update. If a user interacts with an input component like a dropdown or a range slider, then the output, such as a graph, will react automatically to the changes in the input.

Now let’s make your dashboard interactive. This new version of your dashboard will allow the user to interact with the following filters:

  • Région
  • Type of avocado
  • Date range

Start by replacing your local app.py with the new version in the collapsible section below.

import dash
import dash_core_components comme dcc
import dash_html_components comme html
import pandas comme pd
import numpy comme np
de dash.dependencies import Output, Input

Les données = pd.read_csv("avocado.csv")
Les données[[[["Date"] = pd.to_datetime(Les données[[[["Date"], format="%Y-%m-%d")
Les données.sort_values("Date", inplace=True)

external_stylesheets = [[[[
    
        "href": "https://fonts.googleapis.com/css2?"
        "family=Lato:wght@400;700&display=swap",
        "rel": "stylesheet",
    ,
]
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.title = "Avocado Analytics: Understand Your Avocados!"

app.layout = html.Div(
    les enfants=[[[[
        html.Div(
            les enfants=[[[[
                html.P(les enfants="🥑", className="header-emoji"),
                html.H1(
                    les enfants="Avocado Analytics", className="header-title"
                ),
                html.P(
                    les enfants="Analyze the behavior of avocado prices"
                    " and the number of avocados sold in the US"
                    " between 2015 and 2018",
                    className="header-description",
                ),
            ],
            className="header",
        ),
        html.Div(
            les enfants=[[[[
                html.Div(
                    les enfants=[[[[
                        html.Div(les enfants="Region", className="menu-title"),
                        dcc.Dropdown(
                            id="region-filter",
                            options=[[[[
                                "label": region, "value": region
                                pour region dans np.sort(Les données.region.unique())
                            ],
                            value="Albany",
                            clearable=False,
                            className="dropdown",
                        ),
                    ]
                ),
                html.Div(
                    les enfants=[[[[
                        html.Div(les enfants="Type", className="menu-title"),
                        dcc.Dropdown(
                            id="type-filter",
                            options=[[[[
                                "label": avocado_type, "value": avocado_type
                                pour avocado_type dans Les données.type.unique()
                            ],
                            value="organic",
                            clearable=False,
                            searchable=False,
                            className="dropdown",
                        ),
                    ],
                ),
                html.Div(
                    les enfants=[[[[
                        html.Div(
                            les enfants="Date Range",
                            className="menu-title"
                            ),
                        dcc.DatePickerRange(
                            id="date-range",
                            min_date_allowed=Les données.Date.min().date(),
                            max_date_allowed=Les données.Date.max().date(),
                            start_date=Les données.Date.min().date(),
                            end_date=Les données.Date.max().date(),
                        ),
                    ]
                ),
            ],
            className="menu",
        ),
        html.Div(
            les enfants=[[[[
                html.Div(
                    les enfants=dcc.Graph(
                        id="price-chart", config="displayModeBar": False,
                    ),
                    className="card",
                ),
                html.Div(
                    les enfants=dcc.Graph(
                        id="volume-chart", config="displayModeBar": False,
                    ),
                    className="card",
                ),
            ],
            className="wrapper",
        ),
    ]
)


@app.callback(
    [[[[Output("price-chart", "figure"), Output("volume-chart", "figure")],
    [[[[
        Input("region-filter", "value"),
        Input("type-filter", "value"),
        Input("date-range", "start_date"),
        Input("date-range", "end_date"),
    ],
)
def update_charts(region, avocado_type, start_date, end_date):
    masque = (
        (Les données.region == region)
        & (Les données.type == avocado_type)
        & (Les données.Date >= start_date)
        & (Les données.Date <= end_date)
    )
    filtered_data = Les données.loc[[[[masque, :]
    price_chart_figure = 
        "data": [[[[
            
                "x": filtered_data[[[["Date"],
                "y": filtered_data[[[["AveragePrice"],
                "type": "lines",
                "hovertemplate": "$%y:.2f",
            ,
        ],
        "layout": 
            "title": 
                "text": "Average Price of Avocados",
                "x": 0.05,
                "xanchor": "left",
            ,
            "xaxis": "fixedrange": True,
            "yaxis": "tickprefix": "$", "fixedrange": True,
            "colorway": [[[["#17B897"],
        ,
    

    volume_chart_figure = 
        "data": [[[[
            
                "x": filtered_data[[[["Date"],
                "y": filtered_data[[[["Total Volume"],
                "type": "lines",
            ,
        ],
        "layout": 
            "title": "text": "Avocados Sold", "x": 0.05, "xanchor": "left",
            "xaxis": "fixedrange": True,
            "yaxis": "fixedrange": True,
            "colorway": [[[["#E12D39"],
        ,
    
    revenir price_chart_figure, volume_chart_figure


si __name__ == "__main__":
    app.run_server(debug=True)

Next, replace style.css with the code in the collapsible section below.

body 
    font-family: "Lato", sans-serif;
    margin: 0;
    background-color: #F7F7F7;


.header 
    background-color: #222222;
    height: 288px;
    padding: 16px 0 0 0;


.header-emoji 
    font-size: 48px;
    margin: 0 auto;
    text-align: center;


.header-title 
    color: #FFFFFF;
    font-size: 48px;
    font-weight: bold;
    text-align: center;
    margin: 0 auto;


.header-description 
    color: #CFCFCF;
    margin: 4px auto;
    text-align: center;
    max-width: 384px;


.wrapper 
    margin-right: auto;
    margin-left: auto;
    max-width: 1024px;
    padding-right: dixpx;
    padding-left: dixpx;
    margin-top: 32px;


.card 
    margin-bottom: 24px;
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.18);


.menu 
    height: 112px;
    width: 912px;
    display: flex;
    justify-content: space-evenly;
    padding-top: 24px;
    margin: -80px auto 0 auto;
    background-color: #FFFFFF;
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.18);


.Select-control 
    width: 256px;
    height: 48px;


.Select--single > .Select-control .Select-value, .Select-placeholder 
    line-height: 48px;


.Select--multi .Select-value-label 
    line-height: 32px;


.menu-title 
    margin-bottom: 6px;
    font-weight: bold;
    color: #079A82;

Now you’re ready to start adding interactive components to your application!

How to Create Interactive Components

First, you’ll learn how to create components that users can interact with. For that, you’ll include a new html.Div above your charts. It’ll include two dropdowns and a date range selector that the user can use to filter the data and update the graphs.

Here’s how that looks in app.py:

24html.Div(
25    les enfants=[[[[
26        html.Div(
27            les enfants=[[[[
28                html.Div(les enfants="Region", className="menu-title"),
29                dcc.Dropdown(
30                    id="region-filter",
31                    options=[[[[
32                        "label": region, "value": region
33                        pour region dans np.sort(Les données.region.unique())
34                    ],
35                    value="Albany",
36                    clearable=False,
37                    className="dropdown",
38                ),
39            ]
40        ),
41        html.Div(
42            les enfants=[[[[
43                html.Div(les enfants="Type", className="menu-title"),
44                dcc.Dropdown(
45                    id="type-filter",
46                    options=[[[[
47                        "label": avocado_type, "value": avocado_type
48                        pour avocado_type dans Les données.type.unique()
49                    ],
50                    value="organic",
51                    clearable=False,
52                    searchable=False,
53                    className="dropdown",
54                ),
55            ],
56        ),
57        html.Div(
58            les enfants=[[[[
59                html.Div(
60                    les enfants="Date Range",
61                    className="menu-title"
62                    ),
63                dcc.DatePickerRange(
64                    id="date-range",
65                    min_date_allowed=Les données.Date.min().date(),
66                    max_date_allowed=Les données.Date.max().date(),
67                    start_date=Les données.Date.min().date(),
68                    end_date=Les données.Date.max().date(),
69                ),
70            ]
71        ),
72    ],
73    className="menu",
74),

On lines 24 to 74, you define an html.Div on top of your graphs consisting of two dropdowns and a date range selector. It will serve as a menu that the user will use to interact with the data:

Python Dash + Dropdowns and Date Range

The first component in the menu is the Region dropdown. Here’s the code for that component:

41html.Div(
42    les enfants=[[[[
43        html.Div(les enfants="Region", className="menu-title"),
44        dcc.Dropdown(
45            id="region-filter",
46            options=[[[[
47                "label": region, "value": region
48                pour region dans np.sort(Les données.region.unique())
49            ],
50            value="Albany",
51            clearable=False,
52            className="dropdown",
53        ),
54    ]
55),

On lines 41 to 55, you define the dropdown that users will use to filter the data by region. In addition to the title, it has a dcc.Dropdown component. Here’s what each of the parameters means:

  • id is the identifier of this element.
  • options is the options shown when the dropdown is selected. It expects a dictionary with labels and values.
  • value is the default value when the page loads.
  • clearable allows the user to leave this field empty if set to True.
  • className is a class selector used for applying styles.

The Type and Date Range selectors follow the same structure as the Region dropdown. Feel free to review them on your own.

Next, take a look at the dcc.Graphs components:

    90html.Div(
    91    les enfants=[[[[
    92        html.Div(
    93            les enfants=dcc.Graph(
    94                id="price-chart", config="displayModeBar": False,
    95            ),
    96            className="card",
    97        ),
    98        html.Div(
    99            les enfants=dcc.Graph(
100                id="volume-chart", config="displayModeBar": False,
101            ),
102            className="card",
103        ),
104    ],
105    className="wrapper",
106),

On lines 90 to 106, you define the dcc.Graph components. You may have noticed that, compared to the previous version of the dashboard, the components are missing the figure argument. That’s because the figure argument will now be generated by a callback function using the inputs the user sets using the Region, Type, and Date Range selectors.

How to Define Callbacks

You’ve defined how the user will interact with your application. Now you need to make your application react to user interactions. For that, you’ll use callback functions.

Dash’s callback functions are regular Python functions with an app.callback decorator. In Dash, when an input changes, a callback function is triggered. The function performs some predetermined operations, like filtering a dataset, and returns an output to the application. In essence, callbacks link inputs and outputs in your app.

Here’s the callback function used for updating the graphs:

111@app.callback(
112    [[[[Output("price-chart", "figure"), Output("volume-chart", "figure")],
113    [[[[
114        Input("region-filter", "value"),
115        Input("type-filter", "value"),
116        Input("date-range", "start_date"),
117        Input("date-range", "end_date"),
118    ],
119)
120def update_charts(region, avocado_type, start_date, end_date):
121    masque = (
122        (Les données.region == region)
123        & (Les données.type == avocado_type)
124        & (Les données.Date >= start_date)
125        & (Les données.Date <= end_date)
126    )
127    filtered_data = Les données.loc[[[[masque, :]
128    price_chart_figure = 
129        "data": [[[[
130            
131                "x": filtered_data[[[["Date"],
132                "y": filtered_data[[[["AveragePrice"],
133                "type": "lines",
134                "hovertemplate": "$%y:.2f",
135            ,
136        ],
137        "layout": 
138            "title": 
139                "text": "Average Price of Avocados",
140                "x": 0.05,
141                "xanchor": "left",
142            ,
143            "xaxis": "fixedrange": True,
144            "yaxis": "tickprefix": "$", "fixedrange": True,
145            "colorway": [[[["#17B897"],
146        ,
147    
148
149    volume_chart_figure = 
150        "data": [[[[
151            
152                "x": filtered_data[[[["Date"],
153                "y": filtered_data[[[["Total Volume"],
154                "type": "lines",
155            ,
156        ],
157        "layout": 
158            "title": 
159                "text": "Avocados Sold",
160                "x": 0.05,
161                "xanchor": "left"
162            ,
163            "xaxis": "fixedrange": True,
164            "yaxis": "fixedrange": True,
165            "colorway": [[[["#E12D39"],
166        ,
167    
168    revenir price_chart_figure, volume_chart_figure

On lines 111 to 119, you define the inputs and outputs inside the app.callback decorator.

First, you define the outputs using Output objects. These objects take two arguments:

  1. The identifier of the element that they’ll modify when the function executes
  2. The property of the element to be modified

For example, Output("price-chart", "figure") will update the figure property of the "price-chart" element.

Then you define the inputs using Input objects. They also take two arguments:

  1. The identifier of the element they’ll be watching for changes
  2. The property of the watched element that they should take when a change happens

Alors, Input("region-filter", "value") will watch the "region-filter" element for changes and will take its value property if the element changes.

On line 120, you define the function that will be applied when an input changes. One thing to notice here is that the arguments of the function will correspond with the order of the Input objects supplied to the callback. There’s no explicit relationship between the names of the arguments in the function and the values specified in the Input objects.

Finally, on lines 121 to 164, you define the body of the function. In this case, the function takes the inputs (region, type of avocado, and date range), filters the data, and generates the figure objects for the price and volume charts.

That’s all! If you’ve followed along to this point, then your dashboard should look like this:

Way to go! That’s the final version of your dashboard. In addition to making it look beautiful, you also made it interactive. The only missing step is making it public so you can share it with others.

Deploy Your Dash Application to Heroku

You’re done building your application, and you have a beautiful, fully interactive dashboard. Now you’ll learn how to deploy it.

Dash apps are Flask apps, so both share the same deployment options. In this section, you’ll deploy your app on Heroku.

Before you get started, make sure you’ve installed the Heroku command-line interface (CLI) and Git. You can verify that both exist in your system by running these commands at a command prompt (Windows) or at a terminal (macOS, Linux):

$ git --version
git version 2.21.1 (Apple Git-122.3)
$ heroku --version
heroku/7.42.2 darwin-x64 node-v12.16.2

The output may change a bit depending on your operating system and the version you have installed, but you shouldn’t get an error.

Let’s get to it!

First, there’s a small change you need to make in app.py. After you initialize the app on line 18, add a new variable called server:

18app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
19server = app.server

This addition is necessary to run your app using a WSGI server. It’s not advisable to use Flask’s built-in server in production since it won’t able to handle much traffic.

Next, in the project’s root directory, create a file called runtime.txt where you’ll specify a Python version for your Heroku app:

When you deploy your app, Heroku will automatically detect that it’s a Python application and will use the correct buildpack. If you also provide a runtime.txt, then it’ll pin down the Python version that your app will use.

Next, create a requirements.txt file in the project’s root directory where you’ll copy the libraries required to set up your Dash application on a web server:

dash==1.13.3
pandas==1.0.5
gunicorn==20,0.4

You may have noticed that there’s a package in requirements.txt you haven’t seen until now: gunicorn. Gunicorn is a WSGI HTTP server that is frequently used for deploying Flask apps to production. You’ll use it to deploy your dashboard.

Now create a file named Procfile with the following content:

This file tells the Heroku app what commands should be executed to start your app. In this case, it starts a gunicorn server for your dashboard.

Next, you’ll need to initialize a Git repository. To do that, go to your project’s root directory and execute the following command:

This will start a Git repository in avocado_analytics/. It’ll start tracking all the changes you make to the files in that directory.

However, there are files you don’t want to track using Git. For example, you usually want to remove Python compiled files, the contents of your virtual environment folder, or metadata files such as .DS_Store.

To avoid tracking unnecessary files, create a file called .gitignore in the root directory. Then copy the following content in it:

venv
*.pyc
.DS_Store # Only if you are using macOS

This will make sure your repository doesn’t track unnecessary files. Now commit your project files:

$ git add .
$ git commit -m 'Add dashboard files'

Before the final step, make sure you have everything in place. Your project’s structure should look like this:

avocado_analytics/
│
├── assets/
│   ├── favicon.ico
│   └── style.css
│
├── venv/
│
├── app.py
├── avocado.csv
├── Procfile
├── requirements.txt
└── runtime.txt

Finally, you need to create an app in Heroku, push your code there using Git, and start the app in one of Heroku’s free server options. You can do that by running the following commands:

$ heroku create APP-NAME # Choose a name for your app
$ git push heroku master
$ heroku ps:scale web=1

The first command will create a new application on Heroku and an associated Git repository. The second will push the changes to that repository, and the third will start your app in one of Heroku’s free server options.

That’s it! You’ve built and deployed your dashboard. Now you just need to access it to share it with your friends. To access your app, copy https://APP-NAME.herokuapp.com/ in your browser and replace APP-NAME with the name you defined in the previous step.

If you’re curious, take a look at a sample app.

Conclusion

Congratulations! You just built, customized, and deployed your first dashboard using Dash. You went from a bare-bones dashboard to a fully interactive one deployed on Heroku.

With this knowledge, you can use Dash to build analytical applications to share with others. As more companies put more weight on the use of data, knowing how to use Dash will increase the impact you have in your workplace. What used to be a task only experts could perform, you can now do in an afternoon.

In this tutorial, you’ve learned:

  • How to create a dashboard using Dash
  • How to customize the styling of your Dash application
  • How to make your app interactive by using Dash components
  • Quoi callbacks are and how you can use them to create interactive applications
  • How to deploy your application on Heroku

Now you’re ready to develop new Dash applications. Find a dataset, think of some exciting visualizations, and build another dashboard!

You can download the source code, data, and resources for the sample applications you made in this tutorial by clicking the link below: