[Basic] Vereinheitlichen Sie alles von der Tabellierung bis zur Dashboard-Erstellung! Entwicklung von Datenvisualisierungsanwendungen mit Python und Dash ~ Übersicht über Dash, Umgebungskonstruktion, Beispielausführung ~
Dieser Artikel wurde am 16. Oktober 2020 erstellt.
Einführung
Ich bin Imai von Marketing Applications Co., Ltd., die eine Marktforschungsplattform bereitstellt.
Um herauszufinden, warum das von Kirin Beer angebotene Honkirin ein Hit ist, ** sammeln Sie in unserem Unternehmen Daten mit Fragebogen → Mit Python aggregieren → Dashboard mit Dash erstellen und Daten visualisieren Ich habe versucht, eine Webanwendung zu entwickeln. ** ** **
In unserem Unternehmen werden wir die Inhalte zu Dash in Qiita veröffentlichen, indem wir sie in drei Teile unterteilen: Basisteil, Tippteil und praktischen Teil.
** Grundlagen (dieser Artikel) ** Wir zeigen Ihnen einen Überblick über Dash, erstellen eine Umgebung und führen ein Beispiel aus, um das Diagramm zu visualisieren. ** Ein Kommentarvideo im Unterrichtsstil ist auch auf YouTube verfügbar. Bitte beachten Sie diesen Artikel, während Sie ihn als Lehrbuch verwenden! ** ** ** Klicken Sie hier für ein Kommentarvideo
** Tipps (im Aufbau. Wir werden nach Veröffentlichung des Artikels verlinken) ** Wir werden die Visualisierung verschiedener Diagramme wie Blasendiagramme, zusammengesetzte Diagramme, Banddiagramme, Radardiagramme und angewandte Methoden einführen, um das Anzeigen und Verstehen der Diagramme zu erleichtern.
** Praktische Ausgabe (im Aufbau. Wir werden verlinken, nachdem der Artikel veröffentlicht wurde) ** Um die Treffer dieser Kirin zu analysieren, werden wir eine praktische Methode vorstellen, die den Inhalt des Abschnitts Tipps kombiniert und zeigt, wie mit Dash ein Dashboard erstellt wird.
Wenn Sie es gerne lesen oder hilfreich finden, drücken Sie bitte die LGTM-Taste.
Was ist das "Dashboard", das wir dieses Mal machen werden?
Bevor Sie die Konstruktionsmethode von Dash einführen, müssen Sie die Definition mit allen teilen, dass "ein Dashboard ◯◯ ist". Lassen Sie uns eine Frage stellen.
** "F. Was ist ein Dashboard?" **
Was würden Sie zu dieser Frage sagen? "KPI-Fortschrittsübersicht der gesamten Management-Organisation, wie Zielerreichungsstatus, Status des neuen Auftrags, Umsatzübergang" "Sales Performance Management Tabelle der zum Verkauf stehenden Produkte" "Eine Sammlung von Grafiken in Bezug auf Personalangelegenheiten, die die Arbeitsleistung und -zufriedenheit der Mitarbeiter bewerten und den Arbeitsstatus visualisieren." Vielleicht gibt es viele mögliche Antworten. Der Grund, warum unterschiedliche Antworten gegeben werden können, besteht darin, dass Personen in verschiedenen Positionen verschiedene Daten visualisieren und in verschiedenen Situationen verwenden. Daher ist die Art und Weise, wie das Dashboard selbst erkannt wird, unterschiedlich. Es wird anders sein.
Daher wird in dieser Reihe der folgende Satz aus dem SB Creative "Data Visualization Design" 2020 von Yukari Nagata zitiert, der die Definition des Dashboards auf leicht verständliche Weise ausdrückt.
Visuelle Darstellung, die das Verständnis durch Betrachten von Daten fördert
Ich habe beschlossen, es als zu definieren. Ich denke, dass diese Definition alle oben gegebenen Antworten enthält. Nachdem wir die Dashboard-Definition für Sie freigegeben haben, fahren wir mit Dash fort.
Was ist Dash?
-Ein Python-Webframework, das auf Datenvisualisierung spezialisiert ist.
- Hergestellt von Flask, Plotly.js, React.js.
- Auf der offiziellen Website heißt es: "Es ist besonders für alle geeignet, die mit Daten in Python arbeiten." ** Es ist besonders für Personen geeignet, die Daten in Python verarbeiten. Dieses Mal möchte ich versuchen, die von Python aggregierten und analysierten Daten mit einer Webanwendung zu visualisieren! Ich denke, dass es ein empfohlener Rahmen für diejenigen ist, die sagen. ** ** **
Nutzungsumgebung
Die verwendete Umgebung ist wie folgt. ・ Mac (Windows ist auch akzeptabel) ・ Anaconda 4.8.5 ・ Python 3.8.3 ・ Dash 1.16.3 ・ Dash-Core-Komponenten 1.12.1 ・ Dash-HTML-Komponenten 1.1.1
Umgebung
Die Methode der Umgebungskonstruktion wird für jede Person beschrieben. Bitte lesen Sie aus dem für Sie zutreffenden Artikel.
Für diejenigen, die keine Anaconda haben ▶ AnInstall Anaconda Für diejenigen, die keinen Editor haben ▶ ︎ Installieren Sie Visual Studio Code (im Folgenden: VSCode) Für diejenigen mit Anaconda und Editor (VSCode) ▶ ︎ Bereiten Sie eine virtuelle Umgebung für Dash vor
- VS Code wird für diejenigen eingeführt, die keinen Editor haben. Es ist kein Problem, wenn es sich um eine integrierte Entwicklungsumgebung (PyCharm) oder einen Editor (Atom, Vim, Sublime Text usw.) handelt, die Python entwickeln können.
Für diejenigen, die keine Anaconda haben ▶ AnInstallieren Sie Anaconda
「Anaconda」 Gehen Sie zur folgenden Site und klicken Sie im Menü auf "Produkte" -> "Individual Edition". https://www.anaconda.com/
Wählen Sie das Installationsprogramm, das zu Ihrer Umgebung passt.
Starten Sie das heruntergeladene Installationspaket und fahren Sie mit der endgültigen "Übersicht" fort.
Für diejenigen, die keinen Editor haben ▶ ︎ Visual Studio Code installieren
「Visual Studio Code」 https://azure.microsoft.com/ja-jp/products/visual-studio-code/
Klicken Sie auf "Jetzt herunterladen".
Wählen Sie das Installationsprogramm, das zu Ihrer Umgebung passt.
Wenn Sie die Zip-Datei öffnen, ist die Anwendung enthalten. Wenn Sie sie starten können, ist sie in Ordnung.
Für diejenigen, die Anaconda und einen Editor haben ▶ ︎ Bereiten Sie eine virtuelle Umgebung für Dash vor
Mit Anaconda können Sie mehrere virtuelle Umgebungen (Conda-Umgebungen) erstellen, sodass wir eine virtuelle Umgebung für Dash vorbereiten. Durch die Vorbereitung einer virtuellen Umgebung können Sie das Problem vermeiden, dass "ich die erforderlichen Bibliotheken mit Dash installiert habe. Dann ist aufgrund eines Konflikts mit anderen verwendeten Bibliotheken ein Fehler aufgetreten."
Starten Sie Anaconda Navigator, klicken Sie auf "Umgebungen" und dann auf "Erstellen".
Wählen Sie "Bindestrich" für Name und "3.8" für Python und klicken Sie auf "Erstellen".
Wenn der Bau abgeschlossen ist, wird eine neue Umgebung namens "dash" hinzugefügt.
Starten Sie die "Dash" -Umgebung. Starten Sie ein Terminal und geben Sie den folgenden Befehl ein.
conda activate dash
Der Name der neu erstellten Umgebung wird wie unten gezeigt angezeigt.
(dash) L116:(Ich denke, dass der Name des Benutzers usw. angezeigt wird)
Installieren Sie die erforderlichen Bibliotheken
Verwenden Sie den Befehl conda, um die erforderlichen Bibliotheken in der aktuellen Umgebung zu installieren, in der Sie ausgeführt werden. Bei der Installation der Bibliothek müssen Sie "y" eingeben, wenn Sie gefragt werden, ob Sie fortfahren möchten ([y] / n)? ". Um diesen Prozess zu automatisieren, fügen Sie am Ende "-y" hinzu und installieren Sie.
conda install -c conda-forge dash -y
conda install -c anaconda pandas -y
conda install -c plotly plotly -y
Visualisieren Sie ein einfaches Diagramm
Nachdem die Umgebung vollständig ist, visualisieren wir ein einfaches Diagramm. Die folgende Grafik wird erstellt.
Machen Sie Ihren Desktop zu Ihrem Arbeitsplatz. Erstellen Sie einen "Dash" -Ordner und einen "Beispiel" -Ordner darunter. Kopieren Sie den folgenden Code, fügen Sie ihn ein, um eine "app.py" -Datei zu erstellen und zu speichern.
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)
Stellen Sie sicher, dass Sie "app.py" im Ordner "sample" haben.
Öffnen Sie ein Terminal und gehen Sie wie folgt vor.
Starten Sie die "Dash" -Umgebung.
conda activate dash
Wechseln Sie in das Verzeichnis, in dem sich "app.py" befindet.
cd (Abkürzung)Desktop/dash/sample
Geben Sie wie unten ein
python app.py
Anschließend wird auf dem Terminal Folgendes angezeigt.
http://127.0.0.1:8050/ Kopieren Sie es und fügen Sie es in das URL-Eingabefeld Ihres Browsers ein.
Wenn Sie bestätigen können, dass es sicher angezeigt wird, sind Sie fertig!
Erläuterung der Dash-Konfiguration und des Beispielcodes
Der Dash hat die folgenden zwei Konfigurationen. Bestimmen Sie das Erscheinungsbild der App "Layout". (Beispiel: Div generieren, H1-Tag einfügen, Grafik anzeigen) "Rückrufe" Macht die Daten in der App und den Vorgang verknüpft. (Beispiel: Zeigen Sie das Diagramm gemäß den eingegebenen Informationen an.)
Der Beispielcode, der das obige Balkendiagramm erstellt, hat die folgende Struktur. Grob gesagt denke ich, dass es in 3 Schritten abgeschlossen werden kann, wie unten gezeigt.
** Vorbereitung: Importieren Sie die erforderlichen Bibliotheken, erstellen Sie Daten, erstellen Sie Diagramme mit den Daten ** ** Anzeige: Nehmen Sie die erforderlichen Dekorationen im Layout vor und fügen Sie Daten ein ** ** Ausführen: Führen Sie die App aus **
In dieser Serie verwenden wir keine "Rückrufe", sondern zeigen nur die Daten an. Mit "Rückrufen" können Sie die Möglichkeiten zur Anzeige von Daten erweitern. Wenn Sie also interessiert sind, aktivieren Sie auch "Rückrufe".
Andere Maßnahmen, die ergriffen werden müssen, wenn ein Fehler auftritt
Wenn Sie den Code selbst anpassen, wird möglicherweise die folgende Fehlermeldung angezeigt:
Überprüfen Sie zu diesem Zeitpunkt das Terminal.
Dann stellte ich fest, dass die Abb. In der 30. Zeile von app.py nicht richtig gelesen werden konnte.
Als ich den Quellcode von "app.py" überprüfte, wurde die Feigenzeile auskommentiert.
Kommentar entfernen und erneut speichern, damit Sie es ausführen können.
Führen Sie es erneut aus, um Ihren Browser zu aktualisieren.
python app.py
Der Bildschirm wurde erneut angezeigt.
Nächstes Mal werden wir über mehr angewandte Techniken sprechen.
Dieses Mal habe ich sogar ein einfaches Balkendiagramm mit Dash visualisiert. Das nächste Mal werde ich die Visualisierung verschiedener Diagramme wie Blasendiagramme, zusammengesetzte Diagramme, Banddiagramme, Radardiagramme und angewandte Methoden einführen, um das Anzeigen und Verstehen der Diagramme zu erleichtern.
Tipps (im Aufbau. Wir werden verlinken, nachdem der Artikel veröffentlicht wurde)
Recommended Posts