Dash Framework
In diesem Kapitel werden wir das Dash-Framework ausführlich diskutieren.
Dash ist ein Open-Source-Python-Framework, das zum Erstellen analytischer Webanwendungen verwendet wird. Es ist eine leistungsstarke Bibliothek, die die Entwicklung datengesteuerter Anwendungen vereinfacht. Dies ist besonders nützlich für Python-Datenwissenschaftler, die mit der Webentwicklung nicht sehr vertraut sind. Benutzer können mithilfe von Dash erstaunliche Dashboards in ihrem Browser erstellen.
Dash basiert auf Plotly.js, React und Flask und verknüpft moderne UI-Elemente wie Dropdowns, Schieberegler und Diagramme direkt mit Ihrem analytischen Python-Code.
Dash-Apps bestehen aus einem Flask-Server, der über JSTP-Pakete über HTTP-Anforderungen mit Front-End-React-Komponenten kommuniziert.
Dash-Anwendungen sind rein in Python geschrieben, daher ist KEIN HTML oder JavaScript erforderlich.
Dash Setup
Wenn Dash noch nicht in Ihrem Terminal installiert ist, installieren Sie die unten genannten Dash-Bibliotheken. Da sich diese Bibliotheken in der aktiven Entwicklung befinden, installieren und aktualisieren Sie sie dann regelmäßig. Python 2 und 3 werden ebenfalls unterstützt.
- pip install dash == 0.23.1 # Das Kern-Dash-Backend
- pip install dash-renderer == 0.13.0 # Das Dash-Frontend
- pip install dash-html-components == 0.11.0 # HTML-Komponenten
- pip install dash-core-components == 0.26.0 # Aufgeladene Komponenten
- pip install plotly == 3.1.0 # Plotly-Grafikbibliothek
Um sicherzustellen, dass alles ordnungsgemäß funktioniert, haben wir hier eine einfache dashApp.py-Datei erstellt.
Dash- oder App-Layout
Dash-Apps bestehen aus zwei Teilen. Der erste Teil ist das „Layout“ der App, das im Wesentlichen beschreibt, wie die Anwendung aussieht. Der zweite Teil beschreibt die Interaktivität der Anwendung.
Kernkomponenten
Wir können das Layout mit dem erstellen dash_html_components und die dash_core_componentsBibliothek. Dash bietet Python-Klassen für alle visuellen Komponenten der Anwendung. Wir können auch unsere eigenen Komponenten mit JavaScript und React.js anpassen.
importiere dash_core_components als dcc
importiere dash_html_components als html
Die dash_html_components gelten für alle HTML-Tags, wobei die dash_core_components für die mit React.js erstellte Interaktivität vorgesehen sind.
Schreiben wir unter Verwendung der beiden oben genannten Bibliotheken einen Code wie unten angegeben -
app = dash.Dash()
app.layout = html.Div(children=[
html.H1(children='Hello Dash'),
html.Div(children='''Dash Framework: A web application framework for Python.''')Und der entsprechende HTML-Code würde so aussehen -
<div>
<h1> Hello Dash </h1>
<div> Dash Framework: A web application framework for Python. </div>
</div>Schreiben der Simple Dash App
Wir werden lernen, wie man ein einfaches Beispiel für einen Bindestrich mit der oben genannten Bibliothek in einer Datei schreibt dashApp.py.
# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash()
app.layout = html.Div(children=[
html.H1(children='Hello Dash'),
html.Div(children='''Dash Framework: A web application framework for Python.'''),
dcc.Graph(
id='example-graph',
figure={
'data': [
{'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'Delhi'},
{'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Mumbai'},
],
'layout': {
'title': 'Dash Data Visualization'
}
}
)
])
if __name__ == '__main__':
app.run_server(debug=True)Ausführen der Dash-App
Beachten Sie beim Ausführen der Dash-App die folgenden Punkte.
(MyDjangoEnv) C: \ Benutzer \ rajesh \ Desktop \ MyDjango \ dash> python dashApp1.py
Serving Flask App "dashApp1" (verzögertes Laden)
Umwelt: Produktion
WARNUNG: Verwenden Sie den Entwicklungsserver nicht in einer Produktionsumgebung.
Verwenden Sie stattdessen einen Produktions-WSGI-Server.
Debug-Modus: Ein
Neustart mit stat
Debugger ist aktiv!
Debugger-PIN: 130-303-947
Laufen weiter http://127.0.0.1:8050/ (Drücken Sie STRG + C, um den Vorgang zu beenden.)
127.0.0.1 - - [12/Aug/2018 09:32:39] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [12/Aug/2018 09:32:42] "GET /_dash-layout HTTP/1.1" 200 -
127.0.0.1 - - [12/Aug/2018 09:32:42] "GET /_dash-dependencies HTTP/1.1" 200 -
127.0.0.1 - - [12/Aug/2018 09:32:42] "GET /favicon.ico HTTP/1.1" 200 -
127.0.0.1 - - [12/Aug/2018 09:39:52] "GET /favicon.ico HTTP/1.1" 200 -Besuch http:127.0.0.1:8050/in Ihrem Webbrowser. Sie sollten eine App sehen, die so aussieht.
Im obigen Programm sind einige wichtige Punkte zu beachten:
Das App-Layout besteht aus einem Baum von „Komponenten“ wie html.Div und dcc.Graph.
Die Bibliothek dash_html_components enthält eine Komponente für jedes HTML-Tag. Die Komponente html.H1 (children = 'Hello Dash') generiert in Ihrer Anwendung ein HTML-Element <h1> Hello Dash </ h1>.
Nicht alle Komponenten sind reines HTML. Die dash_core_components beschreiben übergeordnete Komponenten, die interaktiv sind und mit JavaScript, HTML und CSS über die React.js-Bibliothek generiert werden.
Jede Komponente wird vollständig durch Schlüsselwortattribute beschrieben. Dash ist deklarativ: Sie beschreiben Ihre Anwendung hauptsächlich anhand dieser Attribute.
Das Kindereigentum ist etwas Besonderes. Konventionell ist es immer das erste Attribut, was bedeutet, dass Sie es weglassen können.
Html.H1 (children = 'Hello Dash') ist dasselbe wie html.H1 ('Hello Dash').
Die Schriftarten in Ihrer Anwendung sehen etwas anders aus als hier angezeigt. Diese Anwendung verwendet ein benutzerdefiniertes CSS-Stylesheet, um die Standardstile der Elemente zu ändern. Ein benutzerdefinierter Schriftstil ist zulässig, aber ab sofort können wir die folgende URL oder eine beliebige URL Ihrer Wahl hinzufügen.
app.css.append_css ({“external_url”:https://codepen.io/chriddyp/pen/bwLwgP.css}), damit Ihre Datei das gleiche Erscheinungsbild dieser Beispiele erhält.
Mehr über HTML
Die Bibliothek dash_html_components enthält eine Komponentenklasse für jedes HTML-Tag sowie Schlüsselwortargumente für alle HTML-Argumente.
Fügen wir den Inline-Stil der Komponenten in unseren vorherigen App-Text ein -
# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash()
colors = {
'background': '#87D653',
'text': '#ff0033'
}
app.layout = html.Div(style={'backgroundColor': colors['background']}, children=[
html.H1(
children='Hello Dash',
style={
'textAlign': 'center',
'color': colors['text']
}
),
html.Div(children='Dash: A web application framework for Python.', style={
'textAlign': 'center',
'color': colors['text']
}),
dcc.Graph(
id='example-graph-2',
figure={
'data': [
{'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'Delhi'},
{'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Mumbai'},
],
'layout': {
'plot_bgcolor': colors['background'],
'paper_bgcolor': colors['background'],
'font': {
'color': colors['text']
}
}
}
)
])
if __name__ == '__main__':
app.run_server(debug=True)Im obigen Beispiel haben wir die Inline-Stile der Komponenten html.Div und html.H1 mit der style-Eigenschaft geändert.
Es wird in der Dash-Anwendung wie folgt gerendert:
Es gibt einige wichtige Unterschiede zwischen dash_html_components und HTML-Attributen -
Für die Stileigenschaft in Dash können Sie nur ein Wörterbuch angeben, während es sich in HTML um eine durch Semikolons getrennte Zeichenfolge handelt.
Stilwörterbuchschlüssel sind camelCased, also Textausrichtung ändert sich zu textalign.
ClassName in Dash ähnelt dem HTML-Klassenattribut.
Das erste Argument sind die untergeordneten Elemente des HTML-Tags, das über das untergeordnete Schlüsselwortargument angegeben wird.
Wiederverwendbare Komponenten
Durch Schreiben unseres Markups in Python können wir komplexe wiederverwendbare Komponenten wie Tabellen erstellen, ohne den Kontext oder die Sprache zu wechseln.
Unten finden Sie ein kurzes Beispiel, das aus dem Pandas-Datenrahmen eine „Tabelle“ generiert.
import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
df = pd.read_csv(
'https://gist.githubusercontent.com/chriddyp/'
'c78bf172206ce24f77d6363a2d754b59/raw/'
'c353e8ef842413cae56ae3920b8fd78468aa4cb2/'
'usa-agricultural-exports-2011.csv')
def generate_table(dataframe, max_rows=10):
return html.Table(
# Header
[html.Tr([html.Th(col) for col in dataframe.columns])] +
# Body
[html.Tr([
html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
]) for i in range(min(len(dataframe), max_rows))]
)
app = dash.Dash()
app.layout = html.Div(children=[
html.H4(children='US Agriculture Exports (2011)'),
generate_table(df)
])
if __name__ == '__main__':
app.run_server(debug=True)Unsere Ausgabe wird so etwas wie -
Mehr zur Visualisierung
Die Bibliothek dash_core_components enthält eine Komponente namens Graph.
Graph rendert interaktive Datenvisualisierungen mithilfe der Open Source-JavaScript-Grafikbibliothek plotly.js. Plotly.js unterstützt rund 35 Diagrammtypen und rendert Diagramme sowohl in SVG in Vektorqualität als auch in WebGL mit hoher Leistung.
Unten sehen Sie ein Beispiel, das ein Streudiagramm aus einem Pandas-Datenrahmen erstellt.
import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go
app = dash.Dash()
df = pd.read_csv(
'https://gist.githubusercontent.com/chriddyp/' +
'5d1ea79569ed194d432e56108a04d188/raw/' +
'a9f9e8076b837d541398e999dcbac2b2826a81f8/'+
'gdp-life-exp-2007.csv')
app.layout = html.Div([
dcc.Graph(
id='life-exp-vs-gdp',
figure={
'data': [
go.Scatter(
x=df[df['continent'] == i]['gdp per capita'],
y=df[df['continent'] == i]['life expectancy'],
text=df[df['continent'] == i]['country'],
mode='markers',
opacity=0.7,
marker={
'size': 15,
'line': {'width': 0.5, 'color': 'white'}
},
name=i
) for i in df.continent.unique()
],
'layout': go.Layout(
xaxis={'type': 'log', 'title': 'GDP Per Capita'},
yaxis={'title': 'Life Expectancy'},
margin={'l': 40, 'b': 40, 't': 10, 'r': 10},
legend={'x': 0, 'y': 1},
hovermode='closest'
)
}
)
])
if __name__ == '__main__':
app.run_server()Die Ausgabe des obigen Codes ist wie folgt:
Diese Grafiken sind interaktiv und reagieren. Sie können mit der Maus über Punkte fahren, um deren Werte anzuzeigen, auf Legendenelemente klicken, um Spuren umzuschalten, klicken und ziehen, um zu zoomen, die Umschalttaste gedrückt halten und klicken und ziehen, um zu schwenken.
Abschlag
Während Dash HTML-Aromen über die Bibliothek dash_html_components verfügbar macht, kann es mühsam sein, Ihre Kopie in HTML zu schreiben. Zum Schreiben von Textblöcken können Sie die Markdown-Komponente in der Bibliothek dash_core_components verwenden.
Kernkomponenten
Die dash_core_components enthalten eine Reihe übergeordneter Komponenten wie Dropdowns, Diagramme, Markdowns, Blöcke und vieles mehr.
Wie alle anderen Dash-Komponenten werden sie vollständig deklarativ beschrieben. Jede konfigurierbare Option ist als Schlüsselwortargument der Komponente verfügbar.
Unten sehen Sie das Beispiel mit einigen der verfügbaren Komponenten -
# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash()
app.layout = html.Div([
html.Label('Dropdown'),
dcc.Dropdown(
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': u'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
value='MTL'
),
html.Label('Multi-Select Dropdown'),
dcc.Dropdown(
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': u'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
value=['MTL', 'SF'],
multi=True
),
html.Label('Radio Items'),
dcc.RadioItems(
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': u'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
value='MTL'
),
html.Label('Checkboxes'),
dcc.Checklist(
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': u'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
values=['MTL', 'SF']
),
html.Label('Text Input'),
dcc.Input(value='MTL', type='text'),
html.Label('Slider'),
dcc.Slider(
min=0,
max=9,
marks={i: 'Label {}'.format(i) if i == 1 else str(i) for i in range(1, 6)},
value=5,
),
], style={'columnCount': 2})
if __name__ == '__main__':
app.run_server(debug=True)Die Ausgabe des obigen Programms ist wie folgt:
Hilfe anrufen
Dash-Komponenten sind deklarativ. Jeder konfigurierbare Aspekt dieser Komponenten wird während der Installation als Schlüsselwortargument festgelegt. Sie können die Hilfe in Ihrer Python-Konsole für eine der Komponenten aufrufen, um mehr über eine Komponente und ihre verfügbaren Argumente zu erfahren. Einige von ihnen sind unten angegeben -
>>> help(dcc.Dropdown)
Help on class Dropdown in module builtins:
class Dropdown(dash.development.base_component.Component)
| A Dropdown component.
| Dropdown is an interactive dropdown element for selecting one or more
| items.
| The values and labels of the dropdown items are specified in the `options`
| property and the selected item(s) are specified with the `value` property.
|
| Use a dropdown when you have many options (more than 5) or when you are
| constrained for space. Otherwise, you can use RadioItems or a Checklist,
| which have the benefit of showing the users all of the items at once.
|
| Keyword arguments:
| - id (string; optional)
| - options (list; optional): An array of options
| - value (string | list; optional): The value of the input. If `multi` is false (the default)
-- More --Zusammenfassend beschreibt das Layout einer Dash-App, wie die App aussieht. Das Layout ist ein hierarchischer Baum von Komponenten. Die Bibliothek dash_html_components bietet Klassen für alle HTML-Tags und Schlüsselwortargumente und beschreibt die HTML-Attribute wie style, className und id. Die Bibliothek dash_core_components generiert übergeordnete Komponenten wie Steuerelemente und Diagramme.