Визуализация информации

Больше похоже на это

Этапы создания сайта.

от Check check

Оперкарта

от Геннадий Колесник

Интерфейсы

от Уткин Андрей

Информационные продукты и услуги

от Сайфурова Индира

Сети

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

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

Многие переменные

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

Таймлайн

Используется для визуализации всего, что связано со временем, скажем, график работ (к примеру, Gantt Chart) или лунный цикл.

Визуализация информации

Применение

Использование в веб-сервисах

Отображение связей

Поисковик, работающий, как ментальная карта и имеющий внешний вид облака тегов

Quintura ;

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

Geni; Bacardi B-Live Share

Экспериментальная навигация

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

Venables Bell & Partners

Компанией предложен интересный вариант отображения связей между страницами в вики-системе

Ronald The и Benedikt Gross

Сложные статистические данные

Специальные проекты по сбору статистики, отображающие сложные политические или экономические данные

GapMinder; Akamai Real-Time Web Monitor Every Moment Now; Daytum

Проекты, совмещается сразу несколько инструментов визуализации

New York Times Visualization Lab; Washington Post; USA Today

Привязка событий ко времени

Классические инструменты управления проектами, использующие диаграмму Гантта

KommandCore; МегаПлан

Сервисы, показывающие пользовательский контент в порядке его появления

Plurk; Dipity; This Moment; Flickr Clock

Отображение процесса

Навигация по рабочему процессу и его наглядное отображение

Target Process ;

Сервисы, подходящие для создания различных информационных фильтров

Yahoo! Pipes; Google Analytics

Отслеживание метрик

Инструменты для работы с биржевой информацией

Yahoo! Finance; Google Finance; BFM.ru; TIKR.ru; E*Trade; TradeKing; Quote.ru

Инструменты управления agile-проектами

Acunote; RallyDev

Картография и привязка данных к географии

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

BrightKite; Nokia Friend View; Yahoo! FireEagle; Google Latitude

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

Cost2Drivе; Banki.ru

Карты городов и стран, показывающие их географию, топографию, дороги и конкретные объекты

Яндекс.Карты; Google Maps; Yahoo! Maps; MapQuest

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

Встроенные в обычные веб-сервисы модули отчетности о популярности пользователя и его контента

Flickr; Google Reader; ЖЖ; Free-Lance.ru

Специализированные сервисы анализа статистики посещений и трафика

Google Analytics; ClickTale; Alexa; Google Trends; FeedBurner

Применение на практике

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

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

Чертежи и схемы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Present.me

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

Timeline JS

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

OmniGraffle

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

Balsamiq

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

Tableay

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

Infogr.am

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

Visual.ly

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

Easel.ly

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

Pictochart

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

Создание видео

Видеопрезентации

VideoScribe

Объясняшки

Moovly

Wideo

PowToon

GoAnimate

Видеоролики

WeVideo

Powtoon

Animotо

Паттерны визуализации

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

Иллюстрации

Комикс

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

Иллюстрация

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

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

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

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

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

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

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

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

Круговая диаграмма связей

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

Карты

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

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

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

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

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

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

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

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

Картограмма

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

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

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

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

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

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

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

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

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

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

Матрицы

Календарь

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

Таблица

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Диаграмма Венна

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

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

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

Граф и дерево

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

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

Облако тегов

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

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

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

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

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

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

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

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

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

Гистограмма

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

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

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

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

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

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

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

Графики

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

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

Линейный график

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