[De base] Unifiez tout, de la tabulation à la création du tableau de bord! Développement d'applications de visualisation de données avec Python et Dash ~ Présentation de Dash, construction d'environnement, exécution d'exemples ~
Cet article a été créé le 16 octobre 2020.
introduction
Je suis Imai de Marketing Applications Co., Ltd., qui fournit une plateforme de recherche marketing.
Dans notre entreprise, afin de découvrir pourquoi le Honkirin en vente de Kirin Beer est un succès, ** Collectez des données avec un questionnaire → Agréger avec Python → Créez un tableau de bord avec Dash et visualisez les données J'ai essayé de développer une application Web. ** **
Dans notre entreprise, nous publierons le contenu lié à Dash dans Qiita en le divisant en trois parties: la partie de base, la partie conseils et la partie pratique.
** Bases (cet article) ** Nous allons vous montrer un aperçu de Dash, créer un environnement et exécuter un échantillon pour visualiser le graphique. ** Une vidéo de commentaires de type cours est également disponible sur YouTube. Veuillez regarder cet article tout en l'utilisant comme manuel! ** ** Cliquez ici pour la vidéo de commentaire
** Conseils (en construction. Nous créerons un lien après la publication de l'article) ** Nous présenterons divers graphiques tels que des graphiques à bulles, des graphiques composés, des graphiques à bandes, des graphiques radar et des méthodes appliquées pour rendre les graphiques plus faciles à voir et à comprendre.
** Édition pratique (en construction. Nous ferons le lien après la publication de l'article) ** Afin d'analyser les hits de ce Kirin, nous présenterons une méthode pratique qui combine le contenu de la section Astuces, comment créer un tableau de bord à l'aide de Dash.
Si vous souhaitez le lire ou le trouver utile, veuillez appuyer sur le bouton LGTM.
Quel est le "tableau de bord" que nous allons faire cette fois?
Avant d'introduire la méthode de construction par Dash, il est nécessaire de partager la définition avec tout le monde que "un tableau de bord est ◯◯". Posons une question.
** "Q. Qu'est-ce qu'un tableau de bord?" **
Que répondriez-vous à cette question? "Récapitulatif de la progression des KPI de l'ensemble de l'organisation de gestion, tel que le statut de réalisation de l'objectif, le statut de la nouvelle commande, la transition des ventes" "Tableau de gestion des performances commerciales des produits à vendre" "Une collection de graphiques liés aux affaires du personnel qui évalue le rendement et la satisfaction des employés au travail et visualise l'état de travail." Il existe peut-être de nombreuses réponses possibles. La raison pour laquelle différentes réponses peuvent être données est que des personnes occupant différentes positions visualisent diverses données et les utilisent dans diverses situations, de sorte que la façon dont le tableau de bord lui-même est reconnu est différente. Ce sera différent.
Par conséquent, dans cette série, la phrase suivante est citée du SB Creative 2020 «Data Visualization Design» de Yukari Nagata, qui exprime la définition du tableau de bord d'une manière facile à comprendre.
Représentation visuelle qui favorise la compréhension en regardant les données
J'ai décidé de le définir comme. Avec cette définition, je pense qu'elle inclut toutes les réponses données ci-dessus. Maintenant que nous avons partagé la définition du tableau de bord avec vous, passons à Dash.
Qu'est-ce que Dash?
-Un framework web Python spécialisé dans la visualisation de données. -Fabriqué par Flask, Plotly.js, React.js. -Le site officiel dit "Il est particulièrement adapté à quiconque travaille avec des données en Python." ** Il est particulièrement adapté aux personnes qui traitent des données en Python. Je voudrais essayer de visualiser les données agrégées et analysées par Python avec une application Web cette fois! Je pense que c'est un cadre recommandé pour ceux qui disent. ** **
environnement d'utilisation
L'environnement utilisé est le suivant. ・ Mac (Windows est également acceptable) ・ Anaconda 4.8.5 ・ Python 3.8.3 ・ Dash 1.16.3 ・ Dash-core-components 1.12.1 ・ Dash-html-components 1.1.1
Environnement
La méthode de construction de l'environnement est décrite pour chaque personne. Veuillez lire l'article qui s'applique à vous.
Pour ceux qui n'ont pas Anaconda ▶ ︎Install Anaconda Pour ceux qui n'ont pas d'éditeur ▶ ︎Installez Visual Studio Code (ci-après: VSCode) Pour ceux qui ont Anaconda et éditeur (VSCode) ▶ ︎Préparer un environnement virtuel pour Dash
- VS Code est introduit pour ceux qui n'ont pas d'éditeur. Il n'y a pas de problème s'il s'agit d'un environnement de développement intégré (PyCharm) ou d'un éditeur (Atom, Vim, Sublime Text, etc.) qui permet de développer Python.
Pour ceux qui n'ont pas Anaconda ▶ ︎Installer Anaconda
「Anaconda」 Allez sur le site ci-dessous et cliquez sur "Produits" -> "Edition individuelle" dans le menu. https://www.anaconda.com/
Choisissez le programme d'installation qui convient à votre environnement.
Lancez le package d'installation téléchargé et passez à la "Vue d'ensemble" finale.
Pour ceux qui n'ont pas d'éditeur ▶ ︎ Installer Visual Studio Code
「Visual Studio Code」 https://azure.microsoft.com/ja-jp/products/visual-studio-code/
Cliquez sur "Télécharger maintenant".
Choisissez le programme d'installation qui convient à votre environnement.
Lorsque vous ouvrez le fichier zip, l'application est incluse, donc si vous pouvez la démarrer, c'est OK.
Pour ceux qui ont Anaconda et un éditeur ▶ ︎ Préparez un environnement virtuel pour Dash
Étant donné qu'Anaconda peut créer plusieurs environnements virtuels (environnements conda), nous préparerons un environnement virtuel pour Dash. En préparant un environnement virtuel, vous pouvez éviter le problème que "j'ai installé les bibliothèques nécessaires avec Dash. Ensuite, j'ai eu une erreur en raison d'un conflit avec d'autres bibliothèques utilisées."
Démarrez Anaconda Navigator, cliquez sur "Environnements", puis sur "Créer".
Sélectionnez "tiret" pour le nom et "3.8" pour Python, et cliquez sur "Créer".
Lorsque la construction est terminée, un nouvel environnement appelé «tiret» sera ajouté.
Démarrez l'environnement "dash". Lancez un terminal et entrez la commande suivante.
conda activate dash
Le nom de l'environnement nouvellement construit sera affiché comme indiqué ci-dessous.
(dash) L116:(Je pense que le nom de l'utilisateur, etc. est affiché)
Installez les bibliothèques requises
Utilisez la commande conda pour installer les bibliothèques requises dans l'environnement actuel dans lequel vous exécutez. Lors de l'installation de la bibliothèque, vous devez entrer "y" lorsqu'on vous demande "Continuer ([y] / n)?" En chemin. Pour automatiser ce processus, ajoutez "-y" à la fin et installez.
conda install -c conda-forge dash -y
conda install -c anaconda pandas -y
conda install -c plotly plotly -y
Visualisez un graphique simple
Maintenant que l'environnement est complet, visualisons un graphique simple. Le graphique ci-dessous est créé.
Faites de votre bureau votre lieu de travail. Créez un dossier «tiret» et un dossier «échantillon» en dessous. Copiez et collez le code ci-dessous pour créer un fichier "app.py" et enregistrez-le.
app.py
# -*- coding: utf-8 -*-
# Run this app with `python app.py` and
# visit http://127.0.0.1:8050/ in your web browser.
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
df = pd.DataFrame({
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})
fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")
app.layout = html.Div(children=[
html.H1(children='Hello Dash'),
html.Div(children='''
Dash: A web application framework for Python.
'''),
dcc.Graph(
id='example-graph',
figure=fig
)
])
if __name__ == '__main__':
app.run_server(debug=True)
Assurez-vous d'avoir "app.py" dans le dossier "sample".
Ouvrez un terminal et procédez comme suit.
Lancez l'environnement "dash".
conda activate dash
Accédez au répertoire où se trouve "app.py".
cd (Abréviation)Desktop/dash/sample
Entrez comme ci-dessous
python app.py
Ensuite, ce qui suit sera affiché sur le terminal.
http://127.0.0.1:8050/ Copiez-le et collez-le dans le champ de saisie URL de votre navigateur.
Si vous pouvez confirmer qu'il s'affiche en toute sécurité, vous avez terminé!
Explication de la configuration de Dash et exemple de code
Le tableau de bord a les deux configurations suivantes. Déterminez l'apparence de l'application "Mise en page". (Exemple: générer un Div, y mettre la balise H1, afficher le graphique) "Callbacks" Rend les données de l'application et l'opération liées. (Exemple: afficher le graphique en fonction des informations saisies)
L'exemple de code qui crée le graphique à barres ci-dessus a la structure suivante. En gros, je pense qu'il peut être complété en 3 étapes comme indiqué ci-dessous.
** Préparation: Importez les bibliothèques requises, créez des données, créez des graphiques en utilisant les données ** ** Affichage: faites les décorations nécessaires dans Layout et injectez des données ** ** Exécuter: exécuter l'application **
Tout au long de cette série, nous n'utilisons pas de "Callbacks", nous affichons simplement les données. En utilisant "Callbacks", vous pouvez élargir la gamme de façons d'afficher les données, donc si vous êtes intéressé, veuillez consulter également "Callbacks".
Autres mesures à prendre en cas d'erreur
Si vous personnalisez le code vous-même, vous pouvez obtenir l'erreur suivante:
À ce moment-là, vérifiez le terminal.
Ensuite, j'ai trouvé que la figure sur la 30ème ligne de app.py ne pouvait pas être lue correctement.
Quand j'ai vérifié le code source de "app.py", la ligne fig a été commentée.
Décommentez et enregistrez à nouveau pour pouvoir l'exécuter.
Exécutez-le à nouveau pour actualiser votre navigateur.
python app.py
L'écran s'est à nouveau affiché.
La prochaine fois, nous parlerons de techniques plus appliquées.
Cette fois, j'ai même visualisé un simple graphique à barres avec Dash. La prochaine fois, je présenterai la visualisation de divers graphiques tels que des graphiques à bulles, des graphiques composés, des graphiques de bande, des graphiques radar et des méthodes appliquées pour rendre les graphiques plus faciles à voir et à comprendre.
Conseils (en cours de construction. Nous créerons un lien après la publication de l'article)