graph - mapas - mapa de calor arc map

¿Cuál es el algoritmo para crear colores para un mapa de calor?

Question

Suponiendo que los valores están normalizados de 0 a 1, ¿cuál es el algoritmo para obtener un color para crear un mapa de calor como este?

1 es rojo, .5 es verde, 0 es azul oscuro.

Trabajando en RMagick / ImageMagick.

Answer 1

¡Dejo aquí una implementación de Swift 4 basada en esta publicación de blog para cualquier cantidad de colores! La explicación perfecta está ahí! Espero que ayude y le ahorre tiempo a alguien.

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
}
}

Answer 2

Aquí hay un fragmento de código JavaScript para generar código de color CSS hsl a partir del valor [0, 1]

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

Este algoritmo se basa en el mapa de calor de 5 colores ,

En este algoritmo, los colores correspondientes a los valores son

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%))

¡Tan sencillo!

Answer 3

Aquí hay un mapa de calor simple de 5 colores en python (en pyqt, pero fácil de generalizar)

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

Answer 4

Encontré esto sorprendentemente fácil de hacer con HSL.

En 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

Este método devuelve valores de HSL como una cadena entre 0% y 100%. Se puede usar con RMagick o ImageMagick.

Referencia: documentación de ImageMagick HSL .

Answer 5

La interpolación lineal de los componentes RGB funciona bastante bien en la práctica, y el enlace que Bruno compartió menciona haciendo su interpolación en HSL que puede ayudar.

También puede intercalar sus tres colores básicos con intermedios más bien elegidos. Visite http://colorbrewer2.org/ para ver algunas buenas progresiones de color. Luego divide tus pasos más:

0 red
0.25 yellow
0.5 green
0.75 cyan
1 blue

Answer 6

Un enfoque general es interpolar los colores. Tú decidiste eso

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

Simplemente haces una interpolación lineal del RGB. Entre 2 valores de referencia (por ejemplo, t entre 0 y 0.5), el color interpolado C es como

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

Debe aplicar esta fórmula en cada componente de color RGB. Algunos otros consejos sobre la interpolación lineal de colores: ¿cómo interpolar una secuencia de colores?

---- editar ----- Eliminé el encabezado de mi respuesta, ya que me di cuenta de que había entendido mal la pregunta (ver comentario). Dejo una copia para lectura consistente e información, por las dudas.

Una primera posibilidad es construir un mapa de calor de referencia con cualquier software que: cree una imagen de 256X1pixel con valores de píxel de 0 a 255 y aplique el mapa de calor deseado con ImageMagick: luego puede leer el RGB y construir un mapa (valor: RGB) .