Меню

Dash dodge как настроить

📊 Туториал: визуализация данных в вебе с помощью Python и Dash

Данная публикация является незначительно сокращенным переводом статьи Дилана Кастильо Develop Data Visualization Interfaces in Python With Dash.

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

В этом руководстве мы рассмотрим:

  • Как создать приложение Dash
  • Основные компоненты библиотеки
  • Как настроить стиль приложения
  • Как сделать приложение интерактивным
  • Как развернуть приложение на удаленном сервере (на примере Heroku)

Что такое Dash?

Dash ― это платформа с открытым исходным кодом для создания интерфейсов визуализации данных. После выпуска в 2017 году в виде библиотеки Python Dash вскоре был расширен для R и Julia.

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

В основе Dash лежат три технологии:

  1. Flask предоставляет функциональность веб-сервера.
  2. React отображает веб-интерфейс.
  3. Plotly.js генерирует диаграммы.

Не нужно беспокоиться о совместной работе этих технологий. Необходимо лишь написать код на Python, R или Julia и добавить немного CSS.

Если вы привыкли анализировать данные с помощью Python, Dash станет полезным дополнением вашего набора инструментов. Вот несколько практических примеров возможностей библиотеки:

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

Другие интересные варианты использования вы найдете в галерее приложений Dash.

Начинаем работу с Dash на Python

В качестве примера в этом руководстве мы шаг за шагом создадим информационную панель для набора данных Kaggle о продажах и ценах на авокадо в США за период с 2015 по 2018 год.

Настройка виртуального окружения

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

Windows. Откройте командную строку и выполните следующие команды:

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

macOS или Linux. Смысл следующих команд терминала идентичен командам для Windows:

Далее необходимо установить в виртуальное окружение следующие библиотеки:

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

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

Сохраните файл с данными avocado.csv в корневом каталоге проекта. К настоящему моменту у вас должна быть виртуальная среда с необходимыми библиотеками и данными в корневой папке проекта. Структура проекта выглядит так:

Как с помощью Dash создать приложение

Разобьем процесс создания приложения Dash на два этапа:

  1. Инициализируем приложение и определим внешний вид с помощью макета приложения ( layout ).
  2. Определим посредством обратных вызовов ( callbacks ), какие части приложения являются интерактивными и на что они реагируют.

Инициализируем Dash-приложение

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

Вот несколько первых строк app.py :

Вначале мы импортируем необходимые библиотеки:

  • dash поможет инициализировать приложение
  • dash_core_components позволяет создавать интерактивные компоненты: графики, раскрывающиеся списки, диапазоны дат и т. д.
  • dash_html_components позволяет получить доступ к тегам HTML
  • pandas помогает читать и выводить данные в организованной форме

Далее мы считываем данные и обрабатываем их для использования в панели управления. В последней строке мы создаем экземпляр класса Dash.

Если вы уже использовали Flask, то инициализация класса Dash вам уже знакома. Во Flask мы обычно инициализируем WSGI-приложение с помощью Flask(__name__) . Для приложений Dash мы используем Dash(__name__) .

Определение макета приложения Dash

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

Этот код определяет свойство layout объекта app . Внешний вид приложения описывается с помощью древовидной структуры, состоящей из Dash-компонентов.

Мы начинаем с определения родительского компонента html.Div , затем в качестве дочерних элементов добавляем заголовок html.H1 и абзац html.P . Эти компоненты эквивалентны HTML-тегам div , h1 и p . Для изменения атрибутов или содержимого тегов используются аргументы компонентов. Например, чтобы указать, что находится внутри тега div , мы используем в html.Div аргумент children .

В компонентах есть и другие аргументы, такие как style , className или id , которые относятся к атрибутам HTML-тегов. В следующем разделе мы увидим, как использовать эти свойства для стилизации панели инструментов.

Таким образом, Python-код будет преобразован в следующий HTML-код:

Далее описаны два компонента dcc.Graph . Первая диаграмма отображает средние цены на авокадо за период исследования, а вторая ― количество авокадо, проданных в США за тот же период.

Под капотом Dash использует для создания графиков Plotly.js. Компоненты dcc.Graph ожидают figure object или словарь Python, содержащий данные графика и layout , что мы и передаем в нашем случае.

Остались две строки кода, которые помогут запустить приложение:

Эти строки позволяют запускать приложение Dash локально, используя встроенный сервер Flask. Параметр debug = True из app.run_server разрешает горячую перезагрузку: когда мы вносим изменения в приложение, оно автоматически перезагружается без перезапуска сервера.

Читайте также:  Как настроить роутер keenetic 4g n 300

Наконец, полная версия app.py . Вы можете скопировать код в пустой app.py и проверить результат.

Пришло время запустить приложение. Откройте терминал в корневом каталоге проекта и в виртуальной среде проекта. Запустите python app.py , затем перейдите по адресу http://localhost:8050 .

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

Теперь у нас есть рабочая версия, но мы ее еще улучшим.

Управление оформлением панели

Dash очень гибок в настройке внешнего вида приложения. Мы можем использовать собственные файлы CSS или JavaScript, встраивать изображения и настраивать дополнительные параметры.

Как применить стиль к компонентам Dash

Стилизовать компоненты можно двумя способами:

  • Использовать аргумент style отдельных компонентов.
  • Предоставить внешний CSS-файл.

Аргумент style принимает словарь Python с парами ключ-значение, состоящими из имен свойств CSS и значений, которые мы хотим установить.

Захотев изменить размер и цвет элемента H1 в app.py , мы можем установить аргумент style следующим образом:

В этом случае заголовок будет оформлен красным шрифтом размером в 48 пикселей.

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

Если вы хотите включить собственные локальные CSS- или JavaScript-файлы, необходимо создать в корневом каталоге проекта папку с именем assets/ и сохранить в ней необходимые файлы.

Затем вы можете использовать аргументы className или id компонентов, чтобы настроить с помощью CSS их стили. При преобразовании в HTML-теги эти аргументы соответствуют атрибутам class и id .

Захотев настроить размер шрифта и цвет текста элемента H1 в app.py , мы можем использовать аргумент className :

Установка аргумента className определяет атрибут класса для элемента H1 . Затем в CSS-файле style.css в папке assets/ мы указываем, как хотим, чтобы он выглядел:

Как улучшить внешний вид панели инструментов

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

  • Добавим иконку сайта ( favicon ) и title.
  • Изменим семейство шрифтов.
  • Используем внешний CSS-файл для стилизации компонентов Dash.

Добавление в приложение внешних ресурсов

Создадим папку assets/ в корневом каталоге проекта. Сохраним в ней значок favicon.ico и файл style.css .

К настоящему моменту структура проекта должна выглядеть так:

app.py требует нескольких изменений. Необходимо включить внешнюю таблицу стилей, добавить заголовок на панель инструментов и стилизовать компоненты с помощью файла style.css :

Здесь мы указываем CSS-файл и семейство шрифтов, которое хотим загрузить в приложение. Внешние файлы загружаются до загрузки тела приложения. Аргумент external_stylesheets используется для добавления внешних CSS-файлов, а external_scripts ― для внешних файлов JavaScript, таких как скрипт Google Analytics.

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

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

Класс header-description , назначенный компоненту абзаца, имеет соответствующий селектор в style.css :

Другое существенное изменение ― графики. Новый код для графика цены:

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

Так же мы настроили ось, цвет рисунка, формат заголовка в разделе макета графика. Еще мы обернули график в html.Div с классом card . Это придаст графику белый фон и добавит небольшую тень под ним. Аналогичные изменения внесены в графики продаж и объемов. Вот полный код обновленного app.py :

Панель обновленной версии app.py выглядит так:

Добавляем в Dash-приложение интерактивные элементы

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

Давайте сделаем панель управления интерактивной. Новая версия позволит пользователю взаимодействовать со следующими фильтрами:

  • Регион производства.
  • Тип авокадо.
  • Диапазон дат.

Начнем с замены локального app.py на новую версию.

Затем необходимо обновить style.css следующим кодом.

Как создавать интерактивные компоненты

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

Вот как это выглядит в app.py :

Раскрывающиеся списки и селектор диапазона дат служат в качестве меню для взаимодействия с данными:

Первый компонент в меню ― это раскрывающийся список Region. Код компонента:

Вот что означает каждый из параметров:

  • id ― идентификатор элемента.
  • options ― параметры, отображаемые при выборе раскрывающегося списка. Ожидает словарь с метками и значениями.
  • value ― значение по умолчанию при загрузке страницы.
  • clearable ― позволяет пользователю оставить поле пустым, если установлено значение True .
  • className ― селектор классов, используемый для применения стилей

Селекторы Type и Data Range имеют ту же структуру, что и раскрывающееся меню Region.

Теперь взглянем на компоненты dcc.Graphs :

По сравнению с предыдущей версией панели инструментов в компонентах отсутствует аргумент figure . Это связано с тем, что аргумент figure теперь будет генерироваться функцией обратного вызова с использованием входных данных, которые пользователь устанавливает с помощью селекторов Region, Type и Data Range.

Читайте также:  Как настроить зазоры дроссельных заслонок

Как определить обратные вызовы

Мы определили, как пользователь будет взаимодействовать с приложением. Теперь нужно заставить приложение реагировать на действия пользователя. Для этого мы воспользуемся функциями обратного вызова ( callbacks ).

Функции обратного вызова Dash ― это обычные функции Python с декоратором app.callback . При изменении ввода запускается функция обратного вызова, выполняет заранее определенные операции (например, фильтрация набора данных), и возвращает результат в приложение. По сути, обратные вызовы связывают в приложении входные и выходные данные.

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

Сначала мы определяем выходные данные с помощью объектов Output . Эти объекты принимают два аргумента:

  • Идентификатор элемента, который они изменят при выполнении функции.
  • Свойство изменяемого элемента Например, Output(«price-chart», «figure») обновит свойство figure элемента «price-chart» .

Затем мы определяем входы с помощью объектов Input , они также принимают два аргумента:

  • Идентификатор элемента, за изменениями которого они будут следить.
  • Свойство наблюдаемого элемента, которое они должны принимать, когда происходит изменение.

То есть Input(«region-filter», «value») будет следить за изменениями элемента «region-filter» и примет его свойство value , если элемент изменится.

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

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

Разворачиваем Dash-приложение на Heroku

Мы закончили сборку приложения. У нас есть красивая, полностью интерактивная панель инструментов. Теперь мы узнаем, как ее развернуть.

Фактически приложения Dash ― то же, что приложения Flask, поэтому они имеют те же возможности для развертывания. В этом разделе мы развернем приложение на хостинге Heroku (с бесплатным тарифным планом).

Прежде чем начать, убедитесь, что вы установили интерфейс командной строки Heroku (CLI) и Git. Чтобы убедиться, что обе программы присутствуют в системе, выполните в терминале команды проверки версий:

Далее нам нужно внести небольшое изменение в app.py . После инициализации приложения добавим переменную с именем server :

Это дополнение необходимо для запуска приложения с использованием WSGI-сервера. Встроенный сервер Flask не рекомендуется использовать в производственной среде, поскольку он не может обрабатывать большой объем трафика.

В корневом каталоге проекта создадим файл с именем runtime.txt , в котором укажем версию Python для приложения Heroku:

При развертывании Heroku автоматически определит, что это приложение Python, и будет использовать соответствующий пакет сборки. Если вы также предоставите файл runtime.txt , сервер определит версию Python, которую будет использовать приложение.

Затем в корневом каталоге проекта создадим файл requirements.txt , где перечислим библиотеки, необходимые для установки Dash-приложения на веб-сервере:

В файле requirements.txt есть пакет, о котором мы раньше не упоминали: gunicorn . Gunicorn ― это HTTP-сервер WSGI, который часто используется для развертывания приложений Flask в производственной среде.

Теперь создадим файл с именем Procfile со следующим содержимым:

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

Затем нужно инициализировать репозиторий Git. Для этого перейдем в корневой каталог проекта и выполним следующую команду:

Эта команда инициирует создание репозитория Git для avocado_analytics/ . То есть Git будет отслеживать изменения, которые мы вносим в файлы в этом каталоге.

Однако есть файлы, которые не стоит отслеживать с помощью Git. Например, обычно мы не хотим отслеживать содержимое каталога виртуальной среды, файлов с байт-кодом и файлов метаданных, таких как .DS_Store .

Создадим в корневом каталоге файл с именем .gitignore и следующим содержимым:

Это гарантирует, что репозиторий не отслеживает ненужные файлы. Теперь зафиксируем состояние проекта:

Перед последним шагом убедитесь, что всё на месте. Структура проекта должна выглядеть так:

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

Вот и всё. Мы создали и развернули панель управления данными. Чтобы получить доступ к приложению, достаточно скопировать ссылку https://APP-NAME.herokuapp.com/ и замените APP-NAME на имя, которое вы определили на предыдущем шаге.

Если вам интересно сравнить получившийся результат, взгляните на образец приложения.

Заключение

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

Источник



Dash: что за криптовалюта и какие у неё перспективы в 2021 году

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

Именно про эту криптовалюту и будет дальнейшее повествование, узнаете про Dash, его волатильность и перспективы на рынке.

История Dash

К популярности валюте Д э ш удалось прийти не сразу, даже сейчас это не самая популярная криптовалюта, на слуху больше Биткоин или Эфириум, но тем, кто работает с криптой, Dash известен, благодаря чему в настоящее время имеет солидное место в ТОП-50 по востребованности! Кстати, этому поспособствовали некоторые особенности данной крипты.

Читайте также:  Как настроить домашний телефон gigaset a120

Dash, также известная как Darcoin или XCoin, абсолютно децентрализована и у неё отсутствуют какие-либо регуляторы извне. Концепция DAO предполагает, что каждый член сообщества сможет участвовать в развитии проекта, и для поддержки функциональности не будет нужно больших ресурсов. Алгоритм добычи достаточно непростой и включает 11 х е ш -функций, но кому надо – разбирается.

Dash появилась в январе 2014 года как результат работы программистов Э. Даффилда и Диаса Даниэля. Идея же её создания сформировалась ещё в 2010 году, тогда Эван Даффилд впервые изучил технологию блокчейн. В последующие ближайшие годы он занимался улучшением анонимности существующих платёжных систем, но его предложения по улучшению биткоина упорно отвергались.

Тогда-то Даффилд и решил создать свою монету — XCoin. На первой проверке результат оказался очень хорошим, сеть безупречно функционировала и распределяла вознаграждения между добытчиками. Изначальные предположения и подсчёты, однако, были немного неверными — всего за 48 часов была сгенерирована целая треть от максимума монет.

Но создатели учли ошибки и перезапустили сеть, назвав монету уже Darkcoin. Удачность нового запуска оказалась ещё больше, популярность сети стала стабильно расти. Правда, был один немного неприятный побочный эффект — анонимность по достоинству оценили пользователи того же даркнета. Создатели же, не желая, чтобы их монета ассоциировалась с беззаконием, снова переименовали её. Так она и получила итоговое название Dash, под которым благополучно существует по сей день. Сейчас её рыночная капитализация превышает 2 миллиарда долларов США (данный на 19.03.2021) .

Важные особенности

Переводы в Dash значительно быстрее относительно того же Биткоина, т. к. система не проверяет отправителя и не собирает о нём данные. Именно это и было ключевой идеей Даффилда. Безопасность сети гарантируется специальным движком Darksend, гарантирующим анонимность и минимальное участие человека при платеже.

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

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

Добыча валюты устроена так, что оказывается профитной только для ASICs. Обладатели асиков получают 45% награды за каждый расшифрованный блок, столько же — мастер-узлы, а 10% отправляется в фонд развития платформы.

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

Перспективы Dash в 2021 году

Самая высокая стоимость у Dash была в декабре 2017 года, но потом криптовалюту ждал обвал.

На данный момент Дэш растёт, по прогнозам к концу 2021 года 1 Dash будет стоить более 300 $ США, так что есть вероятность получить определённую прибыль на разнице курсов.

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

Покупка, хранение и обмен

Монета Dash весьма востребована, т. е. без труда обменивается на другие деньги. В частности, сделки с ней совершаются на:

А главные пары с этой криптой — DSH/USD, DASH/BTC, BTC/DASH.

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

Выгодный курс обмена Dash на рубли встречаю на площадке 365 Cash , по крайней мере здесь не возникает долгих проволочек с обменом и выводом средств. Долгой была только первая выплата, а вот последующие происходили сравнительно быстро. И даже курс по отношению к USD там зачастую выгоднее, чем на других сервисах.

Также рекомендую попробовать обменник 7 Money , зачастую там лучший курс из всех возможных. И работает в автоматическом режиме, что означает, что ваши переводы будут идти значительно быстрее, а не придётся ожидать, пока оператор на обменнике вручную проверит ваш перевод и подтвердит отправку.

Х ранить данную крипту можете на официальном кошельке, и среди сторонних разработчиков. Полный список возможных кошельков можно глянуть, скажем, здесь: https://www.dash.org/ru/downloads/. Если суммы велики, то лучше воспользоваться специальным аппаратным сейфом Ledger, Trezor либо KeepKey.

Если планируется менять её на обычные деньги через обменник, то нужно всегда заранее проверить конкретный сайт на Bestchange во избежание мошенничества (даже если уже сотрудничали с данным обменником, потому что в и нтернете всё быстро меняется). Зато с помощью надёжного обменника вы легко без проволочек получите средства на электронный кошелёк Киви, Яндекс, Вебмани, PayPal или на счёт в Тинькофф, ВТБ, Сбербанке.

Важно! Чтобы при обмене не было проблем, необходимо чётко выполнять инструкции оператора.

Заключение

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

Источник