Дизайн графиков. Шкалы

Горизонтальная шкала

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

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

Стандартные графики ужасны. Внимание отвлекает контрастная сетка, подписи дат слишком длинные. 

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

Вертикальная ось

Вертикальная ось не всегда должна быть слева. Инвесторы и трейдеры используют понятие «правый край». Информация в правой части графика гораздо ценнее. Самая важная цена – текущая.

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

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

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

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

Шаг вертикальной шкалы выбирается делением её на несколько равных частей. Расстояние между делениями должно быть не слишком широким и не слишком узким. Например, от 40 до 90 пикселей. Деления не всегда можно подписать круглыми числами, но к этому нужно стремиться.

Двухсекционная шкала

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

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

Кварталы:

Месяцы:

Недели:

Дни:

Часы:

Для удобства расположим все шкалы рядом.

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

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

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

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

Среди известных систем такая шкала используется в терминале Блумберга.

Масштабирование

Графики должны масштабироваться, то есть подстраиваться под ширину экрана в нужном диапазоне. При этом график будет сужаться или расширяться, но только по горизонтали. Вертикальная ось не меняется.

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

При достижении критичной плотности нужно отбрасывать со шкалы каждое второе деление.

Масштабирование графика происходит по скроллу, но можно ввести кнопки плюс и минус.

Диапазоны

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

Шорткаты размещаются над графиком. Это ряд кнопок быстрого доступа, подписанных одинаково во всех финансовых системах. 1D означает 1 день, W значит неделя и так далее. YTD – диапазон от начала года до сегодня (year to date).

Клик на шорткат масштабирует график до нужного диапазона.

Навигация

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

Когда график сдвинут в прошлое, текущая цена скрыта за краем и линия графика упирается в границу без пунктира.

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

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

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

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

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

Также нужна кнопка сброса масштаба, которая возвращала бы оси к нормальному состоянию.

Нелинейные шкалы

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

За 100 % принимается самая левая точка графика в зоне видимости. На шкале напротив этой точки ставится отметка 100 %. Остальные деления пересчитываются в проценты относительно этой отметки.

Деления можно подписать другим способом. Вместо 100 % на шкале ставится отметка 0 %. Значения выше пишутся с плюсом, значения ниже пишутся с минусом.

Логарифмическая шкала еще важнее процентной. Без неё невозможно всерьез анализировать графики.

В финансовой аналитике важно не абсолютное изменение цены, а относительное. Например, рост цены акции от 100 до 200 долларов и от 1000 до 2000 долларов – это рост в 2 раза. Но на графике первая стадия роста будет крохотной, ведь она ничтожна по сравнению со второй.

Логарифмическая шкала строится так, что рост в N раз будет занимать одинаковую высоту в любом месте графика. 

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