Содержание статьи
автор Анудж Пахаде

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 </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/
Продолжайте злой и счастливый кодировки!