Неочевидный выбор: количественная или качественная цветовая палитра?

Перевод статьи «When to use quantitative and when to use qualitative color scales»

Лиза Шарлотта Мут, дизайнер из Берлина, опубликовала на Datawrapper статью о сложностях выбора между качественной и количественной цветовой палитрой при визуализации данных разных типов. Заинтересовавшись ее мнением и аргументами по данному вопросу, мы решили перевести ее для вас.

Эта статья попытается ответить на следующий вопрос: когда следует использовать количественную цветовую палитру (последовательную или расходящуюся; например, голубой, синий, темно-синий), а когда — качественную палитру (например, красный, желтый, голубой)?

И небольшой дисклеймер: чтобы мне не оперировать длинными терминами количественная цветовая схема и качественная цветовая схема в этой статье, я буду часто употреблять менее корректные, но более удобные для чтения слова «оттенки» и «градиенты» для количественных цветовых схем и «тона» для качественных.

Итак, когда надо использовать оттенки? А когда — тона?

Используйте тона, когда у значений нет изначального порядка

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

Используйте оттенки или градиенты, когда у значений есть порядок

А вот когда вы можете упорядочить данные, представляемые цветом, используйте последовательную или расходящуюся цветовую палитру. Если, например, необходимо передать данные о безработице (4%; 6%; 8%), лучше отдать предпочтение именно количественной цветовой палитре.

Это правило применимо не только к тексту или числам. У шкалы Лайкерта («полностью не согласен», «не согласен», «где-то посередине», «согласен», «полностью согласен») или размеров одежды (XS, S, M, L, XL, XXL) также есть специфический порядок. Они тоже относятся к количественному типу данных, поэтому для их визуализации крайне рекомендуется использовать именно оттенки.

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

Используйте оттенки, чтобы подчеркнуть подразумеваемый порядок

Здесь разобраться помогут древовидные карты:

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

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

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

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

А если все-таки покрасить подразумеваемые значения в удобочитаемом графике?

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

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

Страница с деталями графика «Алгоритм Google» из The Economist от 8 июня, 2019

Сосредоточимся на точечной диаграмме в левом верхнем углу. Точечные диаграммы — это один из немногих видов графиков, где покраска по скрытым данным без их представления каким-либо дополнительным способом (позицией, длиной, и т.д.) удивительно хорошо работает.

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

И все же, чтобы понять этот график из The Economist, требуется несколько секунд. Обратите внимание, что точечную диаграмму справа проще прочитать, так как в ней совмещены два приема визуализации: политическая идеология показана позицией («левые» и «правые») и оттенком.

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

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

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

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

Используйте оттенки для выделения подкатегорий

Есть и другие причины красить качественные данные количественными цветовыми палитрами, а не качественными. Например, чтобы выделить под категории. Ниже представлен график из The Economist, который показывает, как это сделать:

Население в занимаемых территориях, сгруппированное по религиозной принадлежности The Economist, PDF

Мы видим две категории: «евреи» (голубой) и «арабы» (желтый). Под категориями же являются территории, которые представлены оттенками синего и желтого.

Вот похожий пример:

График NZZ

NZZ использует оттенки (зеленый и синий), чтобы помочь читателям заметить разницу между двумя категориями: Ältere («пожилые») и Jüngere («молодые»). Оттенки помогают различать подкатегории: какие слова пожилые люди и молодежь используют, чтобы сказать «сердцевина яблока».

(Кстати, и тому и другому графику цвета, в целом-то, и не нужны: все секции могут быть серыми с разделяющими их белыми линиями, так как каждая из подкатегорий объяснена текстом. Слова Gaza, Israel, Ältere, Gräutschi и так далее показаны на самих графиках, делая цветовое решение лишним.)

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

Используйте оттенки, чтобы разграничить первостепенные и второстепенные категории

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

График Лизы Шарлотты Рост

По сути, этот график превращает категории («в браке», «не замужем/не женат», «разведен/а», «вдова/вдовец») в подкатегории, так как они все поделены на две большие группы («первостепенные» и «второстепенные»). Если покрасить подкатегории градиентом, наш читатель все отлично поймет.

Используйте оттенки, чтобы сделать отдельные категории менее яркими и более удобными для чтения для людей, страдающих дальтонизмом

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

Ну, допустим. Тогда какой же цвет темнее, этот ⬤ или этот ⬤? И как насчет ⬤ и ⬤? Сюрприз! Два первых превратятся в ⬤ в серой градации. А два последних будут выглядеть как ⬤.

Для простых смертных судить о светлоте двух цветов, если у них разные тона, не так-то и просто. Поэтому «сделать так, чтобы визуализация работала в черно-белом исполнении» проще, если специалист по дата визуализации использует градиенты только одного тона.

Две причины — доступность и строгость — могут убедить вас выбрать оттенки, а не тона, при работе с категориями. Вот пример из The Financial Times:

График из The Financial Times

Но имейте в виду следующие особенности: во-первых, скорее всего, некоторые читатели будут пытаться придать цветам какой-то смысл. Даже если это не входило в ваши планы, они могут попытаться найти объяснение тому, почему использован градиент. «США изображены более темным цветом, так как имеют самые высокие показатели». Или: «… так как их данные имеют большую значимость в этой статье». Красить наобум нельзя.

Синтия Брюэр отмечала то же самое, когда говорила о представлении бинарных данных («да»/«нет», «общественный»/«частный», «присутствует»/«отсутствует») на картах:

Синтия Брюэр: «Рекомендации по выбору цвета для карт и визуализации», с. 136 по цитате в: «Визуализация в современной картографии», том 2, 1994. Курсив автора статьи.

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

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

Особенно если цветовые индикаторы не упорядочены и/или прокомментированы и/или выполнены лишь в одном тоне (от светло-голубого до темно-синего) вместо нескольких (от светло-желтого до темно-синего).

В-третьих, если хочется использовать градиент, старайтесь использовать оттенки только одного тона, если нет необходимости вводить еще один.

Спросите себя, какое ключевое послание вы хотите передать, и выделите участки, которые нужно сделать более заметными, с помощью другого тона и его оттенков, как «Europe» и «US» в этом графике:

График The Financial Times, который я слегка отредактировала

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

До этого момента, мы в основном смотрели на причины использовать оттенки вместо тонов. А вот причина использовать тона вместо оттенков:

Используйте тона, чтобы лучше обособить категории

В 2020 году, The Financial Times опубликовали график, в котором отобранные страны Европы были сгруппированы в зависимости от значительного/умеренного/небольшого роста чисел новых случаев заболевания Covid-19.

The Financial Times

Стивен Бернард и Джон Берн-Мердок, создатели этого графика, решили использовать тона для разных стран в каждой группе.

Я спросила Стивена Бернарда, почему он предпочел тона вместо оттенков. И вот что он ответил:

«Логика в такой покраске в том, чтобы сделать линии максимально отличными друг от друга на каждом графике, но, в то же время, сохранить сортировку во всех четырех графиках. […] Тот подход, который я применил, позволяет зрителю понять из первого графика, что темно-синий представляет собой первое место, розовый — второе, голубой — третье, а зеленый — четвертое. Так, зритель может легко считать данные с других трех графиков».

Когда я посмотрела на график Стивена, я не поняла, что темно-синяя линяя расценивается как первая, как и то, что розовая линия идет второй, и так далее. Читатели (как и я) не ожидают, что категории, которые отображаются тонами, могут обыгрывать еще и порядок. Если бы у категорий был порядок, их стоило бы покрасить градиентом.

И все же мне кажется, что тона неплохо работают в графике Стивена. Ведь, как всегда, стоит вопрос: чем оправдан ваш выбор типа палитры? В данном случае, The Financial Times выбрали качественную палитру, чтобы помочь читателям лучше различать линии, переплетающиеся на графике, вместо того, чтобы подчеркнуть их порядок.

Выводы

Итак, благодаря Лизе Шарлотте Мут, мы можем подвести следующие итоги:

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

Список литературы

1. Синтия Брюэр: «Рекомендации по выбору цвета для карт и визуализации», с. 136 по цитате в: «Визуализация в современной картографии», том 2, 1994.

2. Adobe Spectrum: Цвет для визуализации данных, 2019.

3. Юусо Копонен, Джонатан Хильден: «Руководство по визуализации данных», 2019, с. 73-79.