Независимо от размера компании и отрасли, отслеживание эффективности бизнеса жизненно важно на любом этапе проекта, особенно если ваш бизнес только начинает развиваться.

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

Есть много способов получить такую ​​платформу внутри вашего приложения.

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

Требования к встроенной аналитике

  • Плавная кривая обучения.
  • Настройка не должна быть сложной.
  • Возможность интерактивного управления визуализацией в режиме реального времени.
  • Гибкость - способность соответствовать требованиям Agile.
  • Не менее важна поддержка источников данных CSV и JSON, поскольку это самые популярные из них.
  • Настройка внешнего вида должна быть простой.
  • Возможность экспорта визуализированных данных.

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

Встроенная структура аналитики

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

Проблемы

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

Итак, как свести затраты на разработку встроенной аналитики к минимуму, а результаты - к максимуму?

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

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

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

Библиотеки визуализации данных, которые стоит проверить в 2019 году:

Диаграммы:

Сводные таблицы:

Карты:

Графики

Сюжетно

Plotly - одна из самых популярных библиотек для специалистов по данным, статистиков и программистов на Python. Его любят за широкий спектр интерактивных и привлекательных визуализаций, которые могут обогатить любой проект анализа данных.

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

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

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

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

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

Работа с данными

Plotly.js принимает источники данных JSON и CSV. Но чтобы загрузить файл CSV, вам нужно использовать Plotly.d3.cdv для чтения данных из вызова AJAX.

Настройка

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

Более того, вы можете представлять данные не только в 2D, но и в 3D и 4D диаграммах. Попробуйте вращать 3D-графики вокруг фиксированной точки или ее средней точки - это интересно и показывает ваши данные с разных сторон. Чтобы сосредоточиться на определенной области диаграммы, вы можете выбрать ее и рассмотреть подробнее.

Сохранить результаты очень просто - просто скачайте график в формате png.

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

Интеграции

Другие версии того же продукта - Plotly Matlab, Plotly R и Plotly Python.

Вы можете использовать Plotly с React, Angular и Vue.

Узнать больше

Чтобы узнать, как настроить любой график, попробуйте шпаргалку с кодом. Чтобы узнать, как создать свой первый сюжет с помощью Plotly.js, ознакомьтесь с этим руководством.

Google Charts

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

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

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

  • Деревья слов для визуализации последовательностей текстовых данных.
  • Карты дерева для отображения иерархических данных.
  • Таблицы для отображения данных в виде сетки.

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

Работа с данными

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

Вы можете подключиться к различным источникам данных (например, CSV, электронные таблицы, Google Fusion Tables, Salesforce и т. Д.) Через веб-службу источника данных.

Еще один способ загрузки данных в диаграммы - использование языка запросов API визуализации Google - специального подобного SQL синтаксиса, который помогает извлекать данные из источника данных с необходимой структурой.

Настройка

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

Некоторые типы основных диаграмм могут быть изменены в соответствии с принципами материального дизайна. Обратите внимание: поскольку для диаграмм материалов требуется SVG, они не будут работать в IE8 и более ранних версиях Internet Explorer.

Интеграции

Интеграция с фреймворками доступна через сторонние оболочки для React, Angular и Vue.

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

Вега

Vega - это грамматика визуализации высокого уровня, которая позволяет создавать веб-диаграммы с использованием SVG или Canvas. Визуализации определяются с помощью формата JSON. Существует несколько способов развертывания Vega: путем импорта JS-скриптов, установки модуля Vega-Embed, использования Vega View API или Node.js.

Настройка

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

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

Работа с данными

Vega принимает табличные данные. Вы можете загрузить файлы JSON, CSV, TSV, DSV, TopoJSON, указав URL-адрес источника или определение данных непосредственно в конфигурации.

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

Графики делятся на следующие категории:

  • Гистограммы
  • Графики и диаграммы с областями
  • Круговые диаграммы
  • Точечные и точечные графики
  • Распределения
  • Географические карты
  • Древовидные диаграммы
  • Схемы сети
  • Другие типы: тепловые карты, облака слов, временные шкалы и т. Д.

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

Также есть дополнительные функции: вы можете передавать обновления данных, экспортировать статические изображения или отлаживать с помощью Vega View API.

Интеграции

Vega совместима со всеми средами выполнения JS, совместимыми с ES6. Вот как можно преобразовать спецификации Vega в классы React или использовать с Angular.

Если вам нужно визуализировать данные Elasticsearch, вы также можете воспользоваться преимуществами Vega - она ​​доступна как один из типов визуализации Kibana (в настоящее время находится в экспериментальном режиме).

amCharts

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

Обратите внимание, что ваш браузер должен поддерживать технологию SVG (как и все современные браузеры).

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

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

В документации каждый тип диаграммы покрыт информацией о его назначении, требуемой структуре данных и особенностях создания.

Настройка

Эта библиотека является гибкой и настраиваемой - вы можете установить множество параметров, чтобы диаграммы соответствовали внешнему виду вашего приложения.

На мой взгляд, с точки зрения визуальной эстетики и интерактивности эти графики являются лучшими в своем классе.

Интеграции

Его можно использовать с любыми JavaScript-совместимыми средами - React, Angular, TypeScript и ванильными приложениями JS. Другими поддерживаемыми фреймворками и сборщиками модулей являются Ember, webpack, Cordova и RequireJS.

Кроме того, поскольку 4-я версия написана на TypeScript, библиотеку удобно использовать с проектами Angular2 + или любыми приложениями ES6.

Сводные таблицы

WebDataRocks

Сводная таблица WebDataRocks - это веб-компонент отчетов, написанный на JavaScript и совместимый с множеством клиентских фреймворков и серверных технологий.

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

Благодаря своему легкому весу он ускоряет создание отчетов в любом приложении. Его веб-развертывание простое и требует минимум кода.

Его самые сильные функции и функции, на которые следует обратить внимание при рассмотрении этого инструмента для веб-отчетов, следующие:

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

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

Работа с данными

Вы можете подключиться к локальным или удаленным источникам данных JSON и CSV через пользовательский интерфейс или API.

Настройка

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

Интеграции

Существуют руководства по интеграции React, Angular, AngularJS, jQuery, которые направят вас на правильный путь.

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

Более того, вы можете использовать его как компонент встроенной бизнес-аналитики бесплатно.

react-pivottable

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

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

Работа с данными

Вы можете загружать файлы CSV и данные JSON в сводную таблицу.

Настройка

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

В общем, это отличный выбор для сводных данных, особенно если вы разработчик React.

Карты

Листовка

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

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

Настройка

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

Чтобы глубже погрузиться в расширенные функции, вы можете узнать больше о его API и настроить карты по своему вкусу.

Интеграции

Существуют сторонние пакеты для интеграции с Angular, AngularJS, React и Vue.

Вы можете использовать Leaflet для создания интересных историй с данными. Чтобы получить представление о способах использования этой библиотеки, ознакомьтесь с примерами создания карт в веб-приложениях, сервисах и новостях.

OpenLayers

OpenLayers - это библиотека JavaScript для построения динамических карт в сети.

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

Работа с данными

Вы можете загружать данные GeoJSON в карты.

Настройка

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

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

Интеграции

Вы можете найти оболочки OpenLayers для React, Vue и Angular.

Это полезные руководства, которые познакомят вас со всеми основами работы с библиотекой:

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

Google Maps API

Maps JavaScript API, предоставляемый Google Maps, является стандартом веб-сервисов для создания карт внутри веб-приложений.

Весь процесс настройки прост: чтобы встроить карту на страницу, вам нужно добавить контейнер для хранения карты, определить функцию, которая отображает карту, и загрузить Maps JavaScript API. Обратите внимание, что необходимо объявить свое приложение как HTML5 и указать ключ API для отправки запросов к API.

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

Работа с данными

Вы можете загружать геопространственные данные из локальных и удаленных источников. Это можно сделать через слой данных Google Maps.

Интеграции

Вы можете использовать компоненты React и Angular для Google Maps.

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

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

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

Примеры простой панели управления бизнес-аналитикой

Вот несколько демонстраций, которые помогут вам понять, как можно комбинировать эти библиотеки:

Основные выводы

Сегодня мы:

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

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

Полученное решение имеет все шансы повысить продуктивность всех сотрудников, вовлеченных в процесс анализа данных.

В качестве бонуса вы сэкономите ресурсы для реализации проекта.

Больше библиотек

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

Спасибо за прочтение!

📝 Прочтите этот рассказ позже в Журнале.

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