«Ящик с усами», «спагетти» и «полярные часы»: знакомимся с типами диаграмм и учимся выбирать подходящие
14 августа 2024
Подпишитесь на наш телеграм
Там мы делимся «квинтэссенцией» своей экспертизы — постим выжимки статей, анализируем UX-решения, делаем разборы продуктов, делимся образовательными курсами и чек-листами.
Визуализация данных — это настоящее искусство. Психология, дизайн и аналитика встречаются, чтобы превратить информационный шум в понятную и эстетичную картинку. Но в этом искусстве есть свои правила и закономерности, которые помогут создавать крутые изображения и управлять вниманием зрителя. Самое время с ними познакомиться!
Краткий ликбез: кому и зачем нужна визуализация
Визуализацию данных используют бизнес-аналитики, маркетологи, топ-менеджеры и даже школьные учителя. Графические элементы позволяют быстрее и проще понять сложные данные. Например, тренды и аномалии становятся очевидными на графиках.
Также визуализация помогает выявить скрытые закономерности, которые трудно заметить при анализе сырых данных. Это особенно полезно для прогнозирования и стратегического планирования. И действительно, на основе данных, представленных в визуальной форме, легче принимать обоснованные решения. Примеры: если график показывает снижение производительности, можно оперативно принять меры для её улучшения.
Наконец, визуализация данных облегчает передачу информации другим людям. Это язык, понятный всем. Поэтому диаграммы и графики часто используются в отчетах и презентациях для наглядного объяснения ситуации.
Также визуализация помогает выявить скрытые закономерности, которые трудно заметить при анализе сырых данных. Это особенно полезно для прогнозирования и стратегического планирования. И действительно, на основе данных, представленных в визуальной форме, легче принимать обоснованные решения. Примеры: если график показывает снижение производительности, можно оперативно принять меры для её улучшения.
Наконец, визуализация данных облегчает передачу информации другим людям. Это язык, понятный всем. Поэтому диаграммы и графики часто используются в отчетах и презентациях для наглядного объяснения ситуации.
Подробнее о визуализации данных мы писали в отдельной статье. Разобрали там популярные инструменты и поделились своим опытом: заходите почитать!
Как стильно и эффектно визуализировать данные: главные правила
Все бонусы визуализации доступны только в том случае, если она сделана качественно. Если тип графика выбран неверно, картинка перегружена информацией или, наоборот, данные разобщены и показаны на нескольких разных графиках, зритель только ещё больше запутается или попросту не поймёт, что ему хотят сказать.
Что же делает визуализацию хорошей и помогает ей работать? Вот базовые правила.
Определите, какие типы графиков и диаграмм подходят для ваших данных. Это зависит от целей и от числа элементов. Ниже в описании видов диаграмм и графиков мы разбираем, для каких ситуаций подходит каждая из них.
Что же делает визуализацию хорошей и помогает ей работать? Вот базовые правила.
Определите, какие типы графиков и диаграмм подходят для ваших данных. Это зависит от целей и от числа элементов. Ниже в описании видов диаграмм и графиков мы разбираем, для каких ситуаций подходит каждая из них.
Термины «график» и «диаграмма» часто используются как взаимозаменяемые. Но всё же разные виды графиков обычно показывают зависимости между переменными, то есть отображают данные на координатной плоскости. Простыми словами, график — это диаграмма, в которой есть оси координат.
Диаграмма должна быть легко читаемой, без запутанных элементов. Сохраняйте паттерны и символы, привычные зрителям:
Чистота и простота дизайна являются ключами к тому, чтобы сделать вашу визуализацию данных максимально понятной и эффективной. Убирайте лишние детали, такие как градиенты, тени и 3D-эффекты, которые могут отвлекать внимание, и фокусируйтесь на том, чтобы оставить только важную информацию.
Избегайте разделения схожей информации на множество отдельных графиков, если ваша цель — сравнение и анализ.
Для обширного спектра данных и категорий, напротив, важно разбить графическое изображение на несколько сегментов: это лучше, чем одно изображение, перегруженное информацией. Например, 4−5 кривых линейного графика сложно воспринять.
Не забудьте дать диаграмме понятный заголовок и добавить к ней подобную, но лаконичную легенду. Так, в легенде должны быть понятно указаны временной промежуток и единицы измерения.
Старайтесь не использовать разные виды графиков, линейных, столбчатых и других, для материалов аналогичного содержания. Это связано с тем, что аудитории нужно время на адаптацию и осмысление каждого нового формата. По той же причине графики лучше отрисовать в одной цветовой гамме: чаще всего компании используют для этого свои «фирменные» цвета.
Итак, ликбез пройден. А теперь к самому интересному: разбираем типы графиков и диаграмм!
- время — годы, месяцы и кварталы — размещаются по горизонтальной оси;
- количественные величины — по вертикальной;
- диаграмма читается слева направо;
- если столбики, доли и другие элементы диаграммы окрашены, используйте контрастные цвета без градиентов;
- для позитивных значений (например, производство продукции) обычно используют зеленые, синие, желтые оттенки; для негативных (достижения конкурентов, объем вредных выбросов, риски) — красные, серые.
Чистота и простота дизайна являются ключами к тому, чтобы сделать вашу визуализацию данных максимально понятной и эффективной. Убирайте лишние детали, такие как градиенты, тени и 3D-эффекты, которые могут отвлекать внимание, и фокусируйтесь на том, чтобы оставить только важную информацию.
Избегайте разделения схожей информации на множество отдельных графиков, если ваша цель — сравнение и анализ.
Для обширного спектра данных и категорий, напротив, важно разбить графическое изображение на несколько сегментов: это лучше, чем одно изображение, перегруженное информацией. Например, 4−5 кривых линейного графика сложно воспринять.
Не забудьте дать диаграмме понятный заголовок и добавить к ней подобную, но лаконичную легенду. Так, в легенде должны быть понятно указаны временной промежуток и единицы измерения.
Старайтесь не использовать разные виды графиков, линейных, столбчатых и других, для материалов аналогичного содержания. Это связано с тем, что аудитории нужно время на адаптацию и осмысление каждого нового формата. По той же причине графики лучше отрисовать в одной цветовой гамме: чаще всего компании используют для этого свои «фирменные» цвета.
Итак, ликбез пройден. А теперь к самому интересному: разбираем типы графиков и диаграмм!
Какие бывают виды графиков
Чёткая классификация по видам визуализаций тоже пока не составлена, поэтому мы выделили свою, разделив все виды на четыре группы: графики, популярные диаграммы, необычные диаграммы и гибридные визуализации.
Линейный график (Line Chart)
Выглядит как точки, соединенные кривой, и помогает увидеть тренды и паттерны во временных рядах или других непрерывных данных. Линейные виды графиков хорошо подходят для работы с изменением данных с течением времени и сравнения нескольких параметров одновременно — желательно не более 4, иначе график будет перегруженным. Такие виды статистических графиков можно найти везде, даже в школьных учебниках.
Источник: Recording Industry Association of America
Гистограмма (Bar Histograms)
Тип линейных графиков, который обычно показывает распределение одной переменной на каком-то временном промежутке. Каждый набор столбцов изображает отдельную категорию, а высота столбца соответствует величине значения. Такой вид графиков как гистограмма часто используется для сравнения данных и исследования распределений.
Источник: Институт бизнес-аналитики Сергея Колоколова
Столбчатый график (Bar Graph)
Сравнение данных с помощью вертикальных или горизонтальных столбцов разной длины. Каждый столбец соответствует отдельной категории или значению, что делает этот тип графика удобным для наглядного сравнения количественных данных. Чем длиннее столбец, тем больше значение. Столбчатые диаграммы часто используются в отчетах, презентациях и статистических исследованиях для иллюстрации важных трендов и различий между группами данных. Визуально они похожи на гистограммы, но у тех шкала данных непрерывная.
Источник: 01math.com
Популярные диаграммы
Эти виды диаграмм или графиков вы наверняка встречали в учебных и методических материалах, презентациях и отчетах, ведь они используются с давних времён. Например, всем известная круговая диаграмма «пирог» существует с 1801 года! Зачастую именно классика — лучшее решение, ведь она привычна и понятна.
Круговая диаграмма (Pie Charts)
Один из наиболее популярных типов диаграмм для компьютерной визуализации данных. Представляет собой круг, разделенный на секторы, пропорциональные значениям данных. Каждый сектор соответствует определенной категории или подкатегории, а формат диаграммы позволяет быстро сравнивать доли. Круговые диаграммы используются там, где важно уделить внимание пропорциональным соотношениям.
Источник: ru.hexlet.io
Диаграммы-области (Area Chart)
Вид графического представления данных, где области под кривой отражают количество или долю определённого параметра. Они часто используются для отображения трендов и сравнения данных во времени. Диаграммы-области хорошо подходят для выявления общих закономерностей и изменений в данных, а также для увеличения визуального воздействия и понимания информации.
Источник: kaiten.ru
Столбчатая с накоплением (Stacked Bar Cart)
Типы графиков данных, показывающих, какие значения выше. Визуализирует данные в виде столбцов, расположенных один над другим. Каждый столбец представляет собой категорию, а его высота отображает общее значение, составленное («накопленное») из нескольких подкатегорий. Такая диаграмма помогает сравнивать не только общие значения, но и их составляющие, делая анализ данных более наглядным и информативным.
Источник: baguzin.ru
Необычные диаграммы
Эти типы визуализаций выглядят экстравагантно, но именно поэтому они привлекают внимание. Используйте их, чтобы показать зрителям: вы держите руку на пульсе! Но помните: наглядность и ясность важнее всего, а потому убедитесь, что такая диаграмма хорошо решает ваши задачи.
Диаграмма «спагетти» (Spaghetti Charts)
Необычная диаграмма, которая отображает перемещение объекта или процесса в пространстве с учётом времени. Выглядит как сплетение линий, напоминающее скрученную вермишель. Этот график используется для визуализации потоков работы, перемещения людей или транспортных средств. Диаграмма спагетти может быть эффективным инструментом для выявления узких мест в процессах и оптимизации потоков движения.
Источник: LinkedIn
Ящик с усами (Box Plot)
На этом графике данные отображаются в виде квартилей — статистических показателей, которые делят набор данных на четыре части. График показывает распределение данных на основе пяти числовых свойств: минимум, первый квартиль, медиана, третий квартиль и максимум. Усы указывают на величину данных за пределами межквартильного диапазона, что помогает выявить выбросы. «Ящик с усами», который также называют диаграммой размаха или коробчатой диаграммой, эффективен для анализа симметрии и разброса данных, а также сравнения наборов данных.
Источник: habr.com
Географическая диаграмма (Map Charts)
Эта визуализация отображает информацию на карте, визуально представляя её распределение по географическим регионам. Такие диаграммы показывают тенденции и связи между областями на карте. Удобны для анализа геоданных, например, продажи в разных регионах, показы рекламы по странам и другие факторы, где важно увидеть пространственные закономерности.
Источник: pikabu.ru
Стрим-график или график потока (Stream Graph)
Такие типы графиков зависимости отображают изменения во времени с учетом вклада различных категорий или переменных. В отличие от традиционных столбчатых или линейных графиков, стрим-график представляет основные данные в виде цветных слоев, расположенных друг над другом. Такой подход позволяет наглядно отслеживать изменения вклада каждой категории в общий объем данных и выделять тенденции. Стрим-графики широко используются в дизайне информационных дашбордов.
Источник: templates.visual-paradigm.com
Пузырьковая диаграмма (Bubble Charts)
Популярный вид графиков для статистики, отображает данные в виде круговых маркеров разного размера. Каждый маркер содержит три переменные сразу: две числовые и одну категориальную. Размер круга отражает величину одной из числовых переменных, а позиция по осям определяется другими двумя. Пузырьковые диаграммы эффективно позволяют визуализировать трехмерные данные и сравнивать несколько показателей одновременно.
Лучевая диаграмма (Sunburst)
Представляет информацию в виде круговой диаграммы, разделенной на сектора. Каждый сектор радиально разделяется на подсекторы, что позволяет иерархически отображать данные. Sunburst эффективно отображает структуру данных и их относительные доли, делая ее удобной для сравнения различных уровней детализации. Эта необычная диаграмма широко применяется в аналитике данных и визуализации информации.
Источник: findsurgery.lt
Полярные часы / Радарная диаграмма (Polar Clock)
В этой диаграмме точки — значения данных — расположены на площади круга. Расстояние от центра до точки указывает на величину значения, причем чем дальше точка, тем величина больше. На внешнем крае диаграммы находятся метки, обозначающие категории данных.
Источник: upravlenie-riskami.ru
Диаграмма Ганта (Gantt chart)
Эта диаграмма, разработанная известным теоретиком менеджмента Генри Гантом, обычно показывает распределение задач по времени. На ней четко видно последовательность выполнения задач, их продолжительность и зависимости между ними. Эта необычная диаграмма широко используется в проектном менеджменте для планирования и отслеживания выполнения задач. Главное преимущество — визуализация процесса работы и возможность быстрого выявления задержек или узких мест. Обычно включает даты начала и завершения заданий, контрольные точки, исполнителей разных функций.
Источник: atlassian.com
Кольцевая диаграмма (Donut Chart)
Как и круговая диаграмма, кольцевая, или «бублик», представляет собой круг, разделенный на сектора. Каждый сектор соответствует определенной категории и пропорционален её значению. Различие здесь только в форме: у кольцевой диаграммы вырезан фрагмент центра, что делает её более лаконичной.
Источник: alexkolokolov.com
Диаграмма рассеяния «точечная», «диаграмма распределения» (Scatter Plot)
Точки этой диаграммы представляют отдельные значения на двух осях координат, что позволяет исследовать связь между переменными. Такие типы графиков данных могут быть использованы для выявления неочевидных закономерностей и визуализации сложных взаимосвязей между данными и в результате стать инструментом анализа и принятия решений.
Источник: support.tulip.co
Гибридные типы визуализаций
Что будет, если взять две разных диаграммы и объединить их? В некоторых случаях это поможет представить данные более наглядно и лучше показать взаимосвязи между ними. Некоторые из таких смешанных визуализаций распространены довольно широко: представляем вам типы таких графиков и рассказываем, какие подойдут для вашей визуализации.
Гистограмма с несколькими осями (Multi-Axis Charts)
Объединяет столбчатую диаграмму и линейный график. Для её построения берут две оси Y и одну ось X, отображающую категории данных. А данные отображаются как столбцы разной высоты, расположенные вдоль нескольких осей. Этот формат позволяет сопоставить различные категории по нескольким параметрам одновременно, для параллелей или сравнений между ними.
Источник: 4.bp.blogspot.com
Диаграмма Венна
Пожалуй, самая «мемная» из всех. Она состоит из пересекающихся кругов, обозначающих совместные и уникальные характеристики различных групп. Каждый круг — это множество элементов, а пересечение кругов показывает общие значения между группами. Диаграмма позволяет анализировать сходства и различия в удобной визуальной форме, даже если эти параметры забавные или абсурдные.
Источник: pressa.tv
Изучая, какие есть виды графиков, не забывайте и про обычные таблицы и списки: они также бывают полезны. Иногда такие текстовые описания служат прекрасной альтернативой диаграммам и могут заменить их, при этом дизайн таблицы или списка можно сделать быстрее и дешевле. Простые методы представления данных не теряют актуальности, ведь главное здесь — простота и понятность для зрителя.
Комментарии к статье
Комментарии: 0