Как создать палитру для сгруппированных данных на JS?

Question

У меня есть множество элементов, которые сгруппированы. Предположим, групп 20 штук, в каждой группе около 20 элементов. Как я могу сгенерировать цвета для каждого элемента таким образом, чтобы группы были отличимы между собой, однако элементы акцентировали на себе внимание примерно одинаково? Мне нужно генерировать это динамически на js. Пример с двумя короткими группами:

{
  "group_list_schema": [
    {
      "id": 1,
      "tag_list": [
        {
          "id": 1
        },
        {
          "id": 3
        },
        {
          "id": 4
        },
        {
          "id": 5
        },
        {
          "id": 9
        }
      ]
    },
    {
      "id": 2,
      "tag_list": [
        {
          "id": 2
        },
        {
          "id": 10
        }
      ]
    }
  ]
}

Я бы хотел найти ссылку на ёмкую библиотеку, для этого, если есть.

Answer 1

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

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

import tinycolor from 'tinycolor2';

const groupList = [
  {
    id: 1,
    tag_list: [
      { id: 1 },
      { id: 3 },
      { id: 2 },
    ]
  },
  {
    id: 2,
    tag_list: [
      { id: 1 },
      { id: 3 },
      { id: 2 },
    ]
  },
  {
    id: 3,
    tag_list: [
      { id: 1 },
      { id: 3 },
      { id: 2 },
    ]
  }
];

const baseColor = tinycolor('#007bff');
groupList.forEach((group, index) => {
  const color = baseColor.spin(360 / groupList.length * index);
  group.color = color.toHexString();
});

Тут мы генерируем базовый цвет (в данном случае синий) с помощью tinycolor, а затем для каждой группы мы генерируем цвет, используя метод spin, который вращает цветовое колесо на определенный угол. Затем мы сохраняем сгенерированный цвет в свойстве color объекта группы.

Для генерации цветов для подгруппы вы можете использовать методы lighten и darken библиотеки tinycolor, чтобы создавать более светлые или темные оттенки основного цвета группы. Например:

const group = groupList[0];
const baseColor = tinycolor(group.color);
const lightColor = baseColor.lighten(30).toHexString();
const darkColor = baseColor.darken(30).toHexString();

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

БЛОГ НА HUSL

Как создать палитру для сгруппированных данных на JS?

Ответы (1 шт):