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

The dash app

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

    How to Integrate Dash with Your Existing App

    Do you have an existing non-dash app and you want to integrate a dashboard within it?

    Disclaimer: If you ask me, this isn’t the best idea. Can’t you keep your website clean and simple? One page for one intent. Do you really have to integrate a full-fledged Dash application within this particular web app? Before you answer: yes!, please consider the following: you can always embed interactive graphs with JavaScript.

    For instance, a great alternative would be CanvaJS. I’m not affiliated with those guys but they created a great framework that can be used on any website. Heck, you could even use Plotly graphs on your website to visualize data. (These are the creators of Dash.)

    The reason why I don’t advocate to use dash in your existing (HTML/CSS/JS) application is that it’s tedious, error prone, and it slows down your website.

    I’ll give you three ways—ordered by difficulty:

    1 – Place Links Intelligently

    Believe it or not, I came up with this genius strategy all by myself. Instead of integrating your app with Dash, you just link to your separate (independent) Dash app so that it appears like the two websites (your original and the Dash app) are working together and are tightly integrated. However, they’re running independently and you can avoid all the struggles and keep living the simple life.

    2 – Use iFrames

    On the official Dash site to this issue, they recommend to use an >. An iFrame is an HTML element that allows you to embed any website Y on website X. It’s like a window into the other website. On page X, you can define the size of the window and the environment around the window. But you can control little more.

    While this may work theoretically, it often slows down websites and causes security issues. Some web browsers block the use of iFrames altogether. So, it may happen that users don’t even see your great Dash application!

    Do you still want to try it with iFrames? Okay, so go for it:

    • Include an element in your HTML site.
    • Point the src attribute towards the address of your Dash app.
    • Place your Dash app iFrame within your website defining your desired dimensions:

    Here’s how such an embedded iFrame Dash app looks on the Finxter website:

    It doesn’t look pretty, does it?

    Using an Existing Flask App

    Yes, all the programmers out there are salivating. It’s just beautiful to natively integrate two apps, isn’t it? Well, if you think so. I think, it’s a big mess and you’ll curse yourself for doing it. However, if you must do it, here’s how you can do it (based on this resource and the docs):

    Access the Flask app via app.server and assign it to a variable (e.g., server ).

    As an alternative, pass your Flask app instance into Dash when instantiating the app in the dash.Dash(. ) initialization routine.

    What did you accomplish? The server variable now holds the Flask instance. This allows you to add any route and custom functionality like this:

    You can see such an example in the code given here:

    But the authors of the code share the same disclaimer: it sucks! You lose a lot of integrated Flask functionality when working from inside Dash like this.

    Maybe go back to method 1? A better way is to use Dash from inside Flask—instead of using Flask from inside Dash. You can see how this works here (scroll down to the heading “Combining One or More Dash Apps with Existing WSGI Apps”).

    While working as a researcher in distributed systems, Dr. Christian Mayer found his love for teaching computer science students.

    To help students reach higher levels of Python success, he founded the programming education website Finxter.com. He’s author of the popular programming book Python One-Liners (NoStarch 2020), coauthor of the Coffee Break Python series of self-published books, computer science enthusiast, freelancer, and owner of one of the top 10 largest Python blogs worldwide.

    His passions are writing, reading, and coding. But his greatest passion is to serve aspiring coders through Finxter and help them to boost their skills. You can join his free email academy here.

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