by Anuj Pahade

由Anuj Pahade

Dash的快速入門將使您在5分鐘內進入“ Hello World” (This quick intro to Dash will get you to “Hello World” in under 5 minutes)

Dash is an open source library for creating reactive apps in Python. You can create amazing dashboards in your browser using Dash.

Dash是一個開源庫，用于在Python中創建React式應用程序。您可以使用Dash在瀏覽器中創建驚人的儀表板。

The Iris data set can be called the ‘hello world’ of data sets. In this article, we’ll learn how to build a simple Dash app in which we’ll use the Iris data set. This data set is clean, which is good for us so that we can focus on dashing instead of cleaning the data.

Iris數據集可以稱為數據集的“ hello world”。在本文中，我們將學習如何構建一個簡單的Dash應用程序，并在其中使用Iris數據集。該數據集很干凈，這對我們有好處，因此我們可以專注于破折號而不是清理數據。

破折號設定 (Dash setup)

To build cool apps, you need hot libraries.

要構建出色的應用程序，您需要熱庫。

If you have not already installed Dash, then run these commands in your terminal :

如果尚未安裝Dash，請在終端中運行以下命令：

pip install dash==0.21.1 # The core dash backendpip install dash-renderer==0.12.1 # The dash front-endpip install dash-html-components==0.10.1 # HTML componentspip install dash-core-components==0.22.1 # Supercharged componentspip install plotly --upgrade

pip install dash==0.21.1 # The core dash backend pip install dash-renderer==0.12.1 # The dash front-end pip install dash-html-components==0.10.1 # HTML components pip install dash-core-components==0.22.1 # Supercharged components pip install plotly --upgrade

Run your app as :

以以下方式運行您的應用程序：

python helloiris.py

Be clear with your Python versions.

明確說明您的Python版本。

應用布局 (App layout)

We can build the layout with the dash_html_components library and the dash_core_components library. I have imported them as shown above. The dash_html_components is for all HTML tags, whereas the latter one is for interactive components built with React.js. Having said that, let’s write something in our browser using Dash:

我們可以使用dash_html_components庫和dash_core_components庫來構建布局。我已經如上所示導入了它們。 dash_html_components適用于所有HTML標簽，而后者適用于使用React.js構建的交互式組件。話雖如此，讓我們使用Dash在瀏覽器中編寫一些內容：

app.layout = html.Div(children=[    html.H1(children='Iris visualization'),    html.Div(    '''        Built with Dash: A web application framework for Python.    ''')])

Yes! That’s how easy it is. The equivalent HTML code would look like this:

是! 就是這么簡單。等效HTML代碼如下所示：

<div> <h1> Iris visualization &lt;/h1> <div> Built with Dash: A web application framework for Python. </div></div>

Notice the children attribute in the first Div . It is used to define the list of elements enclosed in that tag. This is a positional argument (always comes first) and can be skipped as you can see in the next H1 and Div shown above.

注意第一個Div的children屬性。它用于定義該標簽中包含的元素list 。這是一個位置自變量(始終是第一個)，可以跳過，如您在上面顯示的下一個H1和Div看到的。

Can we style it? I hear you ask. Well, of course! Dash allows you to write style dictionaries as you would write in a <style> tag in HTML. It also lets you write inline CSS and link external CSS files. Here is how we can do it.

我們可以樣式嗎？我聽到你問。嗯，當然！ Dash允許您編寫樣式字典，就像在HTML中的<sty le>標記中編寫一樣。它還允許您編寫內聯CSS并鏈接外部CSS文件。這是我們可以做到的。

風格字典 (Style dictionaries)

Let’s create a dictionary called colors.

讓我們創建一個稱為顏色的字典。

colors = {         'background': '#0000FF',         'color': '#FFA500'}

It can be attached with an element using the style attribute as shown.

如圖所示，可以使用style屬性將其附加到元素上。

app.layout = html.Div(style=colors,children=[    html.H1(children='Iris visualization'),    html.Div(    '''        Built with Dash: A web application framework for Python.    ''')])

內聯CSS (Inline CSS)

In Dash, the keys of dictionaries are camelCased . So instead of text-align we use textAlign . Also the class attribute of HTML tags is className as you might know if you use React.

在Dash中，字典的鍵是camelCased 。因此，我們使用textAlign代替text-align 。如果使用React，HTML標記的class屬性也是className 。

app.layout = html.Div(style=colors,children=[    html.H1(children='Iris visualization',style = {'textAlign':'center'}),

html.Div(style={'textAlign':'center'},children='''        Built with Dash: A web application framework for Python.    ''')])

外部CSS (External CSS)

We can create a list of URLs or paths to CSS files we want to include in our Dash app, and then use app.css.append_css to include them.

我們可以創建URL列表或指向要包含在Dash應用程序中CSS文件的路徑，然后使用app.css.append_css包含它們。

external_css = ["https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css",              "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" ]

for css in external_css:    app.css.append_css({"external_url": css})

We can include JavaScript in the exact same way by using app.scripts.append_script

我們可以使用app.scripts.append_script以完全相同的方式包含JavaScript

I hope you’re with me till now! This is how our helloiris.py file looks:

希望您一直與我在一起！這是我們的helloiris.py文件的外觀：

import dashimport dash_core_components as dccimport dash_html_components as html

app = dash.Dash()

#External CSSexternal_css = ["https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css",                "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css", ]

for css in external_css:    app.css.append_css({"external_url": css})

#External JavaScriptexternal_js = ["http://code.jquery.com/jquery-3.3.1.min.js",               "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"]

for js in external_js:    app.scripts.append_script({"external_url": js})

#Internal CSScolors = {         'background': '#0000FF',         'color': '#FFA500'}

#Our app's Layoutapp.layout = html.Div(style=colors,children=[    html.H1(children='Iris visualization',style={'textAlign':'center'}),

html.Div(style={'textAlign':'center'},children='''     Built with Dash: A web application framework for Python.    ''')])

if __name__ == '__main__':    app.run_server(debug=True)

讓我們獲取一些數據 (Let’s get some data)

Assuming you’re familiar with pandas, we’ll use this Python library to import the iris.csv file in our app. If you don’t know what this dataset is about, then I recommend that you read and download it from here.

假設您熟悉熊貓，我們將使用此Python庫在我們的應用程序中導入iris.csv文件。如果您不知道此數據集的含義，那么建議您從此處閱讀并下載。

import pandas as pd

header_names =[ 'sepal_length', 'sepal_width', 'petal_length', 'petal_width', 'class']

df = pd.read_csv('path/to/Iris.csv',names=header_names)

Now that our data is loaded into the df dataframe, it’s time for visualisation.

現在，我們的數據已加載到df數據幀中，是時候進行可視化了。

數據可視化 (Data visualization)

Remember the interactive components I told you about? The dash_core_components library? Well that’s what we are going to use here.

還記得我告訴過你的互動組件嗎？ dash_core_components庫？嗯，這就是我們在這里要使用的。

import plotly.graph_objs as go

Let’s add a new component to our app.layout . This time it’s not an HTML tag but an interactive graph. Dash uses Plotly to plot graphs.

讓我們向app.layout添加一個新組件。這次，它不是HTML標記，而是交互式圖形。 Dash使用Plotly繪制圖形。

dcc.Graph(        id='Iris Viz',        figure={            'data': [                go.Scatter(                    x=df[df['class'] == i]['petal_length'],                    y=df[df['class'] == i]['sepal_length'],                    mode='markers',                    opacity=0.7,                    marker={                        'size': 15,                        'line': {'width': 0.5, 'color': 'white'}                    },                    name=i                ) for i in df['class'].unique()            ],            'layout': go.Layout(                xaxis={'title': 'Petal Length'},                yaxis={'title': 'Sepal Length'},                margin={'l': 200, 'b': 40, 't': 100, 'r': 200},                legend={'x': 0, 'y': 1},                hovermode='closest'            )        }    )

Whoa! A whole paragraph in Python! Don’t worry. It’s not difficult to understand. Let’s go over it piece by piece:

哇！ Python的整個段落！不用擔心不難理解。讓我們一步一步地研究它：

The dcc.Graph has an id argument which is used to reference the graph in the future for deleting or overlaying or any other purposes.

dcc.Graph有一個id參數，該參數將來用于引用圖形以進行刪除或覆蓋或任何其他目的。

The figure argument is the same as the one used in plotly.py. It takes in two arguments, data and layout.

figure參數與plotly.py中使用的參數相同。它接受兩個參數， data和layout 。

In data we can specify which columns of the dataframe to plot on which axis. We can also specify the mode, for example: marker and then the properties of marker such as width and line (meaning border).

在data我們可以指定要在哪個軸上繪制數據框的哪些列。我們還可以指定模式，例如：標記，然后指定標記的屬性，例如寬度和線條 (意味著邊框)。

In layout we define the axes labels, legend position, graph margins (left, top, bottom, right) and much more.

在layout我們定義了軸標簽，圖例位置，圖形邊距(左，上，下，右)等等。

This isn’t it. These graphs are interactive and can be manipulated by user inputs.

不是嗎這些圖是交互式的，可以通過用戶輸入進行操作。

Ok, so let’s go build some cool DashApps this summer!

好的，讓我們今年夏天開始構建一些很棒的DashApps！

Stay tuned for my next posts. This is not my first time coding or making an app, but it’s my first article on Medium! I think claps and recommendations will motivate me :)

請繼續關注我的下一篇文章。這不是我第一次編寫或開發應用程序，但這是我在Medium上的第一篇文章！我認為拍手和建議會激勵我:)

Don’t hesitate to contact me via email: anujp5678[at]gmail[dot]com

不要猶豫，通過電子郵件與我聯系：anujp5678 [at] gmail [dot] com

Or connect with me on LinkedIn https://www.linkedin.com/in/anuj-pahade/

或通過LinkedIn https://www.linkedin.com/in/anuj-pahade/與我聯系

Keep dashing and happy coding!

繼續使用破破爛爛的編碼！