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

Dash app

Dash comes with 200+ offline documentation sets. You can choose which documentation sets to download and Dash will take care of the rest, making sure they are kept up to date. You can also generate your own docsets, request docsets or download docsets from third-party sources.

Listed below are all the various documentation sets Dash comes with. The most popular ones are highlighted. All documentation sets have been generated and are maintained with the utmost care.

  • iOS
  • macOS
  • watchOS
  • tvOS
  • Swift
  • Man Pages
  • .NET Framework
  • ActionScript
  • Akka
  • Android
  • Angular
  • Ansible
  • Apache
  • Appcelerator Titanium
  • AppleScript
  • Arduino
  • Backbone
  • Bash
  • Boost
  • Bootstrap
  • Bourbon
  • Bourbon Neat
  • C
  • C++
  • CakePHP
  • Cappuccino
  • Chai
  • Chef
  • Clojure
  • CMake
  • Cocos2D
  • Cocos2D-X
  • CodeIgniter
  • CoffeeScript
  • ColdFusion
  • Common Lisp
  • Compass
  • Cordova
  • Corona
  • CouchDB
  • Craft
  • CSS
  • D3.js
  • Dart
  • Django
  • Docker
  • Doctrine ORM
  • Dojo Toolkit
  • Drupal
  • Elasticsearch
  • Elixir
  • Emacs Lisp
  • Ember.js
  • Emmet.io
  • Erlang
  • Express.js
  • ExpressionEngine
  • ExtJS
  • Flask
  • Font Awesome
  • Foundation
  • GLib
  • Go
  • Gradle
  • Grails
  • Groovy
  • Grunt
  • Gulp
  • Haml
  • Handlebars
  • Haskell
  • HTML
  • Ionic
  • Jasmine
  • Java SE
  • Java EE
  • JavaScript
  • Jekyll
  • Jinja
  • Joomla
  • jQuery
  • jQuery Mobile
  • jQuery UI
  • Julia
  • Knockout.js
  • Kobold2D
  • Laravel
  • LaTeX
  • Less
  • lodash
  • Lua
  • Marionette.js
  • Matplotlib
  • Meteor
  • Mocha
  • MomentJS
  • MongoDB
  • Mongoose
  • Mono
  • MooTools
  • MySQL
  • Nginx
  • Node.js
  • NumPy
  • OCaml
  • OpenCV
  • OpenGL
  • Pandas
  • Perl
  • Phalcon
  • PhoneGap
  • PHP
  • PHPUnit
  • Play Framework
  • Polymer.dart
  • PostgreSQL
  • Processing.org
  • Prototype
  • Pug
  • Puppet
  • Python
  • Qt
  • R
  • Racket
  • React
  • Redis
  • RequireJS
  • Ruby
  • Ruby on Rails
  • Rust
  • Sails.js
  • Sass
  • SaltStack
  • Scala
  • SciPy
  • Semantic UI
  • Sencha Touch
  • Sinon
  • Smarty
  • Sparrow
  • Spring Framework
  • SproutCore
  • SQLAlchemy
  • SQLite
  • Statamic
  • Stylus
  • Susy
  • SVG
  • Symfony
  • Tcl
  • Tornado
  • Twig
  • Twisted
  • TypeScript
  • TYPO3
  • Underscore.js
  • Unity 3D
  • Vagrant
  • Vim
  • VMware vSphere
  • Vue.js
  • WordPress
  • Xamarin
  • Xojo
  • XSLT
  • Yii
  • YUI
  • Zend Framework
  • Zepto.js

). Все компоненты 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-специалистов в Москве.

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

    1) Графики и интерактивные таблицы

    1.1) Цветовое форматирование области диаграммы

    Для графического представления метрики во времени могут потребоваться указания на самом графике, представляющие некоторое разделение метрики в определенных временных диапазонах (или любую другую метрику на оси x). Это визуальное обозначение возможно благодаря тому, что указанный график может отображать различные цвета в области диаграммы для определенных временных диапазонов по оси X. Dash учитывает такую ​​функциональность, изменяя часть макета построенного графика. Реализовать это можно с использованием библиотеки graph_objs от plotly.

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

    Переменные оси X, оси Y и обозначения диапазонов сезонов на оси X определены следующим образом:

    Для отображения изменяющегося цвета области диаграммы модифицируем раздел макета графика:

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

    1.2) Выборочно видимые веб-элементы

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

    Это настраивается с помощью использования следующих двух элементов:

    1. html.Details([ … ]): внутри скобок помещаются функции панели индикаторов, которые пользователь предпочел скрыть и отображение которых регулируется с помощью тумблера. Расположение этого элемента будет ориентировано на app.layout пользователя.
    2. html.Summary([String]): с использованием элемента summary после элемента Details над тумблером в приложении выводится оповещение (сообщение вида String ). Это повышает читабельность вашего приложения и помогает определить тумблер (если их несколько в приложении).

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

    Для этого используем следующий код:

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

    1.3) Загрузка содержимого таблицы в файл

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

    Эта функциональность может быть реализована путем развертывания на панели индикаторов триггера, который вызывает загрузку файла, и назначения этого элемента триггера с определенной гиперссылкой. Для демонстрации мы будем использовать элемент button. Кроме того, бэкенд-код будет иметь функцию, которая вызывается, когда сервер направляется на эту гиперссылку (при нажатии кнопки), и выполнять функцию send_file с данными для загрузки, передаваемыми в качестве параметра. Это предопределенная функция в библиотеке Flask, которая отправляет содержимое файла клиенту, который в нашем случае является лицом, использующим веб-приложение Dash.

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

    Summary

    • First know and understand your requirements for dashboard.
    • Start app with simple layout and callbacks.
    • Add dash components and callbacks one by one.
    • Refresh app page on local host after addition or deletion to see changes.
    • Write separate codes for app, index, data, users etc to make it easy to debug and understand.
    • Experiment with different style and app layout for better appearance.
    • Share data between callbacks and use multiple outputs callbacks.
    • Test app on your local before deployment.
    • Deploy a simple app first and then scale.

    Let me know how your first experience with Dash.

    You can find this app on Github.

    Thank you for reading!

    I am always available to answer your queries, please reach out to me on LinkedIn or Twitter.

    If you want to add Google Analytics tracking, favicon, custom CSS file etc to your Dash App, read part 3.

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