«Сырые» данные скучны и сложны для восприятия. Но если добавить к ним визуальный образ – уже намного легче изучать материал. Вы не просто поймёте информацию быстрее, но и сможете пронаблюдать за интересными закономерностями, представление о которых нельзя составить, исходя лишь из одной статистики. Чтобы упростить процесс создания красивых диаграмм и карт мы подготовили список полезных инструментов для визуализации данных. Список разделён на две части: в первую входят инструменты, которые требуют познаний в кодировании и соответственно предназначены для разработчиков. А вторая часть включает в себя инструменты, не требующие никаких специальных навыков.
Для разработчиков
D3.js
D3.js, (сокращённое от «Data Driven Documents») – первое что приходит на ум, когда мы думаем о визуализации данных. D3.js использует HTML, CSS и SVG для графиков и диаграмм. Если вы можете представить какую-либо визуализацию, D3 поможет воплотить её в жизнь. Многофункциональный инструмент интерактивный и красиво выполненный, с бесплатными функциями (по большей части) и открытым исходным кодом. Готовые диаграммы не встроены по умолчанию, однако вы можете воспользоваться галереей, демонстрирующей основные возможности D3.
У D3 есть только две основные проблемы: необходимость обучаться и совместимость исключительно с новыми браузерами. Поэтому выбирайте этот инструмент только если у вас есть достаточно времени и вам не принципиально чтобы все графики и диаграммы отображались в старых браузерах.
FusionCharts
FusionCharts имеет самую объёмную коллекцию диаграмм и карт. Вы сможете найти всё, что вам нужно, выбирая из 90+ типов диаграмм и 965 карт. FusionCharts поддерживает не только самые новые, но и старые браузеры (например, начиная от IE 6). Также он поддерживает форматы данных JSON и XML, даёт возможность экспортировать диаграммы в PNG, JPEG, SVG или PDF и имеет неплохую коллекцию панелей для бизнес аналитики и живых демо для вдохновения. Диаграммы и карты работают на всех устройствах и платформах, легко настраиваются и имеют красивые взаимодействия. Единственное, что омрачает общую картину – дороговизна FusionCharts. Но у вас есть возможность пройти бесплатный урок перед тем, как купить этот инструмент.
Chart.js
Небольшая библиотека с открытым кодом, поддерживающая всего 6 типов диаграмм: линейная, штриховая, лепестковая, полярная, круговая и кольцевая. Но часто этого вполне достаточно для работы над проектом. Если приложение большое и сложное, то использование библиотек по типу Google Charts и FusionCharts имеет смысл. Если же у вас небольшой проект – Chart.js станет идеальным решением. Для создания диаграмм этот инструмент использует Сanvas, элемент HTML5. Все диаграммы адаптивны и имеют простой дизайн. На сегодняшний день, это одна из самых популярных библиотек с открытым исходным кодом для построения графиков. Познакомьтесь с наглядными примерами всех шести типов диаграмм.
Google Charts
Google Charts создаёт диаграммы в HTML5/SVG, чтобы обеспечить кроссбраузерную совместимость и переносимость на iPhones и Android. Также он включает VML для поддержки более старых версий браузеров. Google Charts предлагает порядочное количество диаграмм с наиболее часто используемыми типами диаграмм (штриховая, комбинированная, круговая и т.д.) Он гибок и удобен в использовании (это же всё-таки Google). Вы можете просмотреть галерею, чтобы ознакомиться с примерами различных диаграмм и типами взаимодействия.
Highcharts
Ещё один важный игрок в сфере диаграмм. Как и FusionCharts, он предлагает широкий выбор готовых диаграмм и карт. Помимо обычных диаграмм, Highcharts также предлагает отдельный пакет для диаграмм стоков (Highstock), имеет ряд полезных опций. Highcharts позволяет экспортировать графики в PNG, JPG, SVG и PDF. Вы можете просмотреть различные типы графиков от этого инструмента в разделе demo. Highcharts бесплатен для персонального использования. Для коммерческого применения придётся купить специальную лицензию.
Leaflet
Библиотека с открытым кодом, разработанная Владимиром Агафонкиным (Vladimir Agafonkin) для адаптированных под мобильные телефоны карт. Инструмент очень лёгкий (всего 33КБ) и имеет множество функций для создания различных типов карт. Leaflet использует HTML5 и CSS3, работает на всех крупных настольных и мобильных платформах. Здесь можно найти большой выбор плагинов, предназначенных для расширения базовой функциональности, например, можно добавить анимационный маркер, тепловую карту кликов и т.д.. Если вы собираетесь разработать программу, включающую карты, попробуйте поработать с Leaflet.
Dygraphs
JavaScript-библиотека с открытым кодом, предназначенная для обработки большого объёма данных. Быстрая, удобная и легко настраиваемая. Работает со всеми основными браузерами, а также имеет очень активное сообщество пользователей. Dygraphs позиционирует себя как инструмент для нишевого использования, поэтому не подойдёт для всех ваших потребностей. Так или иначе, Dygraphs будет помогать вам чаще, чем просто простаивать. Чтобы ознакомиться со всеми возможностями, зайдите в галерею demo.
Для рядовых пользователей
Datawrapper
Онлайн-инструмент для создания интерактивных диаграмм. После того как вы загрузили данные из CSV файла или вставили их непосредственно в само поле, Datawrapper будет генерировать штриховую, линейную или любую другую визуализацию. Многие журналисты и новостные организации используют Datawrapper чтобы вставлять наглядные диаграммы в статьи. С помощью этого инструмента очень легко использовать и создавать эффективные графики. Упростить начало работы поможет этот гидлайн.
Tableau
Tableau Public – один из самых популярных инструментов визуализации с огромным разнообразием диаграмм, графиков, карт и т.д. Это полностью бесплатный инструмент, а сделанные с его помощью диаграммы легко вставить на любую веб-страницу. Вы можете заглянуть в замечательную галерею, в которой найдёте все визуализации, созданные с помощью Tableau. От схожих инструментов Tableau отличают более качественные графики и диаграммы. Вы можете использовать как бесплатную (единственный минус – большой нижний колонтитул), так и платную версию.
Raw
Raw характеризует себя как «недостающее звено между электронными таблицами и векторной графикой». Этот инструмент разработан на основе D3.js, имеет интуитивный интерфейс, который даёт возможность быстро привыкнуть к его использованию. У Raw открытый исходный код и он не требует никакой регистрации. Пользователям предлагается библиотека и 16 типов диаграмм для выбора. Весь процесс происходит в браузере, поэтому нет лишних причин для беспокойства – ваши данные в полной сохранности. Raw легко настраиваем и расширяем, что позволяет принимать новые пользовательские макеты.
Timeline JS
Как и предполагает название, Timeline JS помогает создавать красивые планы-графики без необходимости разбираться в написании кода. Инструмент бесплатен, имеет открытый исходный код и используется многими популярными сайтами. Для создания собственного плана графика вам придётся пройти 4 этапа, что подробнее объяснено здесь. И, наконец, самая лучшая опция Timeline JS: он поддерживает работу с различными медиаисточниками и имеет встроенную поддержку для Twitter, Flickr, Google Maps, YouTube, Vimeo, Vine, Dailymotion, Wikipedia, SoundCloud и других подобных сайтов.
Infogram
Позволяет создавать диаграммы и инфографику онлайн. У него есть ограниченная бесплатная версия и две платных опции, включающих некоторые дополнительные функции, например, 200+ карт, приватная публикация и библиотека символов. Инструмент максимально прост в использовании, а основные диаграммы хорошо разработаны. К одному из так называемых минусов можно отнести огромное лого, который появляется в бесплатной версии, когда вы пытаетесь вставить интерактивные диаграммы на свою веб-страницу. Лучшим решением стало бы использование маленького текста по аналогии с Datawrapper.
Plotly
Веб-инструмент для анализа данных и построения диаграмм. Он имеет неплохую коллекцию разных типов диаграмм со встроенными функциями для социального шеринга. Доступные диаграммы и графики выглядят довольно профессионально. Создание диаграммы – это всего лишь вопрос загрузки информации и настройки макета, осей, заметок и пояснительных надписей на диаграмме. Если вам нужно немного вдохновения перед стартом, загляните сюда.
ChartBlocks
Ещё один онлайн-инструмент для создания диграмм, позволяющий строить последние очень быстро. К сожалению, количество типов диаграмм ограничено, но это не должно вызывать никаких проблем, так как сюда входят самые распространённые типы диаграмм. ChartBlocks позволяет стягивать данные из нескольких внешних источников (например, электронные таблицы и базы данных). После того, как вы создали диаграмму можно экспортировать её в SVG или PNG, вставить на сайт или поделиться в социальных медиа.
Источник: TNW