0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Краткое руководство по Dash — Python веб-фреймворк для создания дэшбордов

Содержание

Краткое руководство по Dash — Python веб-фреймворк для создания дэшбордов. Installation + Dash Layout

Сегодня предлагаю погрузиться в один из удобнейших веб-фреймворков в связке c Python под названием Dash. Появился он не так давно, пару лет назад благодаря разработчикам фреймворка plotly. Сам Dash является связкой Flask, React.Js, HTML и CSS.

Выступление Криса Пармера на PLOTCON 2016

Давайте сразу установим фреймворк. Обновленные версии уточняйте тут.

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

Начнем.

Приложения Dash состоят из двух частей. Первая часть — «layout» описывает то, как выглядит наше приложение. Вторая часть описывает интерактивность приложения, о ней мы поговорим в следующей статье.

Dash предоставляет Python классы для всех визуальных компонентов приложения. Разработчики предоставляют набор компонентов в так называемых dash_core_components и dash_html_components . Но также вы можете построить свой компонент используя JavaScript и React.js.

Важно

В dash_core_components содержатся различные динамические формы такие как, например, выпадающие списки, графики и чек-боксы.

В dash_html_components содержатся html конструкции, которыми можно завернуть наши формы. Например Div блоки или теги заголовков H1, H2, и так далее. Разработчики предоставляют нам некую абстракцию от html с помощью словарей Python.

Чтобы начать разбираться, создадим файл app.py , в котором будет содержаться следующее:

И запустим его из текущей директории командой:
$ python app.py

. Running on http://127.0.0.1:8050/ (Press CTRL+C to quit)

Видим, что сервер запустился и готов принимать запросы на порт 8050 (у вас может быть другой порт).

Переходим по адресу http://127.0.0.1:8050/
и видим:

Примечание

На заметку

Dash содержит привычную веб разработчика фичу: hot-reloading . Она активируется в тот момент, когда запускается функция app.run_server(debug=True) . Эта фича обновляет ваш браузер всякий раз, когда вы делаете правки в коде и сохраняете результат. Таким образом нет нужды каждый раз перезапускать сервер.

Как мы помним, Dash содержит компонент для каждого тега HTML. Но также он может принимать все аргументы ключевых слов, как и элементы HTML.

Давайте немного изменим наш код:

Обновляем страницу, и видим:

В этом примере мы изменили стили html.Div и html.H1 с помощью свойства style .

html.H1(‘Hello Dash’, style=<'textAlign': 'center', 'color': '#7FDBFF'>) отрендерится в приложении Dash как:

Но есть несколько важных замечаний:

Многоразовые компоненты

Продолжая, представим, что нам нужны некоторые элементы, которые будут меняться, например в зависимости от входных данных пользователя нашего приложения. Для этого в Dash предусмотрены так называемые reusable components . Рассмотрим их на примере таблицы, данные для которой будут загружаться из Pandas dataframe.

Немного о таблицах

Давайте вспомним что из себя представляет таблица в HTML.

HTML таблица определяется тэгом table.

Каждая строка таблица определяется тэгом tr. Хедер таблица определяется тэгом th. A ячейки таблицы заполняются с помощью тэга td.

Получается такая структура:

И выглядит она так:

FirstnameLastnameAge
JillSmith50
EveJackson94
JohnDoe80

Компоненты ядра (Основные компоненты)

Как мы уже сказали ранее, dash_core_components включает в себя высокоуровнвые элементы. Такие, как: выпадающее меню, графики и прочее.

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

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

Давайте рассмотрим следующий код:

Тут мы видим, что мы создали как обычно один общий Div блок, в котором содержатся наши различные компоненты ядра. Выглядит это как-то так:

Остались вопросы?

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

Summary

Ранее нами изученый layout описывает то, как выглядит наше приложение. По сути он содержит древовидную иерархию HTML тэгов и высокоуровневых элементов ядра Dash, которые содержатся в dash_core_components .

В следующей части мы изучим то, как сделать нашу страничку интерактивной. Если вам понравился данный туториал, ставьте плюсик и подписывайтесь на меня.

* Здесь скоро будет ссылка на следующую часть *

Дашборд: что это и зачем нужно

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

Что такое дашборд?

Дашборд в буквальном переводе с английского (dashboard) — «приборная панель». Простейшие дашборды знакомы вам с детства: это будильник, градусник, приборная панель автомобиля. То есть изначально дашборд — просто прибор, который показывает какие-то данные.

Сейчас, в digital-отрасли, под дашбордом понимают инструмент, который не только визуализирует, но и анализирует любые данные. Если у вас много информации: показателей, результатов или цифр, которые нужно наглядно представить, объяснить и проанализировать, — то этот инструмент вам пригодится.

Пишет про управление в Skillbox. Работала координатором проектов в Русском музее, писала для блога агентства CRM-маркетинга Out of Cloud.

А тема может быть совсем любая? Я думал, это только для бизнеса.

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

А можно примеры использования дашбордов?

Конечно. Например, в интернет-маркетинге, PR-кампаниях и рекламе с их помощью отслеживают эффективность рекламных кампаний (дашборды используются в Google Analytics и Яндекс.Метрике). В менеджменте — контролируют нагрузку и планируют работу команды (дашборды есть в Jira и других таск-менеджерах). В HR-аналитике — анализируют информацию по зарплате сотрудников, KPI, а также данные по отпускам, стажировкам.

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

А что-то из обычной жизни?

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

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

В образовании преподаватели могут анализировать результаты экзаменов и следить за тем, какие лекции популярны у студентов. Студенты — посмотреть результаты своей учёбы, сравнить их с результатами других студентов, увидеть статистику по учебным курсам. Вот так выглядит фрагмент дашборда для студентов в Масариковом университете (Чехия).

Дашборды действительно можно использовать в любой теме. Вот несколько не совсем обычных примеров:

Очень похоже на инфографику. Это что, одно и то же?

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

А похожи они визуально, потому что при создании дашбордов часто используют инфографику. То есть инфографика может быть одним из элементов дашборда.

Чтобы создать дашборд, нужно быть аналитиком?

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

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

А какие есть программы, чтобы создать дашборд?

Программ много. Вот несколько популярных платформ: Tableau, Power BI и Qlik.

Чтобы выбрать подходящую, посмотрите подробный разбор их функций. Кроме того, есть программа от Google — Google Data Studio и специальное расширение в Google Analytics.

А как сделать дашборд? Есть какие-то правила?

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

Что можно почитать или посмотреть про создание дашбордов?

Всё, конечно, будет зависеть от ваших целей. Но вот общие материалы, с которых можно начать:

Онлайн-университет Skillbox

Получите новую профессию — или прокачайте имеющуюся!

Обучение через интернет, в удобном режиме. Рассрочка платежа и помощь в трудоустройстве.

Сила Тире

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

Допустим, вы хотите купить яйца.

Декларативное программированиескажет «Найди и купи яйца для меня. Вот деньги »

Тем не мение,Традиционное программированиескажет: «Идите в супермаркет Courts, перейдите к проходу 6, чтобы найти яйца в правом углу, зайдите в кассу и заплатите наличными 5 долларов».

Очевидно, из этого примера декларативное программирование разгрузит«как», Точно так же с деньгами и яйцами, вам нужно только передать входные данные и выходные свойства, тогда результаты визуализации будут отображаться автоматически.

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

На самом деле это совсем не чуждо. Многие языки также построены с одинаковыми концепциями. Одним из примеров декларативного языка являетсяSQL (язык структурированных запросов)а такжеКубернетес Ямл, Оба являются важными инструментами для ученых данных для оптимизации их поиска данных и процесса разработки.

Надеюсь, я вас взволновал !!Давайте начнем

). Все компоненты HTML находятся в модуле dash_html_components ;
  • Запускается приложение через run_server. Мы установили debug=True , чтобы иметь возможность отладить код. В случае если приложение готово для работы на сервере, то, в целях безопасности, флаг следует поставить в значение False.
  • Добавляем график

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

    Веб-страница Dash

    Добавляем данные

    Выше мы составили очень простой линейный график, но в Data Science проектах часто приходится сталкиваться с данными, которые требуют разные виды диаграмм. Сымитируем данные с помощью Python-библиотеки Pandas, а затем построим столбчатую диаграмму с помощью Plotly. Чтобы построить столбчатую диаграмму, воспользуемся функцией bar из модуля plotly.express :

    Отображение остаётся все тем же: в тэге

    Веб-страница Dash со столбчатой диаграммой

    Обратные вызовы (callbacks)

    Главной особенностью Dash являются обратные вызовы (callbacks). В примере выше данные остаются неизменными, но в Data Science данные могут быть самыми разнообразными: показатели могут меняются в зависимости от атрибутов или данные могут обновляться с каждым днем и т.д. С таким видом данных в Dash можно работать, используя лишь специальный декоратор @app.callback , где app — название переменной приложения (во всех примерах выше мы называли её app ).
    Возьмем для примера датасет от Plotly, который содержит данные об ожидаемой продолжительности жизни в странах в разные периоды. А на веб-странице отобразим график и слайдер. Слайдер будет находиться в пределах минимального и максимального года, и в зависимости от текущего года на слайдере будет меняться соответственно график. Начальное значение слайдера определяется минимальным годом. У графика и слайдера будут уникальные идентификаторы (id), которые пригодятся в дальнейшем. Python-код выглядит следующим образом:

    Теперь создадим функцию, внутри которой будем определять форму графика (scatter). Эта функция будет соответственно задекорирована:

    Отметим основные положения:

    • Декоратор имеет Output (выход), Input (вход) из модуля dash.dependencies . Input принимает входной id и его значение, в нашем случае это id слайдера ( year-slider ), а значение — это год. Ouput принимает выходной id и его значение, в нашем случае это id графика ( my-graph ), а значение — сам график;
    • Декорируемая функция может иметь любое название и должна принимать столько аргументов, сколько значений в Input указано. В нашем случае Input имеет входное значение — выбранный на слайдере год;
    • Внутри декорируемой функции выбираются данные с выбранным годом на слайдере и строится график (scatter);
    • Декорируемая функция должна возвращать значение Output , как уже было сказано, это сам график.

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

    Веб-страница Dash с callback

    Подобное использование декоратора, когда в ответ на изменение значения Input изменяется значения Output, называется Реактивным программированием. Его можно сравнить с созданием таблиц в MS Excel — когда значение одной ячейки изменяется, то вслед за ней обновляются зависимые ячейки. Реактивное программирование используется при создании пользовательских интрефейсов. Но имеет ограничение в виде значительной траты вычислительных ресурсов, поскольку нужно всегда следить за состоянием приложения.

    В следующей статье поговорим о том, как в Dash работать со множеством Input и Output. А ещё больше подробностей о визуализации данных в Plotly и Dash для решения реальных задач Data Science, вы узнаете на специализированном курсе «VIP: Визуализация данных на языке Python» в лицензированном учебном центре обучения и повышения квалификации IT-специалистов в Москве.

    Ссылка на основную публикацию
    Статьи c упоминанием слов:

    Adblock
    detector