42

値が0から1に正規化されていると仮定すると、このようなヒートマップを作成するための色を取得するためのアルゴリズムは何ですか？

1は赤、.5は緑、0は紺色です。

RMagick/ImageMagickでの作業。

ヒートマップ

4

6 に答える 6

45

これは、[0、1]値からCSShslカラーコードを生成するためのJavaScriptコードスニペットです。

function heatMapColorforValue(value){
  var h = (1.0 - value) * 240
  return "hsl(" + h + ", 100%, 50%)";
}

このアルゴリズムは、 5色のヒートマップに基づいています。

このアルゴリズムでは、値に対応する色は次のとおりです。

0    : blue   (hsl(240, 100%, 50%))
0.25 : cyan   (hsl(180, 100%, 50%))
0.5  : green  (hsl(120, 100%, 50%))
0.75 : yellow (hsl(60, 100%, 50%))
1    : red    (hsl(0, 100%, 50%))

とても簡単！

于 2014-12-03T04:55:17.377 に答える
15

これはHSLで驚くほど簡単にできることがわかりました。

Rubyの場合：

def heatmap_color_for value # [0,1]
  h = (1 - value) * 100
  s = 100
  l = value * 50
  "hsl(#{h.round(2)}%,#{s.round(2)}%,#{l.round(2)}%)"
end

このメソッドは、HSL値を0％から100％までの文字列として返します。RMagickまたはImageMagickで使用できます。

参照：ImageMagickHSLドキュメント。

Javaでは、CSSの場合、テスト済み：

private String getHeatmapColorForCSS(double normalizedValue0to1) {
    double h = (1 - normalizedValue0to1) * 360;
    double s = 100;
    double l = 50;
    return String.format("hsl(%.2f, %.2f%%, %.2f%%)", h, s, l);
}

CSSとImageMagickの主な違いに注意してください。最初の値は0〜360で、パーセント記号はありません。

于 2012-10-17T13:50:39.003 に答える
11

RGBコンポーネントの線形補間は、実際には非常にうまく機能します。ブルーノが共有したリンクでは、HSLで補間を行うことが役立ちます。

また、3つの基本色に、より適切に選択された中間体を散在させることもできます。いくつかの良い色の進行については、http：//colorbrewer2.org/をチェックしてください。次に、ステップをさらに分割します。

0    red
0.25 yellow
0.5  green
0.75 cyan
1    blue
于 2012-10-16T07:58:38.020 に答える
4

一般的なアプローチは、色を補間することです。あなたは

0: 0 0 255 (or any blue)
0.5: 0 255 0 (or any green)
1: 255 0 0 (or any red)

RGBの線形補間を行うだけです。2つの参照値の間（たとえば、0から0.5の間のt）、補間された色Cは次のようになります。

C = (1 - t) * c0 + t * c1

この式は、各カラーコンポーネントRGBに適用する必要があります。カラー線形補間に関するその他のヒント： カラーシーケンスを補間する方法は？

----編集-----質問を誤解していることに気付いたので、回答のヘッダーを削除しました（コメントを参照）。念のため、一貫して読んだり情報を提供したりするためにコピーを残しておきます。

最初の可能性は、次のようなソフトウェアで参照ヒートマップを作成することです。0〜255のピクセル値で256X1ピクセルの画像を作成し、ImageMagickで目的のヒートマップを適用します。次にRGBを読み戻して、マップを作成できます（値：RGB） 。

于 2012-10-13T18:10:40.147 に答える
1

このブログ投稿に基づいたSwift4の実装を、任意の色でここに残します。完璧な説明があります！それが誰かの助けになり、時間を節約できることを願っています！

import Foundation
import UIKit

struct ColorPoint {
    let color: UIColor
    let value: CGFloat
}

class HeatMapColor {
    var colorPoints: [ColorPoint]

    init(colorPoints: [ColorPoint]) {
        self.colorPoints = colorPoints
    }

    func colorAt(value: CGFloat) -> UIColor {
        if(colorPoints.isEmpty) { return UIColor.black }

        let colorsPointsToUse = colorPoints.sorted { (colorPointA, colorPointB) -> Bool in
            return colorPointA.value <= colorPointB.value
        }

        for (index, colorPoint) in colorsPointsToUse.enumerated() where value < colorPoint.value {
            let previousColorPoint = colorsPointsToUse[max(0, index - 1)]
            let valueDiff = previousColorPoint.value - colorPoint.value
            let fraction = valueDiff == 0 ? 0 : (value - colorPoint.value) / valueDiff

            guard
                let prevComp = previousColorPoint.color.cgColor.components,
                let currComp = colorPoint.color.cgColor.components else { continue }

            let red = (prevComp[0] - currComp[0]) * fraction + currComp[0]
            let green = (prevComp[1] - currComp[1]) * fraction + currComp[1]
            let blue = (prevComp[2] - currComp[2]) * fraction + currComp[2]

            return UIColor(red: red, green: green, blue: blue, alpha: 1.0)
        }

        return colorsPointsToUse.last!.color
    }
}
于 2018-01-30T19:37:21.953 に答える
0

これがPythonの単純な5色ヒートマップです（pyqtですが、一般化するのは簡単です）

def genColorMap(self):
    points = [(255,0,0), (255,255,0), (0,255,0), (0,255,255), (0,0,255)]
    cm = {}
    for i in range(0, 256):
        p0 = int(numpy.floor((i/256.0)/len(points)))
        p1 = int(numpy.ceil((i/256.0)/len(points)))
        rgb = map(lambda x: x[0]*max(0,(i-p0)) + x[1]*max(0,(i-p1)), zip(points[p0], points[p1]))
        cm[i] = QtGui.qRgb(rgb[0], rgb[1], rgb[2])
    return cm
于 2015-05-09T18:54:32.777 に答える