Тарас Бакусевич написал, как улучшить визуализацию данных.

— Располагайте положительные и отрицательные значения по разные стороны базовой линии диаграммы;
— Гистограмму начинайте с нулевых значений. Усечение приводит к искажению данных;
— Для линейной диаграммы адаптируйте масштаб оси Y, чтобы она не была слишком плоской;
— В линейной диаграмме маркеры, представляющие данные, соединены линиями. Люди могут ошибочно принимать за данные также и эти линии. Если ваши данные и временная шкала провоцируют такое восприятие, используйте вертикальную гистограмму;
— Не используйте сглаженные линейные диаграммы. Они искажают стоящие за ними данные;
— Ограничивайте количество секторов (5–7) на круговой диаграмме. Самые маленькие сегменты можно сгруппировать в «Другое»;
— Вместо легенды наносите метки прямо на диаграмму, но не наносите их на сегменты круговой диаграммы;
— Есть общепринятые способы упорядочить сегменты: 1) Самый большой на 12 часов, остальные в порядке убывания по часовой стрелке; 2) Самый большой на 12 часов, второй по величине после него по часовой стрелке, третий на 11 часов, остальные в порядке убывания по часовой стрелке;
— Не сортируйте данные по алфавиту. Размещайте самые большие значения в начале диаграммы;
— Не используйте тонкие кольцевые диаграммы. Их сложно читать;
— Выберите подходящую цветовую палитру. Типы палитр: 1) Качественная; 2) Последовательная; 3) Дивергентная;
— Старайтесь не поворачивать метки. Возможно, для этого придётся вертикальную гистограмму заменить на горизонтальную;
— Помогайте пользователям исследовать данные, изменяя параметры, тип визуализации, временную шкалу.

#data_visualization

Тарас Бакусевич написал, как улучшить визуализацию данных.

— Всегда начинайте гистограммы с нулевого базового уровня. Иначе воспринимаемая разница в высотах прямоугольников будет отличаться от реальной разницы показанных ими значений;
— Для линейных диаграмм можно адаптировать масштаб оси Y, чтобы график не был слишком плоским (пусть он занимает 2/3 диапазона оси Y);
— Будьте осторожны с двухосными диаграммами, на которых отображается два ряда данных в разном масштабе. Люди часто ошибаются при их чтении;
— Ограничивайте количество секторов на круговой диаграмме. Оставьте 5—7 сегментов, а самые маленькие сгруппируйте в «Другое»;
— Перемещайте подписи из легенды прямо на диаграмму, но не на сами графические элементы диаграммы (понизит их читаемость);
— Упорядочивайте элементы диаграммы по значениям, а не по подписям (в алфавитном порядке), чтобы легко можно было увидеть самое большое значение, второе, самое маленькое и так далее;
— Чем тоньше кольцевая диаграмма, тем сложнее её читать.

In English. #data_visualization

Олег Бурцев, Елизавета Горлова и Арина Шулева поделились советами о дизайне диаграмм. Некоторые советы в дополнение к рекомендациям Тараса Бакусевича.

— В круговых диаграммах используйте контрастные цвета вместо тонов одного цвета;
— В линейных диаграммах не используйте больше 5–7 линий;
— Выбирайте разные стили линий для выделения, сравнения и подчёркивания иерархии. Например, данные за прошлый год можно показать пунктиром;
— Не используйте диаграммы с областями, если хотите показать больше 3–4 показателей;
— Диаграммы с накоплением подходят, чтобы показать суммарную величину и понять, как она распределяется по показателям;
— Оставляйте небольшие отступы между столбцами одной группы, чтобы облегчить восприятие диаграммы;
— Добавляйте значения над столбцами диаграммы, когда это возможно. Если нет, показывайте их в подсказке при наведении;
— Воронкообразные диаграммы используйте, если этапов 4 и более;
— Сравнивать этапы проще, если это выравненная по левому краю столбчатая диаграмма. Но если надо придерживаться формы воронки, высоту прямоугольника каждого из этапов лучше сделать пропорциональной его ширине;
— Каскадная диаграмма показывает влияние положительных и отрицательных изменений на изначальное значение. Обозначайте цветом характер изменения;
— Для построения пузырьковой диаграммы ограничивайте количество значений;
— Дайте возможность скрывать показатели. Выключатель в виде чекбокса можно объединить с квадратом легенды;
— Добавляйте элементам диаграммы состояние при наведении, чтобы пользователю было легче фокусироваться;
— Продумайте, что делать с подписями, если значений будет слишком много. Если скрывать часть значений нельзя, можно занять диаграммой всю ширину экрана и при необходимости отображать скрол.

#data_visualization

Андрей Маркелов написал о шкалах в дизайне графиков.

— Построение графика начинается с выбора осей. Чаще всего это 2 оси. В основе оси — шкала (линия с делениями);
— Вертикальная ось не всегда должна быть слева. В финансовых системах её располагают справа (ближе к более актуальной части графика). А ещё текущую цену выделяют цветом и пунктирной линией от края графика;
— Легче всего читается толщина графика от 1,3 до 1,6 пикселей;
— Вертикальную шкалу нужно подстраивать под значения графика в видимой области. Нижняя точка должна быть чуть ниже минимума на графике, а верхняя точка — чуть выше максимума;
— Шаг вертикальной шкалы выбирается делением на несколько равных частей, чтобы расстояние между делениями было не слишком широким и не слишком узким (от 40 до 90 пикселей). В идеале должны получаться круглые числа;
— Двухсекционная шкала, в которой используется сразу два масштаба, помогает видеть, например, какой отображается год на месячной шкале (используется в терминале Блумберга);
— Шорткаты позволяют быстро посмотреть график за конкретный период. Например, W — за неделю, YTD — от начала года до сегодня. Обычно они размещаются над графиком;
— В финансовых системах графики часто смотрят в процентах. За 100% принимается самая левая точка графика в зоне видимости. Остальные деления пересчитываются в проценты относительно этой отметки;
— Логарифмическая шкала строится так, что рост в N раз будет занимать одинаковую высоту в любом месте графика. Можно сравнивать рост цены в 2 раза полвека назад и в прошлом году, и видеть одинаковое изменение.

Смотрите также, как делать подписи для таймсерий. #data_visualization

Андрей Маркелов написал о линиях в дизайне графиков.

— Важно правильно выбрать толщину линии. Толщина в 1,3 пикселя даёт лёгкую воздушность. Стоит добавить скругление изломов;
— Если отображаются 2 графика, для облегчения восприятия к первому добавляют градиент: 15% прозрачность в верхней точке и 0% у горизонтальной оси;
— Линиям добавляют обводку, равную толщине линии, чтобы избежать шума на стыках;
— Сканер позволяет узнать значение параметра в любой точке графика. Это вертикальная линия, накладывающаяся поверх графика и следующая за курсором. В месте пересечения с графиком ставится точка и отображается значение параметра. Под сканером отображается дата (или то, что находится на горизонтальной оси). Сканер хорошо работает для нескольких графиков;
— В финансовых системах используются индикаторы — миниграфики под основным графиком. Например, столбчатая диаграмма, показывающая спред или объём торгов, или график RSI;
— Японские свечи — особая столбчатая диаграмма. Прямоугольник показывает изменение цены (её значение при открытии и закрытии торгового дня), а линия показывает минимальное и максимальное значение, которого достигала цена в течение дня.

#data_visualization

Андрей Маркелов написал о диаграммах рассеяния.

— На английском их называют Scatter Plot. Они показывают зависимость двух параметров. Например, на горизонтальной оси — размер зарплаты, на вертикальной — уровень счастья, а каждая точка на диаграмме — человек с конкретным размером зарплаты и уровнем счастья;
— Кроме положения на осях у точек могут быть визуальные отличия: цвет, форма и размер фигуры. Цветом можно показать пол человека, размером вес, а формой — семейное положение, что позволит увидеть связь, например, между уровнем зарплаты и весом человека;
— Если используется один цвет, а плотность расположения фигур очень высокая, их можно наложить в режиме смешивания Multiply (свойство есть в CSS). Диаграмма не будет блеклой и позволит оценить плотность данных;
— Иногда показывают «среднюю линию» — линию, проходящую максимально близко ко всем точкам в среднем. Она может быть не прямой;
— На диаграмме можно показать несколько наборов данных со своими средними линиями;
— В интерактивном формате легенду можно поместить в верхний левый угол и дать возможность скрывать отдельные наборы данных;
— Чтобы показать, какой точка прошла путь, можно отобразить на графике её хвост с временными отметками. Чтобы не загромождать, график движения можно показывать под диаграммой по нажатию на конкретную точку;
— Иногда на диаграмме отображают тысячи точек. Тогда в иллюстративных целях можно нанести области плотности, похожие на тепловые карты;
— Бывает, что конкретные точки менее важны, чем общее понимание плотности их распределения. Тогда точки (фигуры) можно заменить на ступенчатый градиент, показывающий плотность фигур в разных областях диаграммы.

#data_visualization

Гил Боуник написал о манипулировании графиками.

— Такие графики будут вводить в заблуждение, оставаясь на 100% точными;
— Если показатели за последние 1–2 месяца не очень, можно их опустить. Увидев такой график, просите показать свежие цифры;
— Если видны пики, показывающие неустойчивую динамику показателя, можно изменить масштаб: например, показывать годы вместо кварталов. Просите увеличить масштаб;
— Если показатели роста выглядят плохо, можно показать кумулятивные данные;
— Если рост недостаточно внушительный, можно поджать график по оси X или изменить базовую линию (или всё это вместе). Прежде, чем изучать тенденции, обратите внимание на ось Y;
— Когорта — группа клиентов, которые совершили одинаковое действие в заданный промежуток времени;
— Если графики когорт показывают снижение показателей, поместите данные на график, основанный на событиях. Но опытные менеджеры и инвесторы, скорее всего, захотят углубиться в когортный анализ;
— Также можно отфильтровать данные, например, показывать пользователей с жёсткой и мягкой активацией. Изучая график, спрашивайте, все данные предоставлены или их часть;
— Активация — точка, в которой пользователь находит ценность в продукте и предоставляет взамен ценность для бизнеса. Пользователи с жёсткой активацией прошли переломный момент с точки зрения использования продукта и ценности, которую они получили от него. Пользователи с мягкой активацией попробовали сервис и даже заплатили за него, но не прошли этот переломный момент.

In English. #data_visualization

Евгений Бондковски написал, как сделать графики и диаграммы привлекательнее. Исходный пост дополнил комментариями Романа Бунина.

— Облегчите сетку вспомогательных линий: уменьшите их количество, толщину, яркость; оставьте только горизонтальные или вертикальные линии; уберите засечки и стрелки на осях, уменьшите подписи. Иногда сетку можно убрать вовсе;
— Скруглите углы (почти все интерфейсы вокруг такие) и добавьте градиентов. Ими можно залить площади под линейными графиками и столбцы диаграмм;
— Статья об опасности скругления баров (In English);
— Заливка под линейными чартами — холиварный вопрос. Её стоит использовать, если это накопительная метрика и надо показать «интеграл под кривой». И точно не стоит делать его с градиентом до белого — создаётся впечатление, что график оторвали от оси и это только часть графика;
— Выберите дополнительные цвета, близкие по тону основному цвету бренда или презентации;
— Главный параметр можно выделить, показав остальные градиентами серого или оттенками второго цвета;
— Автор предлагает делать градиенты под фирменный стиль или цвета сайта. Если это категорийные данные, главная задача — быть различимыми, чтобы взгляд разделял разные значения. Полный гайд по цветам в датавизе (In English);
— Цвета могут добавить в диаграммы лишней информации. Избегайте пары красного и зелёного цвета, если только вы не показываете положительные и отрицательные значения. Выбирайте цвета одинаковой насыщенности, чтобы какие-то параметры случайно не стали выглядеть второстепенными;
— Второстепенные параметры (график за прошлый год или планируемый прирост) можно показывать пунктирной линией или штриховкой;
— Используйте цвет бренда, даже если это красный цвет и вы показываете рост продаж;
— В странах с цветовой привязкой «хорошо/плохо» это прям стрелять себе в ногу;
— Старайтесь разные параметры показывать разными типами диаграмм, подходящими для отображения таких данных;
— Подборка самых важных книг по визуализации данных.

#data_visualization

Таня Мисютина поделилась советами, как упорядочить визуализацию.

— Если на дашборде надо не просто показать общую ситуацию и высокоуровневые данные, но и объяснить, почему так сложилось, в визуализации должна быть та сложность, что была в исходных данных. Дашборд не может быть примитивным;
— Внутренняя сложность не прощает внешней небрежности и запутанности, они сразу оборачиваются нечитаемостью и перегруженностью;
— Используйте один формат для визуализации одних и тех же данных, чтобы не сбивать пользователя с толку разными представлениями;
— Разное должно выглядеть по-разному. Скорее всего, так и будет, если выбирать форматы, отражающие суть данных;
— Придерживайтесь единых и логичных правил отображения элементов на экране (заголовков, фильтров, графиков и конролов) для всех состояний визуализации. Учитывайте иерархию показателей и срезов — от большого к малому, от важного к менее важному;
— Продумайте схему переходов между состояниями визуализации, разными дашбордами в системе. Ни один экран не должен быть «вещью в себе»;
— Используйте одинаковые термины для обозначения одинаковых понятий.

#data_visualization #dashboard

Илья Бирман написал о вертикальном масштабе графика.

— Тафти рекомендует подбирать его так, чтобы в среднем угол наклона графика был примерно 45°;
— График нужен для сравнения данных, выявления тенденций и закономерностей;
— Даже сжимая график по вертикали, мы не снижаем его разрешение, а повышаем. Если средний угол наклона — 45°, лучше видны пологие участки и резкие перепады.

#data_visualization

Михаил Озорнин написал о масштабе временных рядов.

— Временные ряды (Time series) — графики, где горизонтальная ось — это время;
— Если надо следить за параметрами сложной системы, графики помогут заметить выбросы (отличия от нормального поведения), паттерны, видеть динамику изменения параметров;
— Чтобы сравнивать разные параметры системы и видеть связи, графики проще всего расположить один под другим;
— Иногда их накладывают друг на друга на одной оси, но так делать не надо;
— Чтобы все графики влезли, приходится уменьшать вертикальный масштаб, и они могут стать нечитаемыми;
— Решение: поделить график по вертикальной оси на несколько слоёв, раскрасить попадающие в разные слои части графика (чем больше значение, тем ярче), сложить слои один на другой (похоже на карту глубин);
— В Square сделали плагин для таких визуализаций в D3.

#data_visualization #time