автор Анудж Пахаде

Dash – библиотека с открытым исходным кодом для создания реактивных программ на Python. Вы можете создавать удивительные информационные панели в своем браузере с помощью Dash.

Набор данных Iris можно выделить «привет, мир» наборов данных. В этой статье мы узнаем, как создать простую программу Dash, в которой мы будем использовать набор данных Iris. Этот набор данных чист, что хорошо для нас, поэтому мы можем сосредоточиться на скорости, а не на очистке данных.

Настройка приборной панели

Чтобы создать крутые программы, вам нужны горячие библиотеки.

Если вы еще не установили Dash, запустите эти команды в терминале:

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

Запустите приложение как:

python helloiris.py

Будьте понятны со своими версиями Python.

Макет программы

Мы можем построить макет с помощью dash_html_components библиотека и dash_core_components библиотека. Я импортировал их, как показано выше. The 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.    ''')])

Да! Вот как это просто. Эквивалентный HTML-код будет выглядеть так:

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

Обратите внимание на children атрибут в первом Div . Он используется для определения list элементов, заключенных в этот тэг. Это позиционный аргумент (всегда стоящий на первом месте), его можно пропустить, как вы можете увидеть в следующем H1 и Div показано выше.

Могли бы мы стиль это? Я слышу, ты спрашиваешь. Ну естественно! Dash позволяет вам писать словари стилей так, как вы пишете в a <styтег le> в HTML. Он также позволяет писать встроенный CSS и связывать внешние CSS файлы. Вот как мы можем сделать это.

Словари стилей

Давайте создадим словарь под названием цвета.

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

Его можно прикрепить с помощью элемента 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

В Dash ключи словарей есть camelCased . Поэтому вместо text-align мы используем textAlign . Также class атрибут HTML-тегов className как вы могли знать, если вы используете React.

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

Мы можем создать список URL или путей к файлам CSS, которые мы хотим включить в наше приложение Dash, а затем использовать app.css.append_css включить их.

external_css = ["              " ]

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

Мы можем включить JavaScript точно так же, используя app.scripts.append_script

Надеюсь, ты до сих пор со мной! Вот как выглядит наш файл helloiris.py:

import dashimport dash_core_components as dccimport dash_html_components as html

app = dash.Dash()

#External CSSexternal_css = ["                ", ]

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

#External JavaScriptexternal_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'}

#Наше приложение 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)

Давайте получим некоторые данные

Если вы знакомы с пандами, мы используем эту библиотеку 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)

Теперь, когда наши данные загружены в файл df dataframe, пришло время для визуализации.

Визуализация данных

Помните интерактивные компоненты, о которых я вам говорил? The dash_core_components библиотека? Ну, это то, что мы будем использовать здесь.

import plotly.graph_objs as go

Давайте добавим новый компонент к нашему 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"            )        }    )

Вау! Целый абзац на Python! Не волнуйся. Это легко понять. Давайте рассмотрим это по частям:

The dcc.Graph имеет id аргумент, используемый для ссылок на график в будущем для удаления или наложения или других целей.

The figure Аргумент такой же, как и у plotly.py. Он принимает два аргумента, data и layout.

в data мы можем указать, какие столбцы фрейма данных построить на какой оси. Мы также можем указать режим, например: маркер а затем свойства маркера, например ширина и линия (имеется в виду граница).

в layout мы определяем метки осей, положение легенды, поля графика (слева, верхняя, нижняя, справа) и многое другое.

Это не то. Эти графики интерактивны и ими можно управлять с помощью введенных пользователей.

Ладно, давайте создадим крутые DashApps этим летом!

Следите за моими последующими публикациями. Это не первый раз, когда я кодирую или создаю приложение, но это моя первая статья о Medium! Я думаю, что хлопки и рекомендации меня мотивируют:)

Не стесняйтесь связаться со мной по электронной почте: anujp5678[at]Gmail[dot]com

Или свяжитесь со мной на LinkedIn https://www.linkedin.com/in/anuj-pahade/

Продолжайте злой и счастливый кодировки!