Я хотел бы познакомить вас с Predix Visualization Framework (он же Px-vis), фреймворком для построения графиков, разработанным и разработанным командой Predix Design System для удовлетворения потребностей пользователей и разработчиков промышленных интернет-приложений. Мы впервые выпустили этот фреймворк в конце 2016 года и только что выпустили существенный набор улучшений в первом выпуске Q1.

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

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

Типы диаграмм

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

Параллельные координаты: полезная для анализа многомерных данных, эта диаграмма состоит из ряда параллельных осей Y, каждая из которых представляет отдельный параметр или тег.

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

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

Радар: аналогично диаграмме параллельных координат с осями, отображаемыми радиально по часовой стрелке от позиции 12 часов.

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

Spark: компактный график таймсерии для построения отдельного тега, KPI и т. Д. На небольшом пространстве.

XY / Line / Scatter: полезно для поиска корреляций между двумя или более параметрами или тегами. Точки данных отображаются на диаграмме на основе их значений X и Y в виде точки или линии.

Почему мы создали свою собственную структуру для построения графиков

Px-vis был создан в тесном сотрудничестве с командой GE Digital Asset Performance Management и при существенном участии пользователей в том, как они смотрят на данные в сценариях мониторинга и диагностики. Мы создали Px-vis, потому что обнаружили, что стандартные пакеты для построения графиков на основе браузера не удовлетворяют потребности наших пользователей по ряду причин:

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

С технологической точки зрения Px-vis полагается на библиотеку d3 с открытым исходным кодом и предоставляет оболочки для множества функций и возможностей, предлагаемых в d3. Px-vis написан с использованием стандарта веб-компонентов с использованием Polymer и может быть включен в любой фреймворк с использованием предоставленных компонентов Polymer.

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

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

Преимущества использования нашего фреймворка

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

Основываясь на нашем анализе, учитывающем время прорисовки, d3 лучше, чем HighCharts, который использует свою собственную систему SVG и начинает очень быстро замедляться, когда вы добавляете все больше и больше серий. Даже при использовании d3 только с SVG он на 1–2 порядка превосходит HighStock. Добавьте рендеринг в Canvas, и он станет намного быстрее. Другие библиотеки d3 не были гибридными системами SVG-Canvas и, следовательно, имели ограничения соответствующей технологии. Поскольку мы приняли d3 4.x сразу после его выпуска, мы смогли работать с гибридными диаграммами, должно быть, быстрее, чем если бы мы выбрали другую библиотеку диаграмм d3, что дает нам гораздо лучшую производительность, чем другие библиотеки d3.

Обработка данных: с помощью Px-vis данные не будут изменены или объединены, если мы этого не хотим. Одна большая проблема, с которой мы столкнулись с HighStock / HighCharts, заключалась в том, что он незаметно связывает данные по соображениям производительности, и, хотя это можно отключить, это резко снижает производительность. Проблема с биннингом заключается в том, что он создает ограничения в отношении того, как пользователь может взаимодействовать с данными (например, в рабочих процессах аналитического мониторинга и диагностики).

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

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

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

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

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

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