Автор: Бруно Эдох
В предыдущей статье мы обсуждали, что такое визуализация данных и почему это важно.
Эта статья делает еще один шаг вперед, демонстрируя один инструмент визуализации данных, Qlik’s picasso.js. В этом посте мы рассмотрим, как начать использовать picasso.js для создания визуализаций данных.
Визуализация данных с помощью Picasso.js
Мы уже установили важность визуализации данных в современном мире. Кроме того, необходимо точно знать, что говорит нам огромное количество данных, производимых каждую секунду. Здесь на помощь приходит Qlik.
Qlik предоставляет несколько инструментов для тщательного анализа данных, а также визуализации: Qlik Sense, QlikView, Qlik Core и несколько библиотек с открытым исходным кодом, включая picasso.js. В этой статье мы сосредоточимся на picasso.js. Вы должны проверить другие удивительные доступные инструменты.
Picasso.js — это библиотека диаграмм JavaScript для создания мощных и красивых визуализаций. В этом разделе мы создадим несколько визуализаций с помощью picasso.js в настольном приложении Электрон. Electron — это мощная среда JavaScript для создания кроссплатформенных настольных приложений с использованием HTML, CSS и JavaScript. (Поэтому я предполагаю, что у вас есть некоторые знания HTML, CSS и JavaScript.)
Время сборки
Полный код приложения Electron находится на этой странице GitHub. Точка входа для приложения — app.js. Приложение загружает файл index.html и отображает его в окне приложения. index.html — это обычный формат файла HTML, который может включать CSS и JavaScript. (Документация Electron — хорошее место, чтобы узнать больше об API Electron.)
Все визуализации выполняются в viz.js. Данные, используемые для визуализации, доступны в teams.csv. Формат CSV будет преобразован в JSON с помощью csvtojson. Формат JSON снова трансформируется в формат данных picasso.js. Вам также необходимо включить picasso.js в свой проект, в зависимости от типа проекта.
Мы будем использовать функцию picasso.chart для создания диаграмм. Функция принимает объект с атрибутами, которые используются при создании диаграмм.
Данные, масштаб и элемент говорят сами за себя. Мы изучим компоненты. Компоненты определяют все, что формирует визуальные части диаграммы. Вот типы компонентов, включенные в picasso.js: ось, сетка, точка, прямоугольник, область линии, круговая диаграмма, легенда (категориальная и последовательная), метки, текст, область кисти, лассо кисти, диапазон кисти и всплывающая подсказка. Можно создать практически любую диаграмму, создав пользовательские компоненты.
Давайте начнем с визуализации процента побед команд на чемпионатах мира с помощью круговой диаграммы.
Результат:
Наши данные представлены в формате CSV, который не используется в picasso.js. Сначала мы конвертируем его в JSON, а затем преобразуем в матричный формат, требуемый picasso.js, в функции transform.
Круговая диаграмма помогает нам увидеть количество побед каждой страны, участвующей в чемпионате мира, по отношению к общему количеству побед. Есть две кнопки-переключателя для переключения между проигрышами и выигрышами. Эти функции повторно отображают диаграмму, передавая соответствующий аргумент функции drawPieChart. Из визуализации довольно легко увидеть и сравнить победы команд.
Теперь давайте визуализируем те же данные на кольцевой диаграмме. Кольцевая диаграмма — это, по сути, круговая диаграмма с более причудливым видом. Кроме того, кольцевая диаграмма облегчает обнаружение различий. Для еще более подробных различий между круговой диаграммой и кольцевой диаграммой вы должны прочитать пост Андреа Робертсон по теме.
Результат:
Обратите внимание, что гистограммы и кольцевые диаграммы лишь немного отличаются друг от друга, когда речь идет о коде, используемом для их создания. Типы одинаковые (оба круговая). Основное отличие заключается в объекте settings.
Дальнейшие шаги
Теперь, когда вы понимаете основы picasso.js, вы можете перейти к части 3 этой серии — она будет опубликована в ближайшие недели — в которой обсуждаются некоторые из более продвинутых функций инструмента.
А пока не стесняйтесь зайти на https://picassojs.com/, чтобы найти документы, учебные пособия и примеры.
****
Об авторе
Бруно Эдох – сторонний оплачиваемый участник Fixate.io, а также студент младших курсов Университетского колледжа Ашеси, изучающий компьютерные науки. Это его вторая статья, опубликованная в Qlik Branch. Он заинтересован в использовании возможностей технологий для повышения производительности. Будучи большим поклонником технологий с открытым исходным кодом, он в настоящее время изучает возможность использования блокчейна Биткойн для борьбы с коррупцией в правительстве.
