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

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

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

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

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

#data_visualization

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

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

#data_visualization #graphics

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

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

#data_visualization #dashboard

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

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

Канал Ильи. #data_visualization

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

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

#data_visualization #time