x
 
Игорь
7 апреля 2015
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Сначала было два графика. Один отображал ссылки со страниц, другой — ссылки с доменов. Мы решили объединить эти значения в один график. Но обычно страниц ссылается всегда больше. Например 10 млн страниц и 16 тыс. сайтов. Мы решили сделать величины относительными свой оси и разделить цветами. Что думаете о таком решении?


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

Если бы графики пересекались, вообще получилась бы битва:

Ещё у вас тут, кажется, псевдокривые

То, что 10 тысяч одного соответствует на графике 16 тысячам другого, не имеет отношения к реальным данным, это просто побочный эффект выбранной визуализации.

Если есть задача показать зависимость нескольких величин от одной (например, отобразить в одной временной шкале два параметра одного процесса), используйте общую ось абсцисс, а сами графики ставьте друг над другом без пересечений:

Заодно стоит навести порядок (избавиться от легенды и лишних цветов, подписать месяцы где надо, успокоить наводилку — её и так выделит интерактивность):

Наводилка, кстати, странная: чё толку с того, что я навёл на конкретный день, если показывают мне всё равно цифры на начало месяца?

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

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

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

Поделиться
Отправить

Комментарии

Иван Титов
7 апреля 2015

График адресован специалистам, которые вряд ли что-то перепутают. Поэтому достаточно убрать серенькие горизонтальные линии снизу и сверху графика, чтобы избавиться от эффекта, о котором говорит Илья.

Петрыгин-Родионов Петр
9 апреля 2015

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

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

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


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Недавно всплыло

Как подружить иконки. Цвет 1 Поделитесь соображениями, как работать, путешествуя 8 Как написать хорошее резюме? 7 Несмотря на то, что между нами была договорённость о работе по ФФФ, клиент был в бешенстве 5