Инфографика – яркий образ
вместо тысячи слов!

Визуализация данных: классификация

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


 

Визуализация данных: классификация

Первая часть обзорного материала об инфографике

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

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

У практики отображения информации в графическом виде много синонимов, но в последнее время чаще всего используются два: визуализация данных и инфографика. Существуют эти подходы уже достаточно давно, литературы по этому поводу написано много (среди наиболее известных авторов и дизайнеров: Edward Tufte, Stephen Few, Ben Fry), но в первую очередь интересно, где и как используется инфографика.

Применение

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

Статистика и отчеты

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

Справочная информация

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

Интерактивные сервисы

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

Иллюстрации

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

Эксперименты и искусство

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

 

Классификация

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

Графики

Показывают зависимость данных друг от друга. Строятся по осям X и Y, хотя могут быть и трехмерными.

Линейный график line chart, area chart

Наиболее распространенный случай. Объединяет линией набор точек, соответствующих значениям по осям. Например, ежедневная посещаемость сайта за месяц. Может показывать сразу несколько наборов данных — например, статистику просмотров для 3 наиболее популярных страниц.

Примеры: © BFM.ru, SmartMoney, TeleGeography Research

График рассеивания scatterplot

Показывает распределение ограниченного набора точек, соответствующих значениям по осям. Между точек часто рисуется выравнивающая кривая — она наглядно показывает закономерности среди значений. Например, связь между стажем работы и производительностью труда среди 50 сотрудников компании (просто соединить полученные точки в виде линейного графика нельзя — и смысл искажается, и линия будет дерганой).

Примеры: © Statcon

 

Диаграммы сравнения

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

Столбиковая диаграмма bar chart

Показывает один или несколько наборов данных, сравнивая их между собой. Существует два варианта отображения в случае нескольких наборов: либо в виде нескольких стоящих рядом столбиков, либо в виде одного, но поделенного внутри в соответствии с долями значений. Например, ежегодная прибыль трёх компаний за последние 5 лет или их доли рынка за это же время.

Примеры: © SmartMoney

Гистограмма histogram

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

Примеры: © Студия Артемия Лебедева, Большая Советская Энциклопедия

Круговая диаграмма pie chart

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

Примеры: © Candy Chang, Density Design, GraphJam

Площадная диаграмма bubble chart

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

Примеры: © (автор неизвестен), Секрет Фирмы, Коммерсантъ.Деньги

Кольцевая диаграмма ring chart

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

Примеры: © Wired, New York Times

Диаграмма разброса span chart

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

Лепестковая диаграмма radar chart

Сравнивает величины нескольких значений, каждая из которых соответствует точке на оси. Количество осей соответствует количеству значений, а точки объединены линями. Например, сравнение рентабельности каждого из 8 направлений деятельности компании.

Примеры: © Секрет Фирмы, Pedro Monteiro, Main Library at Queen Mary (University of London)

Облако тегов tag cloud

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

Примеры: © Flickr, Martin Ignacio Bereciartua

Тепловая диаграмма heat map

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

Примеры: © Dylan Vester, CrazyEgg

 

Деревья и структурные диаграммы

Показывают структуру набора данных и взаимосвязи между его элементами.

Дерево tree

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

Примеры: © Concept Draw, Karen Leech, (автор неизвестен)

Ментальная карта mind map

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

Формализованные структурные диаграммы

Показывают состав и структуру системы или ее части в виде карточек, которые описаны с разной степенью детализации и связаны друг с другом как родительские и дочерние.
Отображается в стандартизованном виде — например, с помощью UML (Unified Modeling Language) или IDEFIX (Integration Definition for Information Modeling). Например, все сущности, необходимые для работы одного из модулей программной системы.

Примеры: © Concept Draw, Wikipedia

Диаграмма Венна-Эйлера Venn/Euler diagram

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

Примеры: © Phil Glockner, Dan Saffer

Плоское дерево tree map

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

Примеры: © Tableau Software, Panopticon, Panopticon

 

Диаграммы визуализации процесса

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

Формализованная блок-схема block diagram

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

Примеры: © Density Design, Allen Holub, Concept Draw

Неформализованная блок-схема block diagram

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

Диаграмма циклического процесса

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

Примеры: © Fruitful, eStrara, Idiagram

Диаграмма Сэнки Sankey diagram

Показывает ключевые шаги процесса и интенсивность его протекания на каждом из участков. Отображается без узлов, в виде соединяющихся и разветвляющихся линий разной толщины (в зависимости от величины параметра). Имеет любое количество начальных и конечных точек, а значит и множество сценариев развития. Например, процесс передачи тепла от ТЭЦ к бойлерной станции, включая его потери по различным причинам.

Матрицы

Сопоставляют между собой значения внутри набора данных в виде таблицы.

Таблица matrix

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

Примеры: © Известия, PresseBox, Elliance

Календарь

Частный случай таблицы. Показывает календарный месяц по номерам и дням недели.

Примеры: © thenonhacker, Yahoo! UI Patterns Library

Диаграммы времени

Показывают зависимость данных от времени.

Временная шкала timeline

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

Диаграмма Гантта Gantt diagram

Показывает последовательность, длительность, а также время начала и окончания этапов и конкретных задач, необходимых для выполнения проекта. Отображается в виде «водопада» из одного или нескольких каскадов — соединенных стрелками блоков, выстроенных по диагонали сверху вниз, слева направо (т.е. «лестницей»). Причем длина блока зависит от необходимого для выполнения времени. Например, задачи, которые нужно выполнить для написания, подготовки к печати и выпуска книги. Диаграмму можно также отнести и к группе визуализирующих процесс, но обе ее части (длительность и последовательность действий) одинаково важны, поэтому тут уже дело вкуса.

Примеры: © MS Project, Todd R. Warfel

 

Карты

Показывают данные, зависимые от географии или архитектуры некого объекта.

Географическая карта

Показывает в схематичном виде состав и расположение частей географического объекта. Например, мир в целом или остров.

Фотографическая карта

Показывает географический объект в виде фотографии со спутника или самолета. Например, мир в целом или город.

Пример: © Google Maps

Дорожная карта

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

Примеры: © MapQuest, Яндекс.Карты

Тематическая карта

Показывает различные объекты в виде маркеров на карте мира, страны или города. Объектами чаще всего являются те, что построены человеком: дома, магазины, памятники, объекты инфраструктуры и т.п. на карте города; либо города на карте страны; либо страны на карте мира. Основой может являться практически любая карта, но обычно используются географическая, фотографическая, дорожная или топографическая карты. Например, расположение офисов компании на карте города.

Картограмма cartogram

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

Примеры: © Density Design, (автор неизвестен), Manuel Marino

Архитектурный план

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

Примеры: © Christian’s of Bucks Point, (автор неизвестен), (автор неизвестен)

Схема маршрутов общественного транспорта

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

Диаграммы связей

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

Круговая диаграмма связей network diagram, arc diagram

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

Линейная диаграмма связей

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

Связи на карте

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

Дендрограмма dendrogram

Показывает близость значений набора данных по одному из параметров, используя ось Y для расстановки самих значений, а ось X — для величины параметра. Отображается в виде набора соединяющихся друг с другом горизонтальных линий, которые соединяются, если значения совпадают по параметру. Причем чем раньше совпадение значений находится по оси X, тем ближе они друг к другу. Например, сравнение годовой выручки 30 предприятий.

Примеры: © GUI.ru, New York Times, Kate Jones

 

 

Иллюстрации

Показывают процесс или явление в неформализованном виде.

Иллюстрация

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

Примеры: © Athletics NYC, Christian Montenegro, журнал «Популярные финансы»

Комикс

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

Примеры: © Scenic Valley Driving School, Elliance

 

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


Автор: Юрий Ветров

источник: experiment.ru

по телефонам:
8(096) 042 45 63
8(067) 116 68 48
по e-mail:
cb.infographics@gmail.com
или отправить
нам сообщение
скачать бриф
© CreativeBot 2014-2017