Создание динамического градиента с помощью HSL или RGB

Question

У меня есть стандартная карта с 50 состояниями, построенная с d3, в которой я динамически раскрашиваю состояния в соответствии с различными наборами данных. Независимо от набора данных значения нормируются по шкале от 0 до 1, где 1 соответствует состоянию с наивысшим значением. Я ищу способ расчета тени состояния, используя значение нормированной точки данных.

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

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

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

d3 имеет запеченные в HSL конвертер, поэтому я попытался это:

// 0 <= val <= 1 
function colorize(val) { 
    // nudge in the extremes 
    val = 0.2 + 0.6 * val; 
    return d3.hsl(0, val, 1 - val); 
} 

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

Answer 1

Мне нравится то, что вы сделали на самом деле, но если вы хотите сделать что-то другое, вы всегда можете сделать шкалу D3. Например:

var scale = d3.scale.linear().domain([rangeMin, rangeMid, 
rangeMax]).range(["#Color1","#Color2","#Color3"]); 

И затем установить каждое состояние по

return scale(dataValue); 

Вы можете установить свой RangeMin и переменные RangeMax быть минимальное и максимальное значения ваших данных. Среднее число, rangeMid, которое я добавил, является необязательным. Я бы предложил использовать это, если бы вы хотели разнообразить свой цвет. Я использовал эту функцию шкалы, чтобы сделать частотную тепловую карту, которая получилась довольно приятной. Надеюсь, что смогу хоть чем-то помочь!

Примечание: Я использовал это с шестнадцатеричными значениями css, но я считаю, что RGB и HSL также могут работать.