Классификация графиков и их назначение 1

Публикую материал, написанный Юрием Ветровым (руководителем UI Modeling Company, которая занимается проектированием пользовательских интерфейсов) на www.experiment.ru

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

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

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

График

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

И дальше больше, смотрите оригинал статьи по следующим видам визуализаций:

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

• Дерево
• Ментальная карта
• Формализованные структурные диаграммы
• Диаграмма Венна-Эйлера
• Плоское дерево

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

• Формализованная блок-схема
• Неформализованная блок-схема
• Диаграмма циклического процесса
• Диаграмма Сэнки

Матрицы

• Календарь
• Таблица

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

• Временная шкала
• Диаграмма Гантта

Карты

• Географическая карта
• Фотографическая карта
• Дорожная карта
• Тематическая карта
• Картограмма

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

• Круговая диаграмма связей
• Линейная диаграмма связей
• Связи на карте
• Иллюстрация
• Комикс