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

,

Материал о визуализации данных подготовлен для Эксперимент.ру Юрием Ветровым, руководителем UI Modeling Company, которая занимается проектированием пользовательских интерфейсов. В общих чертах Юрий рассказывает о набирающих в последнее время популярность дизайнерских методиках — визуализации и инфографике, о сферах их применения и классификации, процессе создания, инструментах и примерах из практики.

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

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

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

Определение задачи и целевой аудитории

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

Сбор данных для визуализации

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

Выбор типа визуализации и инструмента разработки

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

Создание набросков и проверка на реальных данных

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

Отрисовка в дизайне и программная реализация

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

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

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

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


MindManager


e!Sankey

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


Gliffy


Lovely Charts

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


FusionCharts

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


Many Eyes


Synoptic


Stack (Digg Labs)

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

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

Об авторе