Лучшие инструменты визуализации данных

Перевод статьи Вероники Ровник «The best data visualization and web reporting tools for your BI solution».

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

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

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

Бесплатные инструменты

Следующие два инструмента предоставляют базовые возможности для составления веб-отчетов.

PivotTable.js

PivotTable.js это опенсорсная сводная таблица JavaScript. Она обеспечивает функционал для анализа данных. Чтобы полностью задействовать ее потенциал, вам понадобятся хорошие знания JavaScript.

1. Встроенные функции для веб-отчетов:

• Поддержка источников данных в форматах .csv и JSON.
• Доступны агрегация, фильтрация, сортировка и группирование. Всего доступны 22 функции, включая функционал для статистических исследований.
• Можно преобразовывать поля из столбцов в строки и наоборот с помощью drag & drop.
• Пользовательское форматирование ячеек.
• TSV рендерер для экспорта в формат TSV.
• Возможность определять несколько агрегаторов.
• Опция рендеринга тепловых карт.

2. Функции кастомизации вида:

• Доступны рендереры, работающие на мобильных устройствах (для touch-устройств).
• Ячейки сетки можно расцвечивать.
• Доступен вид, похожий на Excel: каждый элемент показывается в отдельном столбце или строке.
• Возможно пользовательское форматирование, а также создание пользовательской цветовой шкалы для тепловых карт.
• Языковая локализация: эта сводная таблица доступна на английском и французском. Также можно написать на JavaScript собственный языковой пакет.

3. Интеграция и совместимость:

• Есть React-версия с интегрированными графиками Plotly.
• Совместимость с Python/Jupyter и R/Rstudio.

4. Ограничения:

• Обслуживает до 100 тысяч строк.
• К сожалению, подуровни можно рендерить только с помощью дополнительного плагина.
• Недоступны встроенные рендереры для экспорта в CSV и Excel.
• Чтобы сохранять конфигурацию отчета, вам придется самостоятельно реализовать этот функционал. Но PivotTable.js дает свободу кастомизации.

5. Создание графиков:

• Можно использовать рендереры для интеграции с C3 Charts, D3.js, Plotly и Google Charts. С помощью стороннего плагина параллельно со сводной таблицей можно использовать Highcharts.

Дополнительная информация:

• Скачать с GitHub

Демо на JSFiddle:

• Основное демо
• Анализ наборов данных R

WebDataRocks

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

1. Встроенные функции для веб-отчетов:

• Поддержка локальных и удаленных источников данных в форматах JSON и .csv.
• Основной функционал доступен в специальной дополнительной части сводной таблицы – панели инструментов.
• Агрегация, множественная фильтрация, сортировка и группирование легко осуществляются с помощью UI. Есть 13 функций агрегации и возможность создавать пользовательские вычисляемые значения.
• Конфигурация полей с помощью Field List и преобразование их из столбцов в строки и наоборот с помощью drag and drop.
• Создание многоуровневых иерархий.
• Можно делиться результатами с коллегами: отчет можно сохранить и экспортировать в форматы PDF, Excel и HTML, а также распечатать.

2. Функции кастомизации вида:

• Вид и «ощущение» генератора отчетов можно менять. Есть 4 предустановленные темы, а также возможность создавать собственные.
• Можно использовать функцию условного форматирования для подсветки самых важных ячеек сводной таблицы, основываясь на определенных значениях.
• Форматирование чисел.
• Если вам нужно сменить макет, вы можете выбрать классическую, компактную или плоскую форму таблицы. Как по мне, компактная форма наиболее лаконична и изящна.
• Языковая локализация: можно выбирать среди доступных языков или перевести свою таблицу на нужный вам язык с помощью простого файла шаблона JSON.

3. Интеграция и совместимость:

• WebDataRocks можно встраивать в AngularJS, Angular и React приложения.

4. Ограничения:

• Максимальный объем данных – 1Mb.

5. Создание графиков:

• WebDataRocks легко интегрировать с Google Charts, Highcharts или любой другой библиотекой графиков. В документации есть соответствующие руководства на этот счет.

Дополнительная информация:

• Быстрый старт
• 3 варианта установки

CodePen демо:

• Многоуровневая иерархия с типами
• Приборная панель с HighCharts

Продвинутые решения

А теперь давайте перейдем к более мощным встраиваемым BI-инструментам, с помощью которых можно сделать более сложные отчеты.

Flexmonster

Сводная таблица и графики Flexmonster это компонент JavaScript. Отлично подходит для глубокого анализа табличных и многомерных данных, а также для создания на их основе визуальных отчетов. Основное отличие от бесплатных аналогов – поддержка OLAP и большее количество вариантов интеграции.

1. Встроенные функции для веб-отчетов:

• Поддержка форматов данных CSV и JSON, данных из SQL и NoSQL баз и OLAP-кубов (таких как Microsoft Analysis Services и Pentaho Mondrian cubes).
• Можно использовать множественные агрегации для суммирования числовых данных. Доступны 16 функций агрегации и есть возможность создавать вычисляемые значения.
• Сортировка и группирование данных.
• Фильтрация может осуществляться по значениям – для отображения верхних/нижних N записей, имен членов – или же применяться ко всему отчету.
• С помощью обработчиков событий можно добавить в ваш отчет интерактивность.
• Окончательный вариант отчета можно сохранить в файл JSON со всеми примененными конфигурациями и форматированием. Вы сможете использовать этот файл в дальнейшем для будущих работ.
• Экспорт отчетов в виде изображений, HMTL, .csv, Excel или PDF без применения сторонних плагинов.

2. Функции кастомизации вида:

• Можно выбрать одну из пяти тем или создать собственную.
• Кастомизация сетки позволяет создавать визуализации тепловых карт.
• Условное форматирование ячеек.
• Форматирование чисел.
• Значения данных могут отображаться в формате, определенном пользователем.
• Локализация компонентов включает семь языков. Вы можете перевести таблицу самостоятельно при помощи файла шаблона JSON.
• Дружественный к мобильным устройствам дизайн.

3. Интеграция и совместимость

• Flexmonster можно включать в простые веб-страницы или интегрировать в AngularJS, Angular и React приложения. На официальном сайте есть руководства по интеграции с jQuery и Webpack.
• Анализ данных MongoDB будет особенно интересен тем, у кого есть огромные объемы данных, хранящихся в документах. Подсоединение к MongoDB поддерживается с помощью Node.js.

4. Ограничения:

• Управляет количеством строк до 1 миллиона, так что нет проблем с большими наборами данных.

5. Создание графиков:

• У Flexmonster сводные графики это часть компонента. Чтобы получить доступ к другим графикам, можно использовать руководства по интеграции с Google Charts, Highcharts, FusionCharts или любой другой сторонней библиотекой графиков. Все эти методы помогают создавать интерактивные панели инструментов.

Дополнительная информация:

• Быстрый старт
• Варианты загрузки

Демо:

• Основное демо
• Тепловая карта

DhtmlxPivot

DhtmlxPivot это сводная сетка JavaScript для создания аналитических отчетов. Она является частью dhtmlxSuite, но ее можно приобрести отдельно. DhtmlxPivot предлагает современный пользовательский интерфейс и интеграцию с различными бэкенд-технологиями.

1. Встроенные функции для веб-отчетов:

• Поддержка подсоединения к источникам данных в формате JSON, .csv и XML. Данные могут загружаться из массива JavaScript и HTML-таблицы.
• Есть только 4 встроенные функции агрегации – max, min, sum и count. Можно создавать пользовательские функции.
• Группирование, поиск и сортировка данных.
• Фильтрация с использованием UI или предопределенных фильтров строк, чисел и данных. Также вы можете определить глобальные фильтры и установить число строк, которое должно отображаться на одной странице сетки.
• Функционал Drag and drop .
• Ячейки можно редактировать и заполнять пользовательским содержимым.
• Встроенный модуль для экспорта отчетов в файл Excel с сохранением всех конфигураций.

2. Функции кастомизации вида:

• Макет можно настроить. Например, вы можете изменить ширину столбцов и отступ слева, а также включить для таблицы режим «только для чтения».
• Условное форматирование и пользовательский CSS для ячеек.
• Дизайн, дружественный к мобильным устройствам.
• Есть особый метод локализации интерфейса.

3. Интеграция и совместимость

• Поддерживает интеграцию со многими технологиями, такими как PHP, Java, .NET, Node.js, Ruby on Rails, ASP.NET, ColdFusion, Typescript и пр.

4. Ограничения:

• На официальном сайте нет информации об ограничениях по объему данных. Тестирование показало, что сводная таблица отображает до 10 тысяч строк.

5. Создание графиков:

• Для использования графиков в вашем веб-отчете лучшим вариантом будет dhtmlxChart. Если вы приобрели весь набор dhtmlxSuite, то dhtmlxChart у вас уже есть. Но можно приобрести его отдельно.

Дополнительная информация:

• Примеры
• Скачивание пакетов

Итоги

Я считаю, что самый лучший инструмент должен содержать такие встроенные функции:

• Загрузку из .csv, JSON и загрузку многомерных данных.
• Поддержку конвейеров агрегации с помощью UI.
• Возможность отображать данные в графиках.
• Интеграцию с любыми технологиями бэкенда и фронтенда.
• Должна быть простая возможность экспорта без применения сторонних модулей.

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

[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]