Полный обзор лучших инструментов визуализации данных

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

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

Что такое инструменты визуализации данных?

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

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

Что общего у лучших инструментов визуализации данных?

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

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

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

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

Сравнение инструментов визуализации данных

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

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

Tableau (и Tableau Public)

У Tableau есть множество доступных вариантов, включая настольное приложение, серверную и размещенную онлайн-версии, а также бесплатный общедоступный вариант. Доступны сотни вариантов импорта данных, от файлов CSV до данных Google Ads и Analytics и данных Salesforce.

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

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

Плюсы

• Сотни вариантов импорта данных
• Возможность отображения
• Доступна бесплатная публичная версия
• Множество видеоуроков, которые покажут вам, как использовать Tableau.

Минусы

• Небесплатные версии стоят дорого (70 долларов США в месяц на пользователя для программного обеспечения Tableau Creator).
• Общедоступная версия не позволяет сохранять конфиденциальность анализа данных.

Примеры визуализации данных

Нижняя линия

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

Инфограмма

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

Готовые визуализации можно экспортировать в несколько форматов: .PNG, .JPG, .GIF, .PDF и .HTML. Также возможны интерактивные визуализации, идеально подходящие для встраивания в веб-сайты или приложения. Infogram также предлагает плагин WordPress, который еще больше упрощает встраивание визуализаций для пользователей WordPress.

Плюсы

• Многоуровневое ценообразование, включая бесплатный план с базовыми функциями
• Включает более 35 типов диаграмм и более 550 типов карт.
• Перетащите редактор
• API для импорта дополнительных источников данных

Минусы

• Значительно меньше встроенных источников данных, чем в некоторых других приложениях.

Примеры

Нижняя линия

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

Блоки диаграммы

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

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

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

Плюсы

• Доступны бесплатные и недорогие платные планы
• Простой в использовании мастер для импорта необходимых данных

Минусы

• Непонятно, насколько надежен их API
• Похоже, что у него нет возможности сопоставления

Примеры

Нижняя линия

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

Datawrapper

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

После импорта данных диаграммы можно создавать одним щелчком мыши. Их типы визуализации включают в себя столбчатые, линейные и гистограммы, выборочные кольцевые диаграммы, диаграммы с областями, точечные диаграммы, картограммы и карты символов, а также карты локаторов и другие. Готовые визуализации напоминают те, что можно увидеть на таких сайтах, как New York Times или Boston Globe. На самом деле их диаграммы используются такими изданиями, как Mother Jones, Fortune и The Times.

Бесплатный план идеально подходит для встраивания графики на небольшие сайты с ограниченным трафиком, но платные планы стоят дорого, начиная с 39 долларов в месяц.

Плюсы

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

Минусы

• Ограниченные источники данных
• Платные планы стоят дорого

Пример

Нижняя линия

Datawrapper — отличный выбор для визуализации данных для новостных сайтов. Несмотря на цену, функции, которые Datawrapper включает в себя для визуализации новостей, того стоят.

D3.js

D3.js — это библиотека JavaScript для управления документами с использованием данных. D3.js требует хотя бы некоторых знаний JS, хотя есть приложения, которые позволяют пользователям, не умеющим программировать, использовать библиотеку.

Эти приложения включают NVD3, который предлагает повторно используемые диаграммы для D3.js; Plotly's Chart Studio, которая также позволяет дизайнерам создавать WebGL и другие диаграммы; и Ember Charts, в котором также используется фреймворк Ember.js.

Плюсы

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

Минусы

• Требуется знание программирования для использования в одиночку
• Доступно меньше поддержки, чем с платными инструментами

Примеры

Нижняя линия

D3.js подходит только для тех дизайнеров, которые либо имеют доступ к программисту за помощью, либо сами имеют знания в области программирования.

Google диаграммы

Google Charts — это мощный бесплатный инструмент визуализации данных, специально предназначенный для создания интерактивных диаграмм для встраивания в онлайн. Он работает с динамическими данными, а выходные данные основаны исключительно на HTML5 и SVG, поэтому они работают в браузерах без использования дополнительных плагинов. Источники данных включают Google Spreadsheets, Google Fusion Tables, Salesforce и другие базы данных SQL.

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

Плюсы

• Бесплатно
• Доступен широкий выбор форматов диаграмм
• Совместимость с разными браузерами, поскольку используется HTML5/SVG.
• Работает с динамическими данными

Минусы

• Помимо доступных руководств и форума, существует ограниченная поддержка.

Примеры

Нижняя линия

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

FusionCharts

FusionCharts — это еще один вариант на основе JavaScript для создания веб-панелей и мобильных панелей. Он включает более 150 типов диаграмм и 1000 типов карт. Он может интегрироваться с популярными средами JS (включая React, jQuery, React, Ember и Angular), а также с языками программирования на стороне сервера (включая PHP, Java, Django и Ruby on Rails).

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

Плюсы

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

Минусы

• Дорого (начинается почти с 500 долларов за одну лицензию разработчика)
• Излишне для простых визуализаций за пределами среды панели мониторинга

Примеры

Нижняя линия

Для создания информационных панелей ничто другое в этой статье не сравнится с FusionCharts. Если это проект под рукой, это, несомненно, самый мощный выбор.

Chart.js

Chart.js — это простая, но гибкая библиотека JavaScript для построения диаграмм. Он имеет открытый исходный код, предоставляет большое разнообразие типов диаграмм (всего восемь), а также позволяет анимировать и взаимодействовать.

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

Плюсы

• Бесплатный и с открытым исходным кодом
• Отзывчивый и кросс-браузерный вывод

Минусы

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

Примеры

Нижняя линия

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

Графана

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

Функции экспорта позволяют дизайнерам обмениваться снимками информационных панелей, а также приглашать других пользователей к сотрудничеству. Grafana поддерживает более 50 источников данных через плагины. Его можно загрузить бесплатно, или есть облачная версия за 49 долларов в месяц. (Есть также очень ограниченная бесплатная размещенная версия.) Для загружаемой версии также доступны планы поддержки, чего нет во многих других инструментах с открытым исходным кодом.

Плюсы

• Открытый исходный код, с бесплатными и платными вариантами
• Доступен большой выбор источников данных
• Доступны различные типы диаграмм
• Упрощает создание динамических информационных панелей
• Может работать со смешанными потоками данных

Минусы

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

Примеры

Нижняя линия

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

Chartist.js

Chartist.js — это бесплатная библиотека JavaScript с открытым исходным кодом, которая позволяет создавать простые адаптивные диаграммы с широкими возможностями настройки и совместимостью с разными браузерами. Вся библиотека JavaScript занимает всего 10 КБ в сжатом виде. Диаграммы, созданные с помощью Chartist.js, также можно анимировать, а плагины позволяют расширять их.

Плюсы

• Бесплатный и с открытым исходным кодом
• Крошечный размер файла
• Графики можно анимировать

Минусы

• Не самый широкий выбор доступных типов диаграмм
• Нет картографических возможностей
• Ограниченная поддержка за пределами сообщества разработчиков

Примеры

Нижняя линия

Chartist.js — хороший вариант для дизайнеров, которым нужны простые, встраиваемые, адаптивные диаграммы с небольшим размером файла.

Сигмайс

Sigmajs — это универсальный инструмент визуализации для создания сетевых графиков. Он легко настраивается, но для его использования требуются базовые знания JavaScript. Созданные графики являются встраиваемыми, интерактивными и адаптивными.

Плюсы

• Широкие возможности настройки и расширения
• Бесплатный и с открытым исходным кодом
• Легко встраивайте графики в веб-сайты и приложения

Минусы

• Создает только один тип визуализации: сетевые графики
• Требуется знание JS для настройки и реализации

Примеры

Нижняя линия

Из-за своей единственной направленности Sigmajs — отличный вариант для создания сетевых графов, если дизайнеру удобно работать с JavaScript.

Полимапы

Polymaps — это специальная библиотека JavaScript для картографирования. На выходе получаются динамические адаптивные карты в различных стилях, от наложения изображений до карт символов и карт плотности. Он использует SVG для создания изображений, поэтому дизайнеры могут использовать CSS для настройки визуальных эффектов своих карт.

Плюсы

• Бесплатный и с открытым исходным кодом
• Создан специально для картографии
• Легко встраивайте карты в веб-сайты и приложения.

Минусы

• Создает только один тип визуализации
• Требуются некоторые знания кодирования для настройки и реализации

Примеры

Нижняя линия

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

Заключение

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

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

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

• • •

Дальнейшее чтение в блоге Toptal Design:

1. Визуализация данных — лучшие практики и основы
2. Вдохновитесь этими визуализациями данных
3. Дизайн приборной панели — рекомендации и передовой опыт
4. Если вы не используете UX-данные, это не UX-дизайн
5. Сила в цифрах — обзор проектирования, основанного на данных