Love web applications » D3.jsで、色相方向（HSV色系）に補完する

こんにちは。今日はD3.jsでグラフや地図に色塗りする場合のお話です。

グラフや地図を値ごとに色分けするには、d3.scale.linear()を使うと簡単です。これは、値に対応した色を簡単に算出できるので便利です。具体例としては、

grad = d3.scale.linear().domain([0,1]).range(["#ff0000", "#0000ff"])

とすれば、

grad(0.5)
> #800080

という風に、赤と青の中間の色コードを出力してくれます。

ところが、ここで言う赤と青の中間は、RGBの3次元空間での中間を意味しています。視覚的に言えば、次の画像のラインが値域であり、grad(0.5）はライン中央に位置する色ですね。
RGB Interpolation

でも、赤〜青の範囲で色を使うときに、色相で補完したい場合もありますよね。というか、こっちの方が一般的には需要あるのではないでしょうか。

Hue Interpolation

円周方向が色相（Hue）です。例えば、Max:赤から Min:青と指定すれば、入力値に応じて赤>橙>黄>緑>青って感じで、色を使えるようにしたい訳です。

そのためには、

RGB16進数→RGB色系→HSV色系の順に変換して、HSV色系の中でd3.scale.linear()で補完処理を行い、結果をRGB色系に再度変換してattribute指定に使うようにします。HSV色空間とは何ぞや？という方は、Wikipediaへ。

それぞれの変換を行うスクリプトを書いてみました。

hex2rgb = (hexcode) -> # rgbに変換する result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hexcode); if result is null console.log "error!" return [r,g,b] = [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] return [r,g,b]hsv2rgb = (h,s,v) -> if h < 0 r = 0 g = 0 b = 0 else h_dash = h / 60 x = s * (1 - Math.abs(h_dash % 2 - 1)) if h_dash < 1 [r,g,b] = [s,x,0] else if h_dash < 2 [r,g,b] = [x,s,0] else if h_dash < 3 [r,g,b] = [0,s,x] else if h_dash < 4 [r,g,b] = [0,x,s] else if h_dash < 5 [r,g,b] = [x,0,s] else if h_dash < 6 [r,g,b] = [s,0,x] else console.log '変換エラー' return r += (v-s) g += (v-s) b += (v-s) r *= 255 g *= 255 b *= 255 return [r,g,b]rgb2hsv = (r,g,b) -> # rgb to hsv r = r / 255 g = g / 255 b = b / 255 max_v = Math.max(Math.max(r,g), b) min_v = Math.min(Math.min(r,g), b) v = max_v s = max_v - min_v if min_v == max_v h = -1 else if min_v == b h = 60 * (g-r)/s + 60 else if min_v == r h = 60 * (b-g)/s + 180 else h = 60 * (r-b)/s + 300 return [h,s,v]

厳密には、黒（R,G,B）=(0,0,0）の場合のHSV色空間におけるHの値は不定/undefinedなのですが（黒は彩度ゼロってことです）、ここのコードではゼロを割り当ててしまっています。それでも、今回の目的の実用上問題なさそうだったからです。

次回はHSV色系で色補完して、グラフor地図を色分けした具体例を紹介しようと思います。

それではまた♪