3

幅広い値の可能性があるデータセットを指定して、適切なカラー パレットを取得する方法を理解しようとしています。（githubの貢献ヒートマップを考えてください）

値は動的であるため、使用できるかどうかはわかりませんd3.scale.threshold。

データセットを量子化:

var arr = [26,12,7,6,5,5,5,4,4,2,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0];

次のカラー スケールを使用していますが、色を付ける必要がある 41 の要素のうち、最初の 4 つだけが色を持ち、それ以外はすべて #eeeeee (灰色) に設定されています。

    var color_scale = d3.scale.quantize()
        .domain([0, d3.max(arr)])
        .range(["#eeeeee","#edf8e9","#bae4b3","#74c476","#238b45"]);

クオンタイズ出力:

color_scale(26): #238b45
color_scale(12): #bae4b3
color_scale(7) : #edf8e9
color_scale(6) : #edf8e9
color_scale(5) : #eeeeee
color_scale(4) : #eeeeee
color_scale(2) : #eeeeee
color_scale(1) : #eeeeee
color_scale(0) : #eeeeee

アップデート：

次のセットでは、変位値を使用しても期待どおりに機能しないようです。

分位データセット:

var arr = [26,12,7,6,5,5,5,4,4,2,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];

次のカラー スケールを使用します。

var color_scale = d3.scale.quantile()
    .domain(arr)
    .range(["#eeeeee","#edf8e9","#bae4b3","#74c476","#238b45"]);

変位値出力:

color_scale(26): #238b45
color_scale(12): #238b45
color_scale(7) : #238b45
color_scale(6) : #238b45
color_scale(5) : #238b45
color_scale(4) : #238b45
color_scale(2) : #238b45
color_scale(1) : #74c476
color_scale(0) : #edf8e9

すべての値 > 0 には色があり、すべての 0 は #eeeeee になると思います。

私が間違っていることは何ですか？

4

1 に答える 1