Создание быстрой структуры данных для визуализации на стороне клиента с помощью Immutable.js
StratoDem Analytics использует React с Plotly.js и Leaflet для визуализации данных на стороне клиента. Команда специалистов по обработке данных StratoDem использует панд для обработки данных. Чтобы обеспечить единообразие логики конвейера, мы написали pandas-js, порт pandas на JavaScript с поддержкой Immutable.js. В этом посте рассматривается наше обоснование и реализация pandas-js для визуализации на стороне клиента.
React постоянно перерисовывает при использовании сложных структур данных
Команда разработчиков StratoDem создает настраиваемые клиентские порталы для взаимодействия с вселенной демографических и экономических данных StratoDem Analytics. При создании пользовательского интерфейса мы управляем значительным объемом данных, передаваемых между клиентом и API данных. Если React постоянно повторно отображает целые части страницы, Plotly.js может вызвать серьезное снижение производительности.
Используйте Immutable.js для данных
Типичное решение для оптимизации React - использовать Immutable.js для структур данных, а затем использовать его оптимизированные проверки равенства в методе shouldComponentUpdate.
Для DataComponent теперь мы можем передать что-то вроде Immutable.List([1, 2, 3]) и использовать поверхностное равенство вместо проверки свойств объекта с помощью метода lodash isEqual. DataComponent теперь будет повторно визуализироваться только в том случае, если свойство data отличается от List.
Проблема: Immutable.js не был создан для статистики
Мы любим Immutable.js. Но в нем нет всех статистических тонкостей pandas или NumPy. Мы начали создавать pandas-js, чтобы разрешить тот же тип кода для построения одной строки, что и pandas и Matplotlib:
Решение: оберните Immutable с помощью удобного для статистики и визуализации кода
Вот как это сделать с помощью pandas-js и внутренней реализации StratoDem React + Plotly:
Pandas-js DataFrame - это, по сути, Immutable.Map со столбцами в качестве ключей и pandas-js Series в качестве значений. pandas-js Series помечены как Immutable.List.
Теперь мы можем реализовать проверку для компонента класса:
Поскольку столбцы, индекс и значения являются неизменяемыми объектами, проверка равенства будет намного быстрее, чем проверка типичного массива объектов.
Другие особенности pandas-js
В настоящее время мы работаем над поддержкой большинства основных методов pandas. Скоро появятся групповые и вращающиеся объекты. Ознакомьтесь с документацией здесь, чтобы увидеть больше примеров и описаний.
StratoDem Analytics - это бостонская аналитическая компания, занимающаяся анализом данных и использующая статистику и машинное обучение для анализа географических рынков. Чтобы узнать больше, перейдите на stratodem.com или напишите по адресу [email protected].
Если вы считаете эту статью интересной или имеете какие-либо критические замечания, StratoDem Analytics приглашает вас на работу! Чтобы связаться с нами по поводу программного обеспечения или роли инженеров данных, свяжитесь с нами по адресу [email protected].
