Совет по цвету для визуализации данных с помощью D3.js

Использование цвета в мире посткатегории 20

D3.js сделал так много для продвижения практики и теории визуализации данных. Без особых усилий вы можете найти примеры визуализации алгоритмов, времени, механических принципов, гендерной дискриминации и, да, даже армии не совсем маленького француза, движущегося через Россию.

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

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

Конечно, это не единственный цвет, который вы видите, часто вы все еще видите CSS «синий», «красный» и «черный». И это не только в D3 - палитра Tableau находится прямо в списке цветовых схем, чтобы ваша диаграмма выглядела как любой другой продукт визуализации данных, когда-либо созданный. Одним из основных изменений в недавно выпущенном D3 v5 является окончательное избавление от этой цветовой шкалы категории 20. Интегрирован в эту версию и, вероятно, там, чтобы помочь утешить тех, кто находится во время их потери, является d3-scale-chromatic, который в основном является оберткой вокруг проверенных и настоящих цветовых весов Cynthia Brewer.

Поле визуализации данных изобилует предупреждениями о том, что Color is Hard. Но цвет мощный. Если вы не можете выбрать цветовую схему, основанную на фундаментальных принципах восприятия цвета людьми, то почему вы думаете, что можете выбирать между графиком улья и диаграммой Ганна?

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

  • Избегайте цветовых схем по умолчанию. По крайней мере, используйте шкалу цветного пивовара. Если вы действительно не можете понять, как выбирать цвета, используйте Colorgorical. У него есть проблемы, но это, по крайней мере, заставляет вас иметь момент для рассмотрения и реализации цвета.
  • Если вы используете цвет, чтобы различать менее 10 или 20 категорий данных, не используйте шкалу 10 или 20 категорий. Первые два цвета старой шкалы категории 20 были синими, и когда ваша аудитория подумала, что эти две вещи связаны, это потому, что их визуальный кортекс сказал им, что они есть.
  • Прекратите использовать основные цвета CSS. Не потому, что с «красным» или «синим» что-то не так, а потому, что это признак того, что вы, вероятно, не думаете об этом. Вы должны думать о цвете своих элементов, это не должно быть случайной вещью, которую вы назначаете произвольно.
  • Аналогично, если вы хотите, чтобы цвет был менее насыщенным, не используйте прозрачность, найдите код RGB для менее насыщенной версии этого цвета. Прозрачность имеет комбинаторные эффекты, которые вы не должны игнорировать просто потому, что вам нужна пастельная палитра.
  • Убедитесь, что ваши палитры состоят из одних и тех же цветов, таких как пастель или яркие тона. Не знаете, что это значит? Читайте о цветовых палитрах и узнайте, потому что цвет важен, и вы не можете считать себя квалифицированным специалистом по визуализации данных, если один из основных каналов, которые вы используете для передачи информации, - это то, о чем вы даже не понимаете самая основная терминология.
  • Знайте, что такое дальтонизм, и попробуйте использовать безопасные цвета для дальтоников. Это не означает избегать красного и зеленого, но это означает, что если вы кодируете красным и зеленым, вы также предоставляете другие сигналы, когда ваша аудитория дальтоник. Аналогично, не все дальтоники одинаковы, поэтому при использовании палитр «безопасных цветов» убедитесь, что вы понимаете, насколько они безопасны.
  • Не используйте интерполированные цветовые диапазоны для указания количества. Цветовые палитры ужасны по количеству. Научитесь составлять количественные показатели, используя квантование, квантили, CKMean и т. П., Чтобы вы могли использовать градуированные цветовые шкалы (сверните свои собственные или используйте рамку для цветных пивоваров, таких как красные или зеленые).

Этот пост является более общей критикой отсутствия вдумчивости в отношении цвета при визуализации данных. Моя самая сильная критика связана именно со стандартным подходом к цвету в D3.js. Итак, как бы вы пошли об интеграции более вдумчивого подхода к цвету с D3? Это просто. Все эти категориальные шкалы в примерах, которые вы используете, используют шкалу с интервалом или непрерывную шкалу. Если это непрерывная шкала для цвета, удалите ее и замените шкалой. Если это масштабированный интервал, он принимает значение (задается в .domain ()) и возвращает один из этих двадцати ужасно злоупотребляющих цветов. Поэтому каждый раз, когда вы видите что-то вроде:

const colors = d3.scaleOrdinal (AnyNameOfColorsIRecognize);

Просто замените его собственным набором цветов, которые вы выбрали. Где бы вы взяли такой массив? Вы можете купить копию Color Index 2 от Krause и выбрать палитру, которая, по вашему мнению, лучше всего соответствует настроению произведения, над которым вы работаете. Или, если это слишком много, вы можете использовать Color Picker от Tristen Brown, основанный на библиотеке Chroma.js, чтобы выбрать рампу с необходимыми остановками. Или, если даже это все еще слишком большое авторство, вы можете положиться на алгоритмы кластеризации, когда я хочу выбрать различные цвета для вас (даже давая возможность создавать нечитаемые человеком комбинации из 30 или 50 цветов).

В любом случае вы получите массив цветов, например: ["# A07A19", "# AC30C0", "# EB9A72", "# BA86F5", "# EA22A8"]. В этот момент просто используйте этот массив в качестве диапазона в вашей порядковой шкале:

const colors = d3.scaleOrdinal.range (["# A07A19", "# AC30C0", "# EB9A72", "# BA86F5", "# EA22A8"]);

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

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

Версия этого эссе была первоначально размещена на elijahmeeks.com в 2015 году.