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

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

Процесс создания

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

Определение задачи и целевой аудитории. Важно понимать, что и кому хочет показать автор своей инфографикой. Будет ли это отчет о результатах деятельности, иллюстрация к аналитической статье или другая задача из тех, что описаны в первой части материала. Читателя и его бекграунд также полезно держать в голове. Знаком ли человек с описываемой темой или ему нужны дополнительные пояснения, увидит ли он графику саму по себе или вместе с другой тематической информацией? Здорово, если сообщение будет не только рассказано целевой аудитории, но и понято ей.
Сбор данных для визуализации. Какие-то из них будут основными, какие-то — вспомогательными. Полезно иметь в загашнике как можно больше исходных данных на всякий пожарный — могут и не понадобиться, но в подходящем случае здорово подчеркнут смысл. Если визуализация будет динамически генерируемой или интерактивной, понадобятся соответствующие источники информации. Полезно проработать этот момент заранее — при работе со сторонними поставщиками данных часто возникает много подводных камней.
Выбор типа визуализации и инструмента разработки. Внешний вид итоговой картинки определяется задачей и собранными данными. Нужно ли сравнить их, показать связи между ними, изменение их значений с течением времени или что-то другое? В предыдущей части статьи описаны основные типы инфографики — это наиболее распространенные подходы к отображению данных, которые подходят для большинства случаев. Есть также хорошая памятка от Andrew Abela, которая может подсказать подходящий вариант. Если визуализация будет динамически генерируемой или интерактивной, неплохо бы к этому моменту также выбрать инструмент разработки — технические ограничения могут осложнить полет фантазии.
Создание набросков и проверка на реальных данных. Полезно предварительно смоделировать будущую картинку в виде рисованного на бумаге скетча или чернового наброска в электронном виде. Это позволит заранее увидеть многие из потенциальных проблем и, если нужно, подкорректировать изначальный план. Крайне желательно использовать для набросков реальные данные — их может либо не хватить для выбранного типа визуализации, либо наоборот, картинка получится слишком перегруженной.
Отрисовка в дизайне и программная реализация. Оформление визуализации зависит от контекста использования итоговой картинки. Будет ли это самостоятельное изображение или часть другого документа или программы; будет ли она показана на бумаге, компьютере или мобильном; нужно ли предусмотреть элементы управления в случае интерактивной инфографики? Все это накладывает ограничения на внешний вид создаваемой визуализации.

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

Кем и чем создается инфографика

Специальных инструментов для создания комплексной статической инфографики нет — используются обычные графические редакторы вроде Adobe Illustator или Xara Xtreme. Причем для сложных изображений может понадобиться приличное количество времени и сил — вот, например, интересный кейс создания сложной иллюстрации, занявший порядка 80 часов работы. Причем половина из них ушла на предварительную проработку. Хотя в примере скорее иллюстрация, чем работа по визуализации данных, подходы и процесс очень похожи.

Для более простых прикладных задач вроде построения стандартных графиков и диаграмм или стандартизованного описания процессов подходят специализированные инструменты — MS Visio и Excel, Smart Draw, OmniGraffle, Concept Draw или любой графический редактор. При творческом подходе можно пойти дальше стандартных средств — например, много интересных приемов работы с Excel есть в блоге компании Juice Analytics. Есть также инструменты для построения отдельных типов визуализации вроде ментальных карт в MindManager, UML-диаграмм в Rational Rose, диаграмм Сэнки в e-Sankey или Гантта в MS Project. Причем многие из таких продуктов в последнее время все чаще запускаются в виде веб-приложений — например, Lovely Charts или Gliffy.

Большинство стандартных задач по созданию динамической инфографики в вебе решаются библиотеками скриптов на JavaScript, Java и Flash — например, amCharts или JS Charts. Есть аналогичные платные и беслатные продукты вроде Google Chart, позволяющие генерировать графики и диаграммы через специальный API или с помощью виджетов, как Fusion Widgets.

Для более сложных визуализаций существуют экспериментальные инструменты и веб-сервисы. Например, одна их исследовательских групп IBM развивает проект Many Eyes — он позволяет построить полтора десятка типов инфографики на основе любого набора данных. Свои эксперименты в этой области выкладывают в общий доступ команды некоторых сайтов, таких как Digg Labs, Yahoo! Research и MSNBC, а также сторонние разработчики, использующие данные популярных сервисов вроде Del.icio.us и Last.FM. Существует также много университетских работ в этом направлении — например, немецкий Synoptic.

Если идти от практических задач в сторону алгоритмического или генеративного искусства, широко используются такие инструменты как язык программирования Processing и Context Free Design Grammar. Многие пишут скрипты самостоятельно — например, в 3D Max.

Сложнее, когда инфографика является частью интерфейса, как в играх или специализированном отраслевом ПО. Но эта тема недостаточно мне знакома, да и скорее достойна отдельной статьи.

Специально для Эксперимент.ру. В издании материал выйдет в немного другой компоновке.

Все части материала: