Палитра цветов для графиков: Подбор правильных цветовых палитр для визуализации данных | by Olga Zholudova | Цвет

Содержание

Подбор правильных цветовых палитр для визуализации данных | by Olga Zholudova | Цвет

Над переводом работали: Nancy Pong и Ринат Шайхутдинов. При поддержке iSpring.

iSpring — решение для запуска дистанционного обучения.

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

У нас в Graphiq дело усложняется еще и тем, что нам приходится представлять тысячи уникальных массивов информации посредством множества различных визуальных компоновок.

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

Интересуетесь свежими статьями по дизайну? Подписывайтесь на канал в Telegram | ВКонтакте, Instagram, Facebook

Ищите системное погружение в тему? Загляните в блог для дизайнеров.

Проблема 1: Низкая доступность

Многие из изученных нами палитр совершенно не приспособлены для визуализации данных. Мало того, что цвета в их составе недостаточно яркие, так эти палитры еще и совершенно не продуманы с точки зрения доступности для людей с ограниченными возможностями. Палитра Flat UI Colors — одна из самых популярных в интернете, и понятно почему: она отлично выглядит. Но, как видно из названия, эта палитра создана для пользовательских интерфейсов (UI). Людям, не различающим цвета, сложно воспринимать визуализацию данных, если она выполнена при помощи такой палитры:

Полноцветная палитра Flat UI Colors, режим протанопии (слепоты на красный цвет) и оттенки серого.

Еще одна проблема, которую мы отметили во многих существующих палитрах — это недостаточное количество цветов. При создании визуализаций в Graphiq, мы используем как минимум 6 цветов, а в некоторых случаях и 8–12. В большинстве палитр просто нет нужного нам количества цветов.

Вот несколько примеров с Color Hunt:

Это классные палитры, но они недостаточно гибкие, чтобы использовать их для представления сложных массивов данных.

Проблема 3: Сложно различимые цвета

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

breezzly.ru — среда для тренировки творческих навыков в digital

К сожалению, обычно они недостаточно яркие и, поэтому, очень быстро становятся неразличимыми, как вот эти с сайта Color Hunt:

Давайте возьмем первую палитру и адаптируем ее под серию из 10 типов данных:

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

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

Правило 1: Разнообразие в яркости и в оттенках

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

Светло-голубой из палитры материального дизайна от Google: полноцветная версия, протанопия и оттенки серого.

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

По оси x — разные оттенки; по оси y — разные уровни яркости. Серые мордочки — люди, неспособные различать цвета; цветные мордочки — все остальные.

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

Правило 2: Придерживайтесь природных цветовых шаблонов

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

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

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

Фотографии от Кайла Пирса, Уэсли Фрайера и Джона Салливана.

То же самое можно сказать про переход от светло-зеленого к фиолетово-синему, от светло-желтого к темно-зеленому, от коричневато-оранжевого к холодному серому и т.п.

Фотографии от Kbh4rd, Йена Бриттона и Джона Салливана.

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

Правило 3: Используйте градиент вместо статичных наборов цветов

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

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

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

Мы очень довольны результатом. Вот несколько палитр в деле: все они начинаются с чисто белого и заканчиваются чисто черным — это обеспечивает максимальный разброс яркости.

Холодные, теплые и неоновые цвета

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

Это делает наши палитры доступными для людей с ограниченными возможностями и достаточно понятными и очевидными для остальных людей. Кроме того, наш подход поддерживает даже сложные массивы данных (вплоть до 12 информационных групп).

breezzly.ru — среда для тренировки творческих навыков в digital

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

Статьи

  1. How to avoid equidistant HSV colors by Gregor Aisch (Как избежать цветов HSV от Грегора Эйша)
  2. Mastering multi-hued color scales with chroma.js by Gregor Aisch (Осваиваем мульти-цветные цветовые шкалы с chroma.js от Грегора Эйша)
  3. Subtleties of color by Robert Simmon (Тонкости цвета от Роберта Симмона)
  4. The viridis color palettes by Bob Rudis, Noam Ross and Simon Garnier (Цветовые палитры viridis от Боба Рудиса, Ноама Росса и Саймона Гарньера)
  5. A new colormap for MATLAB by Steve Eddins (Новая карта цветов (colormap) для MATLAB от Стива Эддинса)

Инструменты

  1. Color Picker for Data — удобный инструмент подбора цветов, который позволяет, придерживаясь цифровой константы, с легкостью выбрать цветовую палитру.
  2. Chroma.js — библиотека JavaScript для работы с цветами
  3. Colorbrewer2 — отличный инструмент подбора цветов для тепловых карт и визуализации данных, + встроенные палитры с одним или несколькими оттенками.
  4. gradStop.js — библиотека JavaScript для генерации однотонных цветовых схем и расстановки точек в градиенте на одинаковом расстоянии.

Другие ресурсы

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

  1. ColorHunt — цветовые палитры высокого качетсва с функцией быстрого предпросмотра. Отличный ресурс, если вам достаточно четырех цветов.
  2. COLOURlovers — отличное сообщество по цвету, с разнообразными инструментами для создания цветовых палитр.
  3. ColorSchemer Studio — мощное десктопное приложение для подбора цветов.
  4. Coolors — генератор легких цветовых палитр, позволяющий оставить выбранные цвета и заменить все остальные.
  5. Flat UI Colors — отличный набор цветов для UI, один из самых популярных
  6. Material Design Colors — еще одна отличная палитра UI. Она не только предоставляет богатый ассортимент цветов, но и предлагает разные “веса” или уровни яркости каждого цвета.
  7. Palettab — расширение для Chrome, которое показывает новую палитру цветов и шрифт на каждой вкладке.
  8. Swiss Style Color Picker — еще одна коллекция хороших цветовых палитр

Надеемся, что эта статья была вам полезна! А как вы создаете цветовые палитры? Какими еще инструментами вы пользовались? Будем рады услышать ваши мнения и выводы относительно цветовых палитр и визуализации данных.

Если хотите побольше узнать о наших процессах работы, подписывайтесь на нашу коллекцию: Graphiq Engineering

Если вам понравилась статья и перевод, дайте нам знать — нажмите кнопку Recommend

А если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.

Нас можно найти в Facebook: Nancy Pong и Ринат Шайхутдинов.

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

Breezzly.ru — это среда для тренировки digital-навыков. От создателей Mental Notes (60+ отзывов) и godesign.school (220+ отзывов). Развиваем курсы по интерактивному дизайну с 2012 года. Активно преподаем оффлайн в школе, ВУЗе и на оффлайн-курсах, а теперь и онлайн для всех. Спасибо за то, что поддерживаете!

Посмотреть каталог курсов →

breezzly.ru — среда для тренировки творческих навыков в digital

Подбор правильных цветовых палитр для визуализации данных


  • Инфографика
  • 10 мин на чтение

  • 6761

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

У нас в Graphiq дело усложняется еще и тем, что нам приходится представлять тысячи уникальных массивов информации посредством множества различных визуальных компоновок.

Текущие проблемы

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

Проблема 1: Низкая доступность

Многие из изученных нами палитр совершенно не приспособлены для визуализации данных. Мало того, что цвета в их составе недостаточно яркие, так эти палитры еще и совершенно не продуманы с точки зрения доступности для людей с ограниченными возможностями. Палитра Flat UI Colors — одна из самых популярных в интернете, и понятно почему: она отлично выглядит. Но, как видно из названия, эта палитра создана для пользовательских интерфейсов (UI). Людям, не различающим цвета, сложно воспринимать визуализацию данных, если она выполнена при помощи такой палитры:

Полноцветная палитра Flat UI Colors, режим протанопии (слепоты на красный цвет) и оттенки серого.

Проблема 2: Недостаточно цветов

Еще одна проблема, которую мы отметили во многих существующих палитрах — это недостаточное количество цветов. При создании визуализаций в Graphiq, мы используем как минимум 6 цветов, а в некоторых случаях и 8–12. В большинстве палитр просто нет нужного нам количества цветов.

Вот несколько примеров с Color Hunt:

Это классные палитры, но они недостаточно гибкие, чтобы использовать их для представления сложных массивов данных.

Проблема 3: Сложно различимые цвета

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

К сожалению, обычно они недостаточно яркие и, поэтому, очень быстро становятся неразличимыми, как вот эти с сайта Color Hunt:

 

Давайте возьмем первую палитру и адаптируем ее под серию из 10 типов данных:

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

Наш подход

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

Правило 1: Разнообразие в яркости и в оттенках

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

Светло-голубой из палитры материального дизайна от Google: полноцветная версия, протанопия и оттенки серого.

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

По оси x — разные оттенки; по оси y — разные уровни яркости. Серые мордочки — люди, неспособные различать цвета; цветные мордочки — все остальные.

 

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

Правило 2: Придерживайтесь природных цветовых шаблонов

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

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

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

Фотографии от Кайла Пирса, Уэсли Фрайера и Джона Салливана.

То же самое можно сказать про переход от светло-зеленого к фиолетово-синему, от светло-желтого к темно-зеленому, от коричневато-оранжевого к холодному серому и т.п.

Фотографии от Kbh4rd, Йена Бриттона и Джона Салливана.

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

Правило 3: Используйте градиент вместо статичных наборов цветов

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

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

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

Наши палитры

Мы очень довольны результатом. Вот несколько палитр в деле: все они начинаются с чисто белого и заканчиваются чисто черным — это обеспечивает максимальный разброс яркости.

Холодные, теплые и неоновые цвета

Наши палитры в деле

Кратко о подборе палитр для визуализации данных

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

Это делает наши палитры доступными для людей с ограниченными возможностями и достаточно понятными и очевидными для остальных людей. Кроме того, наш подход поддерживает даже сложные массивы данных (вплоть до 12 информационных групп).

Статьи, инструменты и ресурсы [Обновлен]

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

Статьи
  1. How to avoid equidistant HSV colors by Gregor Aisch (Как избежать цветов HSV от Грегора Эйша)
  2. Mastering multi-hued color scales with chroma.js by Gregor Aisch (Осваиваем мульти-цветные цветовые шкалы с chroma.js от Грегора Эйша)
  3. Subtleties of color by Robert Simmon (Тонкости цвета от Роберта Симмона)
  4. The viridis color palettes by Bob Rudis, Noam Ross and Simon Garnier (Цветовые палитры viridis от Боба Рудиса, Ноама Росса и Саймона Гарньера)
  5. A new colormap for MATLAB by Steve Eddins (Новая карта цветов (colormap) для MATLAB от Стива Эддинса)
Инструменты
  1. Color Picker for Data — удобный инструмент подбора цветов, который позволяет, придерживаясь цифровой константы, с легкостью выбрать цветовую палитру.
  2. Chroma.js — библиотека JavaScript для работы с цветами
  3. Colorbrewer2 — отличный инструмент подбора цветов для тепловых карт и визуализации данных, + встроенные палитры с одним или несколькими оттенками.
  4. gradStop.js — библиотека JavaScript для генерации однотонных цветовых схем и расстановки точек в градиенте на одинаковом расстоянии.
Другие ресурсы

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

  1. ColorHunt — цветовые палитры высокого качетсва с функцией быстрого предпросмотра. Отличный ресурс, если вам достаточно четырех цветов.
  2. COLOURlovers — отличное сообщество по цвету, с разнообразными инструментами для создания цветовых палитр.
  3. ColorSchemer Studio — мощное десктопное приложение для подбора цветов.
  4. Coolors — генератор легких цветовых палитр, позволяющий оставить выбранные цвета и заменить все остальные.
  5. Flat UI Colors — отличный набор цветов для UI, один из самых популярных
  6. Material Design Colors — еще одна отличная палитра UI. Она не только предоставляет богатый ассортимент цветов, но и предлагает разные “веса” или уровни яркости каждого цвета.
  7. Palettab — расширение для Chrome, которое показывает новую палитру цветов и шрифт на каждой вкладке.
  8. Swiss Style Color Picker — еще одна коллекция хороших цветовых палитр

Надеемся, что эта статья была вам полезна! А как вы создаете цветовые палитры? Какими еще инструментами вы пользовались? Будем рады услышать ваши мнения и выводы относительно цветовых палитр и визуализации данных.

Если хотите побольше узнать о наших процессах работы, подписывайтесь на нашу коллекцию: Graphiq Engineering

Источник: medium.com

  • #диаграмма
  • #дизайн
  • #инфографика
  • #статья


  • 0

Генератор цветовой палитры Data Viz (для диаграмм и информационных панелей)

  • Палитра
  • Один оттенок
  • Дивергент

Количество цветов

3
4
5
6
7
8

Цвет фона

Светлый
Темный 9. Это полезно для многих визуализаций данных, таких как круговые диаграммы, сгруппированные гистограммы и карты.

Примечание. Помимо режима палитры, есть еще два режима: обратите внимание на шкалы одного оттенка и расходящиеся шкалы.

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

Например, Google Analytics делает ужасную работу с этим:

Просто попробуйте использовать этот ключ. Попробуй.

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

Ах! Намного лучше.

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

Вот несколько советов, как получить наилучшую палитру:

  • Попробуйте выбрать очень разных конечных цветов – напр. один теплый, один прохладный; один светлый, один темнее — чтобы ваша палитра покрывала более широкий диапазон
  • Если вы используете фирменный цвет для одной конечной точки, не бойтесь немного изменить насыщенность и яркость , если это создаст более приятную палитру. Пользователи узнают ваш фирменный цвет по его оттенку гораздо больше , чем по его точной насыщенности/яркости.
  • Для визуализации данных, где вы показываете сила одного значения , попробуйте вместо этого использовать Генератор палитры одного оттенка.

О, и…

Подробнее о цвете

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

  • Цветовая система HSB: учебник для практикующих
  • Цвет в дизайне пользовательского интерфейса: практическая основа
  • Design Hacks, мой электронный бюллетень, в котором я отправляю оригинальные советы и тактики дизайна более чем 50 000 моих ближайших друзей.

Как бы то ни было, я создал этот инструмент для создания палитр визуализации данных. Есть ли еще одна особенность, которую вы хотели бы видеть в нем? Дайте мне знать.

Количество цветов

3
4
5
6
7
8
9

Изменить цветовую шкалу

Яркость

Интенсивность цвета

Цвет фона

Свет
Темный

Действия

Копировать HEX-значенияЭкспортировать как SVG

В контексте

Как использовать

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

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

  • Карта , в которой размер представляет размер округа; нам нужно использовать цвет, чтобы различать значение для каждого округа
  • Недельный календарь , в котором каждый день представляет собой прямоугольник одинакового размера; нам нужно использовать цвет, чтобы показать значение для определенного дня

Вот несколько советов для получения наилучшей шкалы одного оттенка:

  • Для перехода к конечной точке плоского серого установите «Интенсивность цвета» на ноль
  • Для перехода к конечной точке белого цвета установите для параметра «Яркость» максимальное значение , а для параметра «Интенсивность цвета» — значение ноль.
  • Если ваша цветовая шкала действительно показывает переменную, которая переходит от одного конца к нейтральной средней точке 9от 0028 до еще один конец , попробуйте генератор расходящихся шкал (например, от республиканца до умеренного до демократа; от более горячего до той же температуры до более холодного)

Количество цветов

5
7
9
11
13

Изменить цвет средней точки

Яркость

Интенсивность цвета

Цвет фона

Свет
Темный

Действия

Копировать HEX-значенияЭкспортировать как SVG

В контексте

Как использовать

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

Возможно, наиболее распространенным примером этого является диаграмма «насколько демократическим/республиканским является каждый штат в США».

Беззастенчиво заимствован (?) из Five Thirty-Eight

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

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

12 Визуализация данных Цветовые палитры для создания лучших историй с вашими данными

ПРИМЕЧАНИЕ. OMNISCI IS NOW HEAVY.AI

Рассказывать убедительные истории с помощью данных может быть довольно сложно.

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

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

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

В этом посте рассказывается следующее:

  • 12 лучших цветовых палитр для визуализации данных, которые могут улучшить ваши карты, диаграммы и истории добавлять новые цвета и палитры на информационные панели

Типы цветовых палитр для визуализации данных

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

  • Категорический
  • Следовательная
  • Дивергирование

Категориальная цветовая палитра

Категориальная (цветовая набор 2) Цвета, представляющие типы столкновений на дату

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

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

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

1. Retro Metro (по умолчанию)

2. Dutch Field

3. River Nights

4. Весенние пастельные тона

3 90 1 и 2 в разделе цветов панели настроек пользовательского интерфейса Immerse (см. Добавление цветов и палитр на панель инструментов Immerse далее в этом посте).

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

Последовательная (количественная) цветовая палитра, представляющая столкновения по дням и часам

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

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

5. От синего к желтому (по умолчанию)

6. От серого к красному

7. От черного к розовому

8. Синий

Добавьте эти палитры настроек цвета в непрерывные цвета панели Immerse раздел выбора (см. «Добавление цветов и палитр на панель инструментов Immerse» далее в этом посте).

Расходящаяся цветовая палитра

Расходящаяся (количественная) цветовая палитра, представляющая
Процентное изменение с течением времени и свойств, подверженных риску затопления по округам в 2050 году

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

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

9. От синего до красного (по умолчанию)

10. От оранжевого до фиолетового

11. Розовая пена

12. От лососевого до цвета морской волны

3 90 Раздел цветов панели настроек пользовательского интерфейса Immerse (см. «Добавление цветов и палитр на панель управления Immerse» далее в этом посте).

Добавление цветов и палитр на панель мониторинга Immerse . В этом примере основное внимание уделяется редактированию, добавлению и удалению цветов и палитр в Immerse.

Начните с открытия панели настроек пользовательского интерфейса в левой части открытой панели инструментов Immerse.

Доступ к панели настроек пользовательского интерфейса

Раздел цветовой палитры панели настроек пользовательского интерфейса состоит из четырех подразделов.

  • Набор цветов 1
  • Набор цветов 2
  • Категориальные цвета
  • Непрерывные цвета

Раздел цветовой палитры панели настроек пользовательского интерфейса , добавьте шестнадцатеричное значение цвета и щелкните значок «Сохранить», чтобы добавить цвет.

Набор цветов 1 или 2 добавить, отредактировать или удалить

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

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

Щелкните раскрывающийся список, чтобы просмотреть доступные палитры и параметры для добавления, редактирования или удаления. Каждая палитра должна содержать от 2 до 10 цветов.

Категориальный цвет добавить, изменить или удалить

Щелкните палитру, чтобы добавить, изменить или удалить цвета, как мы делали это для набора цветов 1 и 2.

Непрерывный цвет добавить, изменить или удалить

Сохранить приборной панели и наслаждайтесь новыми цветами в вашем распоряжении.

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

Попробуйте сами сегодня, загрузите HEAVY.AI Free, полнофункциональную версию, доступную для бесплатного использования.

Какие цвета и палитры вы планируете добавить в Immerse? Поделитесь ими и любыми визуализациями, которые вы создаете, с нами через LinkedIn, Twitter или наши форумы сообщества.

Антонио Котронео

Антонио Котронео — директор по маркетингу продуктов в HEAVY.