Интерактивные графики: Интерактивные Графики

25.07.2023 alexxlab

Содержание

интерактивные графики в Dash / Хабр

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

Фреймворк 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

Исходные данные

Итак, начало кода стандартно для работы с Dash: импортируем необходимые модули, загружаем обработанные данные и инициализируем Dash

Создадим переменные со всеми жанрами и рейтингами для дальнейшего создания фильтров

Начнем определение внешнего вида нашего приложения. Для этого будем использовать атрибут layout нашего класса Dash. Прописываем в нем древовидную структуру Html-элементов – родительский html.Div и дочерние элементы заголовка (html.h2) и абзаца (html.P). Также зададим элементарный стиль – цвет и положение фона, на котором будет отображаться заданный текст. Далее увидим, что удобно задавать общий стиль для элементов, оборачивая их в один html.Div

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

Запустим само приложение. Результат:

Теперь добавим в layout фильтры с множественным выбором и заготовку для интерактивного текста. В стиле укажем желаемое положение элементов на веб-странице и цвет фона

Замечу, что html.Label – подпись к элементу интерфейса, a dcc.Dropdown – выпадающий список.

При запуске видим фильтры жанров и рейтингов, интерактивный текст отобразим позже

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

Результат – фильтр по годам и заготовка для графиков

Пришло время добавить в дэшборд немного динамики. Начнем с создания декоратора (app.callback) для результата фильтрации

С изменением входных данных Input (значения фильтров) будут изменяться и выходные данные Output (область текста). Количественный результат фильтрации сохранится в переменной games_count, которую и вернет Output.

Фильтры по умолчанию, результат фильтрации – 712 игр

Добавим жанр Misc, результат фильтрации изменит значение на 895

Теперь немного сложнее, создадим декоратор для гистограммы рейтингов игр по годам

Теперь Output будет возвращать график, который создается в функции update_stacked_area (переменная figure).

Фильтры по умолчанию

Добавим жанров и рейтингов, зададим год релиза – до 2003. График автоматически перестраивается

По аналогии напишем код для графика зависимости оценок игр от их жанров – будем использовать scatter plot (диаграмму рассеяния). По оси x будет оценка пользователей, по y – оценка критиков

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

Добавим жанров и рейтингов, зададим год релиза – до 2014. Интерактивный текст и графики изменятся в соответствии с заданными фильтрами

Полный код размещен в репозитории на github.

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

Попробуйте создать свои собственные интерактивные графики в Dash!

интерактивные графики в Dash — NTA на vc.ru

220 просмотров

Подробнее про Dash и его функционал советую читать в документации.

Всю предобработку данных я буду проводить в Jupyter Notebook, а код для дэшборда писать в Visual Studio Code.

Исходные данные

Создадим переменные со всеми жанрами и рейтингами для дальнейшего создания фильтров

Запустим само приложение. Результат:

Замечу, что html.Label – подпись к элементу интерфейса, a dcc.Dropdown – выпадающий список.

При запуске видим фильтры жанров и рейтингов, интерактивный текст отобразим позже

Результат – фильтр по годам и заготовка для графиков

Фильтры по умолчанию, результат фильтрации – 712 игр

Добавим жанр Misc, результат фильтрации изменит значение на 895

Теперь немного сложнее, создадим декоратор для гистограммы рейтингов игр по годам

Теперь Output будет возвращать график, который создается в функции update_stacked_area (переменная figure).

Фильтры по умолчанию

Добавим жанров и рейтингов, зададим год релиза – до 2003. График автоматически перестраивается

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

Полный код размещен в репозитории на github.

Попробуйте создать свои собственные интерактивные графики в Dash!

Создавайте интерактивные диаграммы, чтобы рассказать свою историю более эффективно

Infogram предлагает вам множество дополнительных настроек для настройки диаграмм и отображения ваших данных.

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

Для настройки оси диаграммы:

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

2. Введите значения оси start и/или end для настройки диапазона оси .

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

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

Чтобы включить нулевые базовые линии:

1. Щелкните диаграмму .

2. На вкладке Axis & Grid диаграммы . 3 Горизонтальный .

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

3. Включите настройку горизонтальной нулевой линии или вертикальной нулевой базовой линии .

Чтобы настроить параметры линейного графика:

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

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

2. Включите опцию флипчарта .

По умолчанию строки диаграммы используют формат даты для столбца верхней строки. Здесь вы также можете включить Числовые категории для обработки значений как простых чисел. Этот параметр работает с числами, а не с форматами даты/времени.

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

Совет . Не используйте этот параметр, если важно точное положение точек данных.

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

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

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

Создание интерактивной диаграммы в Excel

Интерактивные диаграммы строятся с помощью раскрывающегося списка, полосы прокрутки, кнопки параметров, сводной таблицы и слайсеров. Шаги для создания интерактивной диаграммы с помощью раскрывающихся списков:

Во-первых, мы создадим таблицу из пяти строк и пяти столбцов, начиная с ячейки B3 до F8.
После записи данных в ячейки мы можем сделать таблицу привлекательной, выполнив следующие шаги: твой выбор. [Здесь «стили ячеек» используются для различных типов тем ячеек, включая заголовок и заголовки. «Форматировать как таблицу» используется для выбора цвета фона таблицы.]

Таблица
Нам нужно выбрать ячейки [C3, D3, E3, F3], а затем нажать «ctrl + c», чтобы скопировать заголовки таблицы, которые мы должны вставить в любую из пустых ячеек, например (здесь ячейка J4).
Сразу после копирования держите курсор на ячейке J4, а затем мы должны нажать «alt + H + V + T», после чего на экране появится диалоговое окно. В диалоговом окне мы должны выбрать опцию «транспонировать», а затем нажать кнопку «ОК». «Транспонирование» означает преобразование строк в столбцы и наоборот. Здесь мы сделали транспонирование, потому что для создания выпадающего списка для интерактивной диаграммы данные должны быть в вертикальных столбцах, а не в горизонтальных строках. Поскольку варианты (например, математика, физика, химия, биология) располагались в горизонтальной строке таблицы, мы выполнили процесс транспонирования.

Теперь мы увидим заголовки по вертикали, что необходимо для раскрывающегося списка в ячейках с J4 по J7.

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

В файле->параметры->настроить ленту->вкладка разработчика->кнопка ок. Затем в Excel появится вкладка разработчика.

Теперь в пустой ячейке, похожей на ячейку B11, напишите «SelectSubj. », и, кроме того, мы добавим поле со списком для выбора параметров.
Чтобы поместить поле со списком в ячейку C11, мы будем:
Перейдите на вкладку разработчика -> вставка -> поле со списком (здесь оно используется для создания раскрывающегося списка). Перетащите выбранное поле со списком в ячейку C11.

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

На этом шаге сначала мы должны щелкнуть пустое поле перед «ссылкой на ячейку», а затем щелкнуть ячейку B12, поэтому адрес ячейки B12 появится в этом пустом месте. Точно так же для диапазона ввода мы сначала щелкнем пустое поле перед диапазоном ввода, затем выберем ячейки от J4 до J7, а затем нажмите кнопку «ОК».

Мы можем увидеть параметры в поле со списком следующим образом. Если мы нажмем «Физика», в ячейке B12 отобразится число «2», что указывает на то, что «Физика» считается вторым элементом в списке.

Мы создадим еще одну небольшую таблицу отдельно с заголовками «Год» и «Столбец» в ячейках D15 и E15. В таблице мы запишем только годы с 2016 по 2020 год, а соответствующие значения выбранных субъектов будут показаны в разделе столбца с помощью команды «ВПР».
«ВПР» — это функция, помогающая выполнять поиск по столбцам. Его синтаксис:
«=ВПР(искомое_значение, табличный_массив, столбец_индекс_номер ,[диапазон_просмотра]). В ячейке E16 мы введем этот синтаксис и соответствующие значения, затем нажмите Enter.

Теперь мы видим, что когда мы нажимаем «Физика» в поле со списком, все значения соответствующих лет будут отображаться в ячейках от E16 до E20.

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

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

В конце с помощью раскрывающегося списка создается интерактивная диаграмма. Эта диаграмма меняется в зависимости от изменений в поле со списком. Теперь мы увидим, как создать интерактивную диаграмму, используя сводную таблицу . «Сводная таблица» — это один из способов взаимодействия с большим количеством данных, а затем их обобщения для лучшего использования. Благодаря этому мы можем анализировать огромные данные, и на многие вопросы о данных мы получаем ответы за короткий промежуток времени. «Сводные диаграммы» — это графическое представление данных, связанных с соответствующими сводными таблицами. Здесь изменения, которые мы внесем в макет и данные сводной таблицы, немедленно отразятся на изменении сводной диаграммы. Следовательно, «сводные диаграммы» также являются «интерактивными диаграммами». Шаги по созданию интерактивной диаграммы с использованием сводной таблицы,
Сначала создайте таблицу с данными. После создания для изменения таблицы мы можем перейти на вкладку «Главная», а затем нажать «Форматировать как таблицу» для требований.

Поместите курсор в любую из ячеек таблицы и перейдите к вставке вкладки->сводная таблица. Вместо этого мы можем нажать «Alt + N + V», если мы не можем найти опцию сводной таблицы. На экране появится окно сводной таблицы.

В этом поле сводной таблицы есть три столбца, то есть «выберите таблицу/диапазон», в котором уже указан адрес таблицы, «куда мы хотим поместить таблицу и ее адрес», в котором все, что вы хотите, вы можете щелкнуть среди этих двух: «новый рабочий лист» и «существующий рабочий лист», а затем поместить курсор в ячейку, в которую вы хотите поместить сводную таблицу, которая автоматически примет адрес этой ячейки, а затем нажмите «ОК». кнопка.

На экране появится макет сводной таблицы. Нажмите на любой заголовок таблицы (например, мы нажмем на заголовок «агент»), затем на макет сводной таблицы; при этом в правой части страницы появляются поля сводной таблицы.

Теперь мы увидим, как создать интерактивную диаграмму с помощью « Slicers ». Он используется для визуального представления данных. Это будет в интерактивной, а также привлекательной форме. Шаги для создания интерактивной диаграммы с использованием слайсеров:
Перетащите поля, которые вы хотите отобразить в следующих разделах. Например, мы перетаскиваем «агент» на «метки строк», «ветку» на «столбцы» и «сумму» на «значения» (по умолчанию в разделе значений будет указана сумма суммы).

Перейдите во вкладку->диаграммы (здесь мы выберем гистограмму). Мы видим интерактивную диаграмму, созданную с помощью сводной таблицы.

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

Теперь мы увидим, как создать интерактивную диаграмму с помощью «Слайсеров». Он используется для визуального представления данных. Это будет в интерактивной, а также привлекательной форме. Шаги для создания интерактивной диаграммы с помощью слайсеров:
Создайте таблицу с данными. Если вы хотите сделать таблицу привлекательной, нажмите на вкладку «Главная» -> «Форматировать как таблицу».

Щелкните любую из ячеек таблицы и перейдите на вкладку «Вставка» -> «Срез». На экране появится диалоговое окно. Нажмите на те параметры, которые вы хотите показать в дальнейших слайсерах (здесь мы выбираем «агент» и «филиал»), а затем на кнопку «ОК».

Мы увидим, что на экране появятся 2 разных слайсера с именами «агент» и «филиал».

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