Поиск по сайту:

Введение в Dash в Python


Dash, успешный фреймворк Python, стал популярным вариантом для создания интерфейсов для визуализации данных. Он идеально подходит для создания аналитических веб-приложений на чистом Python с высокоинтерактивным пользовательским интерфейсом. В этой статье представлено подробное введение в Dash, а также полезные примеры, которые помогут вам приступить к работе.

Что такое Даша?

Dash — это платформа Python, созданная Plotly, которая позволяет создавать аналитические онлайн-приложения без необходимости разбираться в JavaScript, CSS или HTML. Приложения Dash состоят из двух основных компонентов: макета, определяющего, как приложение будет выглядеть, и взаимодействия, определяющего, как приложение будет функционировать.

Начало работы с Дашем

Pip, установщик пакетов для Python, можно использовать для установки Dash —

pip install dash

Вы можете импортировать пакет Dash в свой скрипт Python после его установки 

import dash
import dash_core_components as dcc
import dash_html_components as html

Создание приложения Dash

Давайте теперь посмотрим, как создать приложение Dash.

Пример 1. Базовое приложение Dash

Код очень простого приложения Dash представлен здесь 

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

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={
         'data': [
            {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
            {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': 'Montreal'},
         ],
         'layout': {
            'title': 'Dash Data Visualization'
         }
      }
   )
])

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

В программе отображаются заголовок, текст и простая гистограмма.

Пример 2. Использование обратных вызовов Dash для интерактивности

Dash делает приложения интерактивными, используя обратные вызовы. Обратные вызовы связывают различные части, так что при изменении входных данных изменяется и выходной. Вот иллюстрация 

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
   dcc.Input(id='my-input', value='initial value', type='text'),
   html.Div(id='my-output')
])

@app.callback(
   Output(component_id='my-output', component_property='children'),
   [Input(component_id='my-input', component_property='value')]
)
def update_output_div(input_value):
   return 'You've entered "{}"'.format(input_value)

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

На этом рисунке, если компонент «мой-вход» изменяется, обратный вызов обновляет компонент «мой-выход».

Пример 3: Несколько входов и выходов

Обратные вызовы с несколькими входами и выходами поддерживаются Dash 

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
   dcc.Input(id='input-1', type='text'),
   dcc.Input(id='input-2', type='text'),
   html.Div(id='output')
])

@app.callback(
   Output(component_id='output', component_property='children'),
   [Input(component_id='input-1', component_property='value'),
   Input(component_id='input-2', component_property='value')]
)
def update_output_div(input1, input2):
   return 'You've entered "{}" and "{}"'.format(input1, input2)

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

На этой иллюстрации два компонента ввода подключены к функции обратного вызова update_output_div. Выходной компонент обновляется, чтобы отразить любые изменения входных значений.

Пример 4. Использование компонентов Dash Core

Компоненты более высокого уровня, такие как раскрывающиеся списки, графики, блоки уценки и многое другое, доступны через библиотеки компонентов, предлагаемые Dash, включая Dash_core_comComponents и Dash_html_comComponents. Вот иллюстрация того, как использовать раскрывающийся компонент 

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
   dcc.Dropdown(
      id='dropdown',
      options=[
         {'label': 'Option 1', 'value': '1'},
         {'label': 'Option 2', 'value': '2'},
         {'label': 'Option 3', 'value': '3'}
      ],
      value='1'
   ),
   html.Div(id='display-selected-values')
])

@app.callback(
   dash.dependencies.Output('display-selected-values', 'children'),
   [dash.dependencies.Input('dropdown', 'value')])
def set_display_children(selected_value):
   return 'You've selected "{}"'.format(selected_value)

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

На этом рисунке выходные данные обновляются с помощью функции обратного вызова, чтобы отобразить выбранный элемент из раскрывающегося меню.

Заключение

Эффективный набор инструментов для создания веб-приложений для визуализации данных предоставляется платформой Python Dash. Его универсальность, которая позволяет пользователям создавать сложные и интерактивные информационные панели, используя только код Python, делает его очень востребованным инструментом в области науки о данных.

Эта статья послужила введением в Dash и его функции, в том числе о том, как его установить и использовать при программировании на Python. Кроме того, мы рассмотрели четыре примера, каждый из которых показывал, как разработать приложение Dash по-своему, в том числе как спроектировать простую программу, добавить взаимодействие с обратными вызовами, использовать несколько входов и выходов, а также использовать основные компоненты Dash.

Однако представленные здесь образцы лишь намекают на весь потенциал Dash. Чтобы лучше понять потенциал Dash, мы рекомендуем вам больше исследовать и экспериментировать с различными компонентами и структурами обратных вызовов. Для сложных приложений его официальная документация является отличным ресурсом, предлагающим множество информации.

Статьи по данной тематике: