Dash представляет собой фреймворк для визуализации данных и построения веб-приложений, понятен и довольно прост в применении. Может быть интересен тем, кто хочет использовать интерактивные графики для анализа данных с помощью Python. Рассмотрим построение таких графиков с применением обратных вызовов в Dash.
![](https://habrastorage.org/getpro/habr/upload_files/738/e60/b0b/738e60b0b513925925bf40c190f6642a.png)
Фреймворк Dash позволяет создавать веб-приложения с визуализацией различной информации, в частности – графиков. Несомненно, такая функция фреймворка очень полезна для специалиста по анализу данных.
Dash в основном использует «под капотом» Plotly.js (построение диаграмм), Flask (веб-сервер) и React (веб-интерфейс). Вам не нужно разбираться в этих технологиях, чтобы успешно применять Dash в своей работе, достаточно просто иметь базовые знания в Python и представлять, какие графики вы хотите видеть на своем дэшборде.
Интерактивность графических элементов – это способность таких элементов реагировать на действия пользователя (изменяться и перестраиваться в зависимости от выбранных параметров). В Dash данная ответная реакция возможна за счет обратных вызовов (callback). Такие графики динамичны, способны эффективно и наглядно отобразить самую разную информацию об исследуемых данных.
Подробнее про Dash и его функционал советую читать в документации.
Приведу пример создания простого веб-приложения с использованием интерактивных графических элементов фреймворка Dash.
Всю предобработку данных я буду проводить в Jupyter Notebook, а код для дэшборда писать в Visual Studio Code.
Для работы будем использовать датасет с соревнования kaggle: Video Game Sales with Ratings. В нем приведена информация по продажам видео игр с их рейтингами и оценками.
Поставим себе следующую задачу: пусть мы хотим отобразить на дэшборде график зависимости оценок игр от их жанров и гистограмму рейтингов игр по годам, начиная с 2000 года. Наши интерактивные графики должны реагировать на изменение фильтров по жанрам, рейтингам и годам. Для проверки будем выводить еще и интерактивный текст – результат фильтрации (сколько игр соответствует выбранным фильтрам).
Предварительно обработаем данные – оставим только интересующие нас параметры, удалим записи с пропусками и т.п. Код размещен в репозитории на github
Исходные данные
![](https://habrastorage.org/getpro/habr/upload_files/a41/50c/1a3/a4150c1a33a9af8a05950d78b0bb479e.png)
Итак, начало кода стандартно для работы с Dash: импортируем необходимые модули, загружаем обработанные данные и инициализируем Dash
![](https://habrastorage.org/getpro/habr/upload_files/2df/04e/8cf/2df04e8cf413b54ef1f037a59c570e1d.png)
Создадим переменные со всеми жанрами и рейтингами для дальнейшего создания фильтров
![](https://habrastorage.org/getpro/habr/upload_files/bb0/651/257/bb06512571c2813d321ceb4d789c9d79.png)
Начнем определение внешнего вида нашего приложения. Для этого будем использовать атрибут layout нашего класса Dash. Прописываем в нем древовидную структуру Html-элементов – родительский html.Div и дочерние элементы заголовка (html.H1) и абзаца (html.P). Также зададим элементарный стиль – цвет и положение фона, на котором будет отображаться заданный текст. Далее увидим, что удобно задавать общий стиль для элементов, оборачивая их в один html.Div
![](https://habrastorage.org/getpro/habr/upload_files/8cf/681/95d/8cf68195deed1e0f99aa4c5e670bb8ca.png)
Посмотрим, что у нас получилось. Для того, чтобы веб-приложение открывалось, необходимо вызвать в коде его запуск
![](https://habrastorage.org/getpro/habr/upload_files/de0/ac3/568/de0ac356872d2ca8239ef0607b55a05a.png)
Запустим само приложение. Результат:
![](https://habrastorage.org/getpro/habr/upload_files/f6c/245/804/f6c2458042ed26bdf5203c090b469e6f.png)
Теперь добавим в layout фильтры с множественным выбором и заготовку для интерактивного текста. В стиле укажем желаемое положение элементов на веб-странице и цвет фона
![](https://habrastorage.org/getpro/habr/upload_files/ef2/ed0/1ff/ef2ed01ff05cc9530794dba0f37451b4.png)
Замечу, что html.Label – подпись к элементу интерфейса, a dcc.Dropdown – выпадающий список.
При запуске видим фильтры жанров и рейтингов, интерактивный текст отобразим позже
![](https://habrastorage.org/getpro/habr/upload_files/351/00b/7d2/35100b7d2dbb24aab499f313e638de78.png)
Наконец, добавим заготовку для графиков и фильтр по годам (в виде слайдера). График зависимости оценок игр от их жанров зададим как диаграмму рассеяния
![](https://habrastorage.org/getpro/habr/upload_files/9e7/bcd/87b/9e7bcd87b2ae19b0daed15baf52cdbea.png)
Результат – фильтр по годам и заготовка для графиков
![](https://habrastorage.org/getpro/habr/upload_files/04a/956/50b/04a95650b83270db370926d7381f394f.png)
Пришло время добавить в дэшборд немного динамики. Начнем с создания декоратора (app.callback) для результата фильтрации
![](https://habrastorage.org/getpro/habr/upload_files/5cf/767/962/5cf76796294d61d9bfd25a5fdb95ca25.png)
С изменением входных данных Input (значения фильтров) будут изменяться и выходные данные Output (область текста). Количественный результат фильтрации сохранится в переменной games_count, которую и вернет Output.
Фильтры по умолчанию, результат фильтрации – 712 игр
![](https://habrastorage.org/getpro/habr/upload_files/278/932/2e1/2789322e1c58aba9467677221566dad7.png)
Добавим жанр Misc, результат фильтрации изменит значение на 895
![](https://habrastorage.org/getpro/habr/upload_files/f53/44b/9df/f5344b9dfca437d480b4bf5ecc35f3f7.png)
Теперь немного сложнее, создадим декоратор для гистограммы рейтингов игр по годам
![](https://habrastorage.org/getpro/habr/upload_files/684/f0d/02c/684f0d02c410a350832fe818606db374.png)
Теперь Output будет возвращать график, который создается в функции update_stacked_area (переменная figure).
Фильтры по умолчанию
![](https://habrastorage.org/getpro/habr/upload_files/edf/dc1/fc3/edfdc1fc3dd2dcbc5798fcfcd808c8b0.png)
Добавим жанров и рейтингов, зададим год релиза – до 2003. График автоматически перестраивается
![](https://habrastorage.org/getpro/habr/upload_files/8a3/b52/18a/8a3b5218a575a6fd8255a8b568f0b0da.png)
По аналогии напишем код для графика зависимости оценок игр от их жанров – будем использовать scatter plot (диаграмму рассеяния). По оси x будет оценка пользователей, по y – оценка критиков
![](https://habrastorage.org/getpro/habr/upload_files/f91/753/926/f9175392632243d23512d9511639bdfe.png)
Посмотрим на итоговый результат работы интерактивного дэшборда. Фильтры по умолчанию
![](https://habrastorage.org/getpro/habr/upload_files/b70/d27/647/b70d276479c113c73a1d38b2098eabde.png)
Добавим жанров и рейтингов, зададим год релиза – до 2014. Интерактивный текст и графики изменятся в соответствии с заданными фильтрами
![](https://habrastorage.org/getpro/habr/upload_files/7a8/926/a90/7a8926a9055a9cf5424c398716dcbe93.png)
Полный код размещен в репозитории на github.
Описанный пример обзорно позволяет погрузиться в создание и работу интерактивных графиков в Dash. Это отличный инструмент для специалистов по обработке и анализу данных, который позволяет качественно и быстро визуализировать желаемую информацию.
Попробуйте создать свои собственные интерактивные графики в Dash!
ximik666
А что скажете про streamlit? Как замена Dash?
conopus
Так он же базируется на Dash?