Dashboard на python вместо excel

Время на прочтение
8 мин

Количество просмотров 6.4K

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

Если речь идет о данных, значит, это касается и Python. В частности, мы говорим о библиотеке Dash, которая построена на базе одной из самых популярных библиотек для построения графиков — Plotly.

Dash позволяет легко создавать и делиться результатами анализа данных с помощью интерактивных дашбордов, используя только код Python. Нет необходимости изучать HTML, CSS или сложные JavaScript-фреймворки, такие как React.js.

В этом руководстве вы получите представление о том, на что способен Dash, и как интегрировать его в свой рабочий процесс.

Установка Dash и Plotly

Вы можете установить Dash с помощью pip. Также необходимо инсталлировать библиотеку pandas для работы с наборами данных:

pip install dash pandas

Приведенная выше команда также выполняет установку plotly. Plotly известен своими интерактивными графиками, и Plotly и Dash созданы Plotly Software Foundation, поэтому библиотеки довольно хорошо работают вместе.

Требования по использованию Dash

У такого мощного фреймворка, как Dash, есть несколько требований. Во-первых, вы должны знать Plotly Python, поскольку Dash может отображать только интерактивные графики Plotly.

Далее, вам необходимо базовое понимание HTML и CSS. Dash похож на React, но на языке Python. Это шаблонный фреймворк, на котором вы можете создать сайт без JavaScript.

Дашборд содержит множество графики, и пользователю самому решать, как отобразить все на одной странице. Plotly обрабатывает изображения, но аспект компоновки зависит от Dash и его HTML-компонентов.

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

Давайте создадим наше Dash-приложение. После инсталляции импортируем следующие библиотеки:

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd

dash – это глобальная библиотека, содержащая все основные функции. dash_core_components и dash_html_components – это библиотеки, которые устанавливаются с dash по умолчанию. Они включают специфические для Dash фичи и Python-представление HTML-компонентов (тегов). Подробнее о них позже.

Любое приложение Dash запускается с помощью следующей команды:

app = dash.Dash(name="my_first_dash_app")

>>> app
<dash.dash.Dash at 0x1ee6af51af0>

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

Сначала мы загрузим встроенный датасет из Plotly и создадим простую диаграмму рассеяния:

# Load dataset using Plotly
tips = px.data.tips()

fig = px.scatter(tips, x="total_bill", y="tip") # Create a scatterplot

Затем мы добавляем это изображение в атрибут layout нашего приложения внутри тега div с небольшими текстами:

app.layout = html.Div(children=[
   html.H1(children='Hello Dash'),  # Create a title with H1 tag

   html.Div(children='''
       Dash: A web application framework for your data.
   '''),  # Display some text

   dcc.Graph(
       id='example-graph',
       figure=fig
   )  # Display the Plotly figure
])

if __name__ == '__main__':
   app.run_server(debug=True) # Run the Dash app

Теперь мы создаем HTML-теги с помощью библиотеки dash_html_components (html), а изображение – используя основные компоненты (dcc) library .

За тегом заголовка H1 следует div, содержащий обычный текст, затем сам график с использованием функции Graph библиотеки dcc. Все это находится внутри атрибута children одного тега DIV.

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

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd

# Create the app
app = dash.Dash(__name__)

# Load dataset using Plotly
tips = px.data.tips()

fig = px.scatter(tips, x="total_bill", y="tip") # Create a scatterplot

app.layout = html.Div(children=[
   html.H1(children='Hello Dash'),  # Create a title with H1 tag

   html.Div(children='''
       Dash: A web application framework for your data.
   '''),  # Display some text

   dcc.Graph(
       id='example-graph',
       figure=fig
   )  # Display the Plotly figure
])

if __name__ == '__main__':
   app.run_server(debug=True) # Run the Dash app

Поместите его в скрипт Python и запустите. В терминале вы получите сообщение о том, что необходимо перейти по этой ссылке: http://127.0.0.1:8050/.

Итак, поехали:

В следующих разделах мы подробно расскажем о том, что здесь произошло.

Создание app.layout

Давайте начнем с атрибута layout. Это единственный атрибут, который содержит все ваши HTML-компоненты и изображения. Вы должны передать ему всю вашу графику и HTML-теги в конечном теге DIV.

В зависимости от размера вашего проекта, данный атрибут может стать довольно большим, поэтому я рекомендую создавать все ваши HTML-теги и фигуры в отдельных переменных, а затем передавать их в layout.

Например, вот как будет выглядеть приведенное выше приложение:

app = dash.Dash(name="app")

# Load dataset using Plotly
tips = px.data.tips()

fig = px.scatter(tips, x="total_bill", y="tip")  # Create a scatterplot

title = html.H1("Hello Dash!")
text_div = html.Div("Dash: A web application framework for your data.")
graph_to_display = dcc.Graph(id="scatter", figure=fig)

app.layout = html.Div(children=[title, text_div, graph_to_display])

Это гораздо аккуратнее и компактнее, и это одна из тех вещей, о которых вы не узнаете в документации Dash. Там куча вложенного кода вместо того, чтобы сделать вышеописанное.

Компоненты HTML и CSS в Dash

Давайте обсудим, как HTML и CSS работают в Dash. Подбиблиотека dash_html_components содержит наиболее распространенные теги HTML, такие как divs, кнопки, текстовые поля, названия, теги заголовков (H1-6) и т. д.

Они реализованы в коде Python под соответствующими именами как представление их HTML-аналогов. Итак, код, подобный приведенному, ниже:

import dash_html_components as html

html.Div([
   html.H1('Hello Dash'),
   html.Div([
       html.P('Dash converts Python classes into HTML'),
       html.P("This conversion happens behind the scenes by Dash's JavaScript frontend")
   ])
])

Будет интерпретироваться вашим браузером следующим образом:

<div>
   <h1>Hello Dash</h1>
   <div>
       <p>Dash converts Python classes into HTML</p>
       <p>This conversion happens behind the scenes by Dash's JavaScript front-end</p>
   </div>
</div>

Все HTML-теги этой подбиблиотеки содержат следующие основные аргументы:

• id: то же, что и атрибут id HTML-тегов

• className: то же самое, что и атрибут class тегов HTML

• style: такой же, как атрибут style тегов HTML, но принимает только словарь стилей CSS

• children: первый аргумент большинства компонентов HTML

Вот пример div с некоторыми кастомизированными настройками:

app = dash.Dash(name="app")

app.layout = html.Div(
   children=html.H3("Simple Div"),
   id="sample_div",
   className="red_div",
   style={"backgroundColor": "red"},
)

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

Аргумент children уникален — он может принимать числа и строки, но чаще всего вы передаете другие компоненты HTML списком, если это тег-контейнер, например такой как div.

Замечание о стилях CSS: большинство атрибутов стиля CSS используют дефисы для разделения слов. Когда вы передаете их в аргумент style Dash, они должны применять camelCase, например backgroundColor вместо background-color.

Я настоятельно рекомендую вам изучить данные HTML-теги, поскольку это единственное, что сохраняет целостность макета (лейаута) вашего приложения. Вот полный список HTML-тегов, поддерживаемых Dash.

Основные компоненты Dash

Другой важной частью Dash являются его основные компоненты. Библиотека dash_core_components содержит несколько других HTML-тегов, но в нее уже встроено немного CSS и JavaScript.

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

Вот несколько образцов этих компонентов, начиная с выпадающего списка:

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
   dcc.Dropdown(
       options=[
           {'label': 'FC Barcelona', 'value': 'FCB'},
           {'label': 'Real Madrid', 'value': 'RM'},
           {'label': 'Manchester United', 'value': 'MU'}
       ],
       value='FCB' # The default value to display
   )
])

Выпадающий список с мультивыбором:

app = dash.Dash(__name__)

app.layout = html.Div([
   dcc.Dropdown(
       options=[
           {'label': 'FC Barcelona', 'value': 'FCB'},
           {'label': 'Real Madrid', 'value': 'RM'},
           {'label': 'Manchester United', 'value': 'MU'}
       ],
       multi=True,
       value="FCB"
   )
], style={"width": 200})

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

Слайдер с помеченными точками останова:

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
   dcc.Slider(
       min=0,
       max=9,
       marks={i: 'Label{}'.format(i) for i in range(10)},
       value=5,
   )
])

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

Существует универсальный атрибут value, который представляет дефолтное значение при первом рендеринге компонента.

Полный список основных компонентов можно посмотреть здесь.

Создание финального интерфейса визуализации данных с помощью Python Dash

В качестве завершающего примера посмотрите на приведенное ниже приложение:

import seaborn as sns

app = dash.Dash(__name__)

diamonds = sns.load_dataset("diamonds")

scatter = px.scatter(
   data_frame=diamonds,
   x="price",
   y="carat",
   color="cut",
   title="Carat vs. Price of Diamonds",
   width=600,
   height=400,
)
histogram = px.histogram(
   data_frame=diamonds,
   x="price",
   title="Histogram of Diamond prices",
   width=600,
   height=400,
)
violin = px.violin(
   data_frame=diamonds,
   x="cut",
   y="price",
   title="Violin Plot of Cut vs. Price",
   width=600,
   height=400,
)

left_fig = html.Div(children=dcc.Graph(figure=scatter))
right_fig = html.Div(children=dcc.Graph(figure=histogram))

upper_div = html.Div([left_fig, right_fig], style={"display": "flex"})
central_div = html.Div(
   children=dcc.Graph(figure=violin),
   style={"display": "flex", "justify-content": "center"},
)
app.layout = html.Div([upper_div, central_div])

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

Мы импортируем датасет Diamonds из Seaborn и создаем три графика: диаграмму рассеяния, гистограмму и скрипичную диаграмму. Мы хотим отобразить график рассеяния и гистограмму рядом друг с другом и поместить скрипичную диаграмму прямо под ними в центре.

Для этого мы создаем два div’а, содержащих график рассеяния и гистограмму, left_figure и right_figure. Затем для простоты эти два div помещаем в еще один div — upper_div.

Мы устанавливаем CSS-стиль flex-box для этого div, который размещает фигуры бок о бок.

Затем мы создаем центральный div, содержащий скрипичную диаграмму, и выравниваем его по центру с помощью flex-box и его атрибута justify-content.

Наконец, мы помещаем все в лейаут внутри последнего DIV и запускаем скрипт. Вот конечный результат:

Заключение

Вот краткое описание шагов по созданию базового Dash-приложения:

1. Создайте приложение с помощью dash.Dash и дайте ему любое название.

2. Набросайте лейаут своих графиков в дашборде, прежде чем писать код.

3. Создайте графики, которые войдут в ваш дашборд

4. Создайте шаблонный лейаут с помощью HTML-компонентов Dash

5. Добавьте свои изображеня в соответствующие контейнеры

6. Наконец, добавьте все HTML-компоненты к атрибуту лейаута

Несмотря на то, что мы рассмотрели многие базовые аспекты, такие как HTML, основные компоненты и лейаут приложения, это лишь поверхностное знакомство с возможностями Dash.

Я показал вам множество примеров интерактивных HTML-компонентов, но не рассказал, как интегрировать их в ваше приложение. Как вы можете обновлять графики на основе вводимых пользователем данных, таких как слайдеры, текст или что-то подобное?

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

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

Загляните в галерею примеров, где вы сможете увидеть и насладиться некоторыми очень крутыми проектами, созданными с помощью Dash. Самое приятное, что многие из них с открытым исходным кодом, а это значит, что вы можете многое для себя почерпнуть и вдохновиться на новые идеи. 

Спасибо за прочтение!

В заключение приглашаем на открытое занятие «Работа с Power BI. Построение дашборда. Настройка и взаимодействие визуальных элементов». На уроке загрузим данные в Power BI Desktop из источника, построим небольшой дашборд, посмотрим на назначение и варианты настройки базовых визуальных элементов. Записаться можно по ссылке.

Веб-разработка с Python: Dash (полное руководство)

Рисование с помощью Plotly, внедрение Bootstrap CSS, загрузка и скачивание файлов, изменение ввода после выбора, панели навигации, счетчики и многое другое…

Резюме

Добро пожаловать в это хардкорное руководство по Dash. После этой статьи вы сможете создать и развернуть базовый прототип (минимально жизнеспособный продукт) для любого типа веб-приложения.

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

В этом руководстве я объясню, как создать полноценное веб-приложение Dash, на примере моего приложения для планирования свадеб (ссылка ниже).

Я представлю некоторый полезный код Python, который можно легко применить в других подобных случаях (просто скопировать, вставить, запустить) и пройтись по каждой строке кода с комментариями, чтобы вы могли воспроизвести этот пример (ссылка на полный код ниже).

В частности, я пройду через:

• Настройка среды
• Модель данных
• Подготовить базовую структуру приложения тире (панель навигации, тело, макет)
• Входные данные (форма, ползунок, руководство, загрузка файла, изменение входных данных после события)
• Вывод (Plotly, загрузка файла, счетчик при загрузке)
• Разверните приложение на Heroku

Настраивать

Первым делом я установлю через терминал следующие библиотеки:

## for application
dash==1.20.0
dash-bootstrap-components==0.12.2
## to produce random data
names==0.3.0
## for data processing
numpy==1.19.5
pandas==1.1.5
## for plotting
plotly==4.14.3
## for read and write excel files
openpyxl==3.0.7
xlrd==1.2.0

Чтобы панель управления выглядела красиво, мы будем использовать Bootstrap, фреймворк CSS / JS, который содержит шаблоны дизайна для форм, кнопок, навигации и других компонентов интерфейса . Пакет D ash-Bootstrap-Components позволяет легко интегрировать Bootstrap в наше приложение Dash.

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

Обратите внимание, что последняя версия xlrd (2.0.0) не принимает файлы .xlsx, поэтому используйте 1.2.0 если вы хотите загрузить файлы Excel.

Модель данных

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

import names
import pandas as pd
import numpy as np

'''
Generate random guests list
:parameter
    :param n: num - number of guests and length of dtf
    :param lst_categories: list - ["family", "friends", ...]
    :param n_rules: num - number of restrictions to apply (ex. if 1 
                    then 2 guests can't be sit together)
:return
    dtf with guests
'''
def random_data(n=100, lst_categories=["family","friends",
                "work","university","tennis"], n_rules=0):
    ## basic list
    lst_dics = []
    for i in range(n):
        name = names.get_full_name()
        category = np.random.choice(lst_categories) if 
                   len(lst_categories) > 0 else np.nan
        lst_dics.append({"id":i, "name":name, "category":category, 
                         "avoid":np.nan})
    dtf = pd.DataFrame(lst_dics)
    ## add rules
    if n_rules > 0:
        for i in range(n_rules):
            choices = dtf[dtf["avoid"].isna()]["id"]
            ids = np.random.choice(choices, size=2)
            dtf["avoid"].iloc[ids[0]] = int(ids[1]) if 
              int(ids[1]) != ids[0] else int(ids[1])+1
    return dtf

Эта функция создает таблицу с информацией о гостях.

Я воспользуюсь столбцом «Категория», чтобы отображать гостей разными цветами:

Столбец «избегать» будет использоваться для того, чтобы два гостя, ненавидящие друг друга, не оказались за одним столом.

Приложение будет распределять места на основе:

• награда +1, когда два человека, принадлежащих к одной категории, сидят рядом друг с другом
• штраф -1, когда два человека, которые хотят избежать друг друга, помещаются за один стол.

Эта функция возвращает тот же фрейм данных с новым столбцом для назначенной таблицы:

Структура приложения

Теперь мы можем начать с самой интересной части: создания приложения. Я разделю его на 3 части: панель навигации, тело и макет. Причем каждый раздел будет состоять из 3 частей:

• Ввод — раздел приложения, в котором пользователь может вставлять и выбирать параметры и данные, которые будут использоваться серверной частью для возврата желаемого результата (для панели навигации ввод не требуется).
• Вывод — раздел приложения, в котором пользователь может визуализировать результаты.
• Обратные вызовы — декоратор, оборачивающий функцию, в которой нужно указать выходы, входы и состояния; последние позволяют передавать дополнительные значения без использования обратных вызовов (обратные вызовы могут выглядеть пугающе, но на самом деле они ваши лучшие друзья).

# setup
import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
# App Instance
app = dash.Dash(name="name")
app.title = "name"
########################## Navbar ##########################
# Input
# Output
navbar = dbc.Nav()
# Callbacks
@app.callback()
def function():
    return 0
########################## Body ##########################
# Input
inputs = dbc.FormGroup()
# Output
body = dbc.Row([
        ## input
        dbc.Col(md=3),
        ## output
        dbc.Col(md=9)
])
# Callbacks
@app.callback()
def function():
    return 0
########################## App Layout ##########################
app.layout = dbc.Container(fluid=True, children=[
    html.H1("name", id="nav-pills"),
    navbar,
    html.Br(),html.Br(),html.Br(),
    body
])
########################## Run ##########################
if __name__ == "__main__":
    app.run_server(debug=True)

Начнем со стиля . Замечательный Dash-Bootstrap-Components предлагает огромное разнообразие предопределенных стилей. Вы можете ознакомиться с ними здесь. Выбрав один из них, вы можете вставить его в экземпляр приложения как внешнюю таблицу стилей. Вы даже можете использовать более одного:

theme = dbc.themes.LUX
css = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'
# App Instance
app = dash.Dash(name="name",
                external_stylesheets=[theme, css])

Перейдем к верхней панели навигации. Я добавлю ссылку, всплывающее окно и раскрывающееся меню.

Как видите, панель навигации классная и реагирует на нажатие, с всплывающими окнами и раскрывающимся меню. Выпадающее меню «Ссылки» очень простое, так как для его работы не требуется обратный вызов, а всплывающее меню «О программе» немного сложно.

Навигационная панель содержит 3 навигационных элемента: логотип, кнопку «О программе», раскрывающееся меню. Кнопка «О программе» включает в себя 2 элемента: навигационную ссылку (которая обычно используется для навигации по многостраничному приложению, но в данном случае href = ”/”) и всплывающее окно (зеленый и красный Метки). Эти 2 элемента вызываются в обратном вызове как выходы, входы и состояния, как это, если щелкнуть навигационную ссылку «О программе», тогда всплывающее окно станет активным и появится. Функция python about_popover () ожидает 3 аргумента, потому что обратный вызов имеет один вход и два состояния, и возвращает 2 переменные, поскольку обратный вызов имеет два выхода. Когда приложение запускается и кнопка не нажимается n = 0.

Обратите внимание, что раскрывающееся меню (синяя часть) включает шрифты, импортированные с помощью внешней таблицы стилей (т. Е. className = ”fa fa-linkedin”).

Панель навигации, которую мы только что видели, является одним из элементов окончательного макета вместе с заголовком и основным телом:

Теперь поговорим о слоне в комнате… основном теле. Он состоит из входов (слева) и выходов (справа), которые взаимодействуют друг с другом благодаря обратным вызовам.

Входы

Обычно входные данные объединяются в группу форм и отправляются при нажатии кнопки Форма. Ползунки и ввод вручную — самые распространенные элементы формы.

Вот как можно создать обычный слайдер:

dcc.Slider(id="n-guests", min=10, max=100, step=1, value=50, 
           tooltip={'always_visible':False})

и вот как установить в ползунке только определенные значения:

dcc.Slider(id="n-iter", min=10, max=1000, step=None, 
           marks={10:"10", 100:"100", 500:"500", 1000:"1000"}, 
           value=0),

Это простой ручной ввод:

dbc.Input(id="max-capacity", placeholder="table capacity", 
          type="number", value="10"),

Давайте увеличим сложность и разберемся с ситуацией «Загрузка файла». Я собираюсь дать пользователям возможность загрузить файл Excel, содержащий аналогичный набор данных, который мы сгенерировали случайным образом:

При загрузке файла я хочу, чтобы произошло два события:

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

Как нам этого добиться? Легко, с волшебным обратным вызовом, который изменяет стиль CSS компонентов HTML:

Чтобы использовать загруженный файл, нам нужно проанализировать его и преобразовать в фрейм данных pandas, и мы собираемся использовать для этого эту функцию:

import pandas as pd
import base64
import io
'''
When a file is uploaded it contains "contents", "filename", "date"
:parameter
    :param contents: file
    :param filename: str
:return
    pandas table
'''
def upload_file(contents, filename):
    content_type, content_string = contents.split(',')
    decoded = base64.b64decode(content_string)
    try:
        if 'csv' in filename:
            return pd.read_csv(io.StringIO(decoded.decode('utf-8')))
        elif 'xls' in filename:
            return pd.read_excel(io.BytesIO(decoded))
    except Exception as e:
        print("ERROR:", e)
        return 'There was an error processing this file.'

Прежде чем перейти к выводам, давайте подведем итоги того, что мы видели до сих пор. Вот полный код входов в основном теле:

########################## Body ##########################
# Input
inputs = dbc.FormGroup([
    ## hide these 2 inputs if file is uploaded
    html.Div(id='hide-seek', children=[
        dbc.Label("Number of Guests", html_for="n-guests"), 
        dcc.Slider(id="n-guests", min=10, max=100, step=1, value=50, 
                   tooltip={'always_visible':False}),
        dbc.Label("Number of Rules", html_for="n-rules"), 
        dcc.Slider(id="n-rules", min=0, max=10, step=1, value=3, 
                   tooltip={'always_visible':False})
    ], style={'display':'block'}),
    ## always visible
    dbc.Label("Number of Trials", html_for="n-iter"), 
    dcc.Slider(id="n-iter", min=10, max=1000, step=None, 
               marks={10:"10", 100:"100", 500:"500", 1000:"1000"}, 
               value=0),
    html.Br(),
    dbc.Label("Max Guests per Table", html_for="max-capacity"), 
    dbc.Input(id="max-capacity", placeholder="table capacity", 
              type="number", value="10"),
    ## upload a file
    html.Br(),
    dbc.Label("Or Upload your Excel", html_for="upload-excel"), 
    dcc.Upload(id='upload-excel', children=html.Div([
               'Drag and Drop or ', html.A('Select Files')]),
               style={'width':'100%', 'height':'60px', 
                      'lineHeight':'60px', 'borderWidth':'1px',  
                      'borderStyle':'dashed',
                      'borderRadius':'5px', 'textAlign':'center', 
                      'margin':'10px'} ),
    html.Div(id='excel-name', style={"marginLeft":"20px"}),
    ## run button
    html.Br(),html.Br(),
    dbc.Col(dbc.Button("run", id="run", color="primary"))
])

# Callbacks
@app.callback(
 output=[
  Output(component_id="hide-seek", component_property="style"),
  Output(component_id="excel-name", component_property="children")], 
 inputs=[
  Input(component_id="upload-excel",component_property="filename")])
def upload_event(filename):
    div = "" if filename is None else "Use file "+filename
    return {'display':'block'} if filename is None else 
           {'display':'none'}, div

Выходы

Серверная часть должна выдавать 3 вывода: заголовок, ссылку для загрузки результатов в виде файла Excel и, очевидно, график.

Приступим к сюжету, сделанному с помощью Plotly. По сути, есть два основных модуля этой удивительной графической библиотеки: plotly express и graph_objects. Первый — это графический инструмент высокого уровня, содержащий функции, которые могут создавать целые фигуры сразу (я нахожу это похожим на seaborn), в то время как последний позволяет вам строить фигуру по кирпичику (на самом деле это то, что сюжетно выражает работает под капотом).

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

Итак … что это?

Это может выглядеть как рисунок, но это правильная геометрическая фигура: это диаграмма рассеяния, цвет на которой основан на категории, к которой принадлежат гости (семья, друзья,…), размер определяется тем, хочет ли гость избегать кого-то. или нет (в основном я выделяю проблемные), а фасетный компонент связан с таблицей, назначенной каждому гостю. Фасетные графики — это фигуры, составленные из нескольких подзаголовков, которые имеют одинаковый набор осей, где каждый подзаголовок показывает подмножество данных.

Прежде всего, мне нужно добавить координаты x и y для графика, используя уравнение круга: (x, y) = (r * cosθ, r * sinθ). Затем я добавляю столбец «размер» на основе столбца «избегать»:

def prepare_data(dtf):
    ## mark the rules
    dtf["avoid"] = dtf["avoid"].apply(lambda x: 
                     dtf[dtf["id"]==x]["name"].iloc[0] if 
                     pd.notnull(x) else "none")
    dtf["size"] = dtf["avoid"].apply(lambda x: 1 if x == "none" 
                     else 3)
    ## create axis
    dtf_out = pd.DataFrame()
    lst_tables = []
    for t in dtf["table"].unique():
        dtf_t = dtf[dtf["table"]==t]
        n = len(dtf_t)
        theta = np.linspace(0, 2*np.pi, n)
        dtf_t["x"] = 1*np.cos(theta)
        dtf_t["y"] = 1*np.sin(theta)
        dtf_out = dtf_out.append(dtf_t)
    return dtf_out.reset_index(drop=True).sort_values("table")

Затем я могу просто использовать команды plotly для создания фигур и указать, какая информация будет отображаться при наведении указателя мыши на точки:

import plotly.express as px
fig = px.scatter(dtf, x="x", y="y", color="category", 
                 hover_name="name", facet_col="table", 
                 facet_col_wrap=3, size="size",                         
                 hover_data={"x":False, "y":False, "category":True, 
                             "avoid":True, "size":False,  
                             "table":False}
              )         
fig.add_shape(type="circle", opacity=0.1, fillcolor="black", 
              col="all", row="all", exclude_empty_subplots=True,                       
              x0=dtf["x"].min(), y0=dtf["y"].min(), 
              x1=dtf["x"].max(), y1=dtf["y"].max()
              )         
fig.update_layout(plot_bgcolor='white', 
                  legend={"bordercolor":"black", 
                          "borderwidth":1, 
                          "orientation":"h"}
              )

Полный код для сюжета (и заголовок):

Теперь, когда график готов, как загрузить результаты в виде файла Excel? Нам просто нужна функция, которая преобразует фрейм данных pandas в файл и передает ссылку для его загрузки в пользовательский интерфейс:

import pandas as pd
import io
import base64
'''
Write excel
:parameter
    :param dtf: pandas table
:return
    link
'''
def download_file(dtf):
    xlsx_io = io.BytesIO()
    writer = pd.ExcelWriter(xlsx_io)
    dtf.to_excel(writer, index=False)
    writer.save()
    xlsx_io.seek(0)
    media_type = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    data = base64.b64encode(xlsx_io.read()).decode("utf-8")
    link = f'data:{media_type};base64,{data}'
    return link

На стороне интерфейса мы должны добавить HTML-ссылку для загрузки и проделать обычный трюк с обратным вызовом:

Как вы могли заметить, выходные данные (заголовок, загрузка, сюжет) заключены в Spinner, который воспроизводит этот приятный эффект состояния загрузки при разработке входных данных:

Развертывать

Наконец, мы готовы развернуть это приложение. Вот полный код приложения Dash (с остальной частью репозитория вы можете ознакомиться на GitHub):

Лично мне нравится Heroku за развертывание прототипов . Вам нужно будет добавить requirements.txt и Procfile. Если вам нужна помощь, вы можете найти подробные руководства здесь и здесь.

Вывод

Эта статья представляет собой (почти) полное руководство о том, как создать хорошее веб-приложение с помощью Python Dash. Это приложение довольно простое, поскольку в нем нет базы данных и функции входа в систему (может быть, материал для следующего руководства?). Здесь я просто хотел продемонстрировать, как вы можете легко превратить свои идеи в прототип, чтобы показать миру. А теперь, когда вы знаете, как это работает, вы можете разработать собственное приложение.

Я надеюсь, что вам понравилось! Не стесняйтесь обращаться ко мне с вопросами и отзывами или просто для того, чтобы поделиться своими интересными проектами.

LinkedIn | Инстаграм | Twitter | GitHub

Эта статья является частью серии Веб-разработка с помощью Python, см. Также:

In this tutorial, you’ll learn how to create Python interactive dashboards using plotly Dash, with an example.

Web-based dashboards are an efficient way to display and share information with others. But it often involves a complicated process that only expert web developers can achieve. As Python programmers in data science, how can we build an interactive web application with data visualizations?

Plotly Dash is the go-to library. It empowers us to build beautiful looking, interactive, and easy to share dashboards, all in Python.

Following this Python Dash tutorial, you’ll learn:

• What is Dash
• How to build the Dash app layout with data visualization
• How to add interactive features (callbacks)
• How to run and display the dashboard

So if you want to build your first interactive dashboard with Python Dash, this tutorial will walk you through an example step-by-step.

Let’s get started!

Editor’s Note: This tutorial is updated in April 2022 to include the new features in Dash 2.0.

Further learning: to learn more details and depth about Dash, please take our video course: Python Interactive Dashboards with Plotly Dash. It includes step-by-step explanations, more advanced functions, all with real-world dataset examples.

To follow this Python interactive dashboard in Dash tutorial, you need to know Python, including basic knowledge of pandas. If you need help, please check out the below resources:

• Python basics: FREE Python crash course
• Python pandas: Python for Data Analysis with projects course. This course teaches pandas, which is necessary to transform the dataset into a dashboard, and much more!

What is Dash?

Dash is a free Python library built by the same company that created the plotly graphing library. With Dash, you can develop web-based, customizable, interactive dashboards, all in Python, without writing HTML or JavaScript.

Each Dash app has two main parts:

• layout: determines what the Dash app looks like
• callback functions: the function that connects the Dash components and defines their interactive features

We’ll build both parts in this tutorial. Now let’s go through our example to make an interactive data visualization using Dash.

Step #1: Exploring the dataset

Before building the Dash app, we need to explore the dataset. We recommend doing this in JupyterLab/Notebook. Since it has an interactive interface, we can easily code and examine the outputs.

First, we’ll import two libraries (please install them if you haven’t):

• pandas: for loading and manipulating datasets
• plotly.express: for generating data visualizations
  Dash is built on top of plotly, so it’s easy to put plotly figures into Dash apps. This is why we are using plotly, instead of other Python data visualization libraries

In this tutorial, we’ll use the Avocado Prices dataset to build our example dashboard. So let’s load it and take a look at its summary.

As you can see, the dataset contains information about avocados.

<class 'pandas.core.frame.DataFrame'>
RangeIndex: 30021 entries, 0 to 30020
Data columns (total 13 columns):
 #   Column         Non-Null Count  Dtype  
---  ------         --------------  -----  
 0   date           30021 non-null  object 
 1   average_price  30021 non-null  float64
 2   total_volume   30021 non-null  float64
 3   4046           30021 non-null  float64
 4   4225           30021 non-null  float64
 5   4770           30021 non-null  float64
 6   total_bags     30021 non-null  float64
 7   small_bags     30021 non-null  float64
 8   large_bags     30021 non-null  float64
 9   xlarge_bags    30021 non-null  float64
 10  type           30021 non-null  object 
 11  year           30021 non-null  int64  
 12  geography      30021 non-null  object 
dtypes: float64(9), int64(1), object(3)
memory usage: 3.0+ MB

Now suppose we want to present the average prices of different types of avocados for various geographies across time, i.e., we want to focus on presenting the information of the columns date, average_price, type, and geography.

Let’s explore these columns more. What are the different type and geography of avocados? Let’s take a look at the categories using the value_counts method. This will show us the unique categories for these variables.

From the results below, you can see that there are two categories of type, and many different categories for geography.

conventional    15012
organic         15009
Name: type, dtype: int64

Phoenix/Tucson          556
Northeast               556
Las Vegas               556
Sacramento              556
Tampa                   556
Spokane                 556
Southeast               556
New York                556
Raleigh/Greensboro      556
Syracuse                556
Plains                  556
California              556
Orlando                 556
Albany                  556
Boise                   556
Boston                  556
Houston                 556
West                    556
Portland                556
Harrisburg/Scranton     556
Cincinnati/Dayton       556
Miami/Ft. Lauderdale    556
Dallas/Ft. Worth        556
Hartford/Springfield    556
Great Lakes             556
Louisville              556
Philadelphia            556
Pittsburgh              556
Baltimore/Washington    556
Roanoke                 556
Jacksonville            556
Midsouth                556
Chicago                 556
San Francisco           556
South Central           556
San Diego               556
Detroit                 556
Grand Rapids            556
Nashville               556
Charlotte               556
Seattle                 556
Los Angeles             556
Northern New England    556
Indianapolis            556
Buffalo/Rochester       556
Total U.S.              556
Richmond/Norfolk        556
New Orleans/Mobile      556
Denver                  556
St. Louis               556
Atlanta                 556
South Carolina          556
Columbus                556
West Tex/New Mexico     553
Name: geography, dtype: int64

Since there are only two avocados types, we can plot their average_price time series on the same line chart. Let’s try creating such a figure when geography is ‘Los Angeles’.

Further Learning: If you are not familiar with plotly, please look at our tutorial, Plotly Python Tutorial: How to create interactive graphs.

This is a nice chart, but it’s only for one geography of ‘Los Angeles’.

How can we make it easy for users to explore this information from different geography?

If we have a dropdown with geography options, the users would be able to choose among them. Then according to the geography selected by the users, we can display the above line plot to them for that specific geography.

This is something we can do easily with Dash!

It’s time to use Dash.

Step #2: Setting up the Python environment

After exploring the dataset in Jupyter Notebook, we recommend using one of the Python editors to implement Dash apps. This is because when working on Dash apps, we want to focus on building and running the dashboards as a whole script. So it’s easier to test in Python editors such as PyCharm.

We’re using the PyCharm Editor – Community Edition. It’s free and has many useful features for writing Python code. However, if you still prefer Jupyter Notebook, you can try out the library jupyter-dash, which will not be covered in this tutorial.

It’s also necessary to use the pip install dash command in your terminal to install Dash before using it.

Step #3: Preparing to build the Dash app

We can head over to the Python editor such as PyCharm to start writing the Dash app.

The code snippets below need to be combined and run as a single Python script. We are breaking them down into pieces so that it’s easier to explain. You can either type them into your Python file or copy and paste the complete version, which will be provided in the last step of this tutorial.

First, we need to import the libraries. The necessary ones for our dashboard are:

• dash: the Dash library, which includes:
  • Dash: class Dash
  • html (Dash HTML Components module): for building the layout, which contains components for every HTML tag, such as the H1 heading
  • dcc (Dash Core Components module): for building the layout, which contains various higher-level components such as dropdown and graph
  • Input, Output: for defining callback functions
• pandas: loading and manipulating the data
• plotly.express: creating figures

Then we can load the dataset as a pandas DataFrame, which is the same as earlier. Please make sure you’ve saved this Python script and the dataset avocado-updated-2020.csv in the same directory to avoid setting the path in the read_csv function.

We’ll also create a Dash app object called app. This app is what we’ll be focusing on for the rest of the tutorial.

Step #4: Building the layout of the dashboard

The app-building process always starts from the layout. So first, we need to design the look of the dashboard.

The layout has the structure of a tree of components. And we use the keyword layout of the app to specify its layout. Then, using the two modules: html and dcc, we can display three components on our dashboard, from top to down:

• an H1 heading (html.H1) as the dashboard’s title. We specify its children property to be the text ‘Avocado Prices Dashboard’
• a dropdown menu (geo_dropdown, which is a dcc.Dropdown) based on the geography
  We’ve built it as a variable outside and then referenced it within the layout:
  – options: this property specifies the options of unique geographies the dropdown has
  – value: this property is the selected geography when we first launch the app. We made it as ‘New York’
• a graph (dcc.Graph) with id ‘price-graph’

Below is the code to set up the layout.

As you might have noticed, we are using an html.Div component to hold our three Dash components. The html.Div is a container component, which is always used when we have multiple Dash components in the layout. We put the other Dash components as a list inside its children property.

After setting up the dashboard’s look, it’s time to add a callback function to make it interactive.

Step #5: Adding interactivity to the dashboard

The callback functions are Python functions. They get automatically called by Dash whenever their inputs change. As a result, the functions run and update their outputs.

The two main sections of the callback function are:

• decorator, which starts with @app.callback
• function itself, which begins with def

Below is the code of our callback function to make the plotly figure dependent on the dropdown.

Within the decorator @app.callback, we specify the Output and the Input objects of the callback function. They are both the properties of Dash components.

In our example, the output is the figure property of the Dash component with id = ‘price-graph’, which is the dcc.Graph component set in the layout. While the input is the value property of the Dash component with the variable name geo_dropdown, which is the dcc.Dropdown component set in the layout. So you’ve seen two ways of specifying components in the callback function:

• pass the ID to component_id
• pass the variable name directly to component_id, in which case Dash autogenerates IDs for the component

After specifying them, we use them within the function below. Within the parenthesis after the def update_graph, we name the input as selected_geography. This corresponds to the Input(component_id=geo_dropdown, component_property='value'). Then within the body of the function, we ask the function to:

• generate a filtered dataset filtered_avocado based on selected_geography
• create a plotly line figure called line_fig based on this filtered dataset

The function returns this line_fig as the output, which corresponds to Output(component_id='price-graph', component_property='figure').

Here is an example. When the user selects ‘Los Angeles’ in the dropdown component, its value property will become ‘Los Angeles’, which means the input of the function selected_geography='Los Angeles'. This change will trigger the callback function, and update the output, as the line figure is only for Los Angeles.

That’s all the work needed for the callback function!

We are ready to run the dashboard.

Step #6: Running the dashboard

By default, the Dash app runs on our local computers. To complete the script, we need to add code to run the server. We can add these two lines of code after the callback function.

And that’s it!

As mentioned earlier, we need to run all the code as a whole script. So if you haven’t, you can copy the complete script below and save it into your Python editor:

So we can name this Python script avocado_example, and save it under the same directory as the dataset avocado-updated-2020.csv. Then we can go to the terminal to run it by typing in the command python avocado_example.py.

After running successfully, you should see the below messages in the terminal window.

Dash is running on http://127.0.0.1:8050/

 * Serving Flask app "avocado_example" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: on

Remember that Dash creates web applications? So this URL http://127.0.0.1:8050/ is the default address to access the app. You can go to it and see your first Python interactive dashboard opening in the browser!

This is what it should look like:

If you haven’t got the chance to run your app, look here. We have deployed this app on Heroku so that you can interact with it as a user. Try to select different geographies within the dropdown and see the updated graph.

In this tutorial, you’ve successfully created your first Python interactive dashboard with plotly Dash!

Again, to learn about how to:

• set up more Dash components such as range slider, radio items, datatable
• customize the look of the dashboards
• create a grid layout dashboard
• more dynamic interactive features

Please take our video-format course: Python Interactive Dashboards with Plotly Dash. You’ll also get an overview of HTML and CSS within the course to better understand Dash.

Leave a comment for any questions you may have or anything else.