Создадим интерактивную панель данных с помощью Panel от Holoviz.

Holoviz быстро становится популярным набором библиотек Python для построения графиков как среди новичков, так и среди ветеранов. Holoviz состоит из нескольких пакетов, цель которых упростить визуализацию данных независимо от их типа, при этом улучшая качество ваших графиков. Некоторые из этих библиотек включают hvPlot, Panel, HoloViews и GeoViews.

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

Почему информационные панели?

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

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

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

Материалы

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

Введение в панель

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

Компоненты

Приложение, созданное с помощью Panel, состоит из трех основных компонентов:

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

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

API

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

Panel может обеспечить быстрое создание чертежей и более сложные возможности, предоставляя вам возможность выбора из четырех различных API. В этом посте мы сосредоточимся на двух из них: интерактивных функциях и реактивных функциях.

API взаимодействия

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

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

Реактивные функции

Что делает функции Interact такими простыми, так это то, что они создают для нас элементы пользовательского интерфейса, такие как ползунок в приведенном выше примере. Реактивные функции позволяют нам создавать наши элементы и функции пользовательского интерфейса отдельно и решать, как их связать.

Мы можем сделать быстрый пример графика, используя популярный набор данных Palmer Penguins, например:

Здесь есть три шага:

  1. Объявим два наших виджета выбора, которые позволят нам выбрать любой из наших столбцов в качестве оси X или Y.
  2. Используйте вложенные строки и столбцы, pn.Row(pn.Column(<TITLE AND WIDGETS>), <PLOT>) , чтобы упорядочить наш контент в одну строку, но разделить его на два столбца.
  3. Используйте pn.bind(), чтобы соединить наш точечный график с нашими двумя виджетами, а затем Panel сделает все остальное за нас.

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

Создание дашборда с панелью

Набор данных, с которым мы будем работать в этом посте, состоит из информации о вакансиях в области Data Science по всему миру с 2020 по 2022 год. В наборе данных около 600 заданий, что делает его хорошим размером для примера, который не будет слишком сложным для загрузки браузером независимо от типов графиков, которые мы решим построить.

Давайте импортируем данные в Python и посмотрим, с чем мы работаем.

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

Основные сюжеты

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

Давайте начнем с импорта библиотеки hvplot pandas и установки расширения holoviews на боке. Я давний поклонник Plotly, который также является опцией для расширения holoviews, но мне очень нравится стиль боке по умолчанию.

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

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

Теперь мы можем вызвать plot_bars1(2021), чтобы подмножить данные только о вакансиях за этот год. Вы, наверное, видите, к чему я клоню…

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

Ползунок года

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

Есть два основных способа связать значение виджета с функцией: либо метод pn.bind(), который мы видели выше, либо декоратор @pn.depends(), который мы видим в этом примере. Любой из них работает, но мне нравится, как декоратор сразу объявляет зависимость, а не ждет, пока не будет выложена панель инструментов.

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

Если вам интересно, value_throttled просто говорит Panel не запускать функцию повторно, пока вы не отпустите кнопку мыши; это предотвращает его запуск несколько раз, когда вы перемещаете ползунок на несколько делений.

Финальные сюжеты!

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

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

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

Компоновка панели

Теперь мы готовы собрать все это вместе. Panel поддерживает несколько способов размещения объектов. В этом примере мы будем использовать строки и столбцы, так как это наиболее интуитивно понятно для начала. Мы можем вкладывать столько строк и столбцов друг в друга, сколько захотим.

Мы будем использовать WidgetBox в качестве нашего контейнера, который в основном представляет собой просто Column, но с небольшим дополнительным стилем, чтобы элементы внутри были более наглядно сгруппированы вместе. Я также использовал pn.bind(), чтобы показать, как будет выглядеть прикрепление ползунка года к каждому графику.

Наконец-то у нас есть работающая панель инструментов прямо в нашем блокноте Jupyter! Вероятно, вы увидите, как быстро вы сможете создать интерактивную информационную панель с помощью Panel, когда освоите эти три основных шага — создание функции построения графика, определение виджета и определить макет.

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

Локальное обслуживание информационных панелей

Чтобы разместить нашу панель управления локально, все, что нам нужно сделать, это запустить panel serve xxxx.ipynb в терминале из вашего рабочего каталога. Теперь вы сможете получить к нему доступ из своего браузера на localhost .

Подведение итогов

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

Ресурсы

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



Присоединяйтесь к Medium по моей реферальной ссылке — Уилл Норрис
Прочитайте все истории Уилла Норриса (и тысяч других авторов на Medium). Ваш членский взнос напрямую поддерживает…medium.com



Цитаты данных

Эллисон Мари Хорст. (2020). palmerpenguins: данные о пингвинах архипелага Палмера (Антарктида). DOI: https://doi.org/10.5281/zenodo.3960218