Calculating heat map colours

Question

I'm working on a heat map made up of an HTML table. This table contains n cells and has a lowest value and a highest value (highest is always higher than lowest). Each cell has a cell value. All these values are ints.

Cells with the lowest value are meant to be a light blue, scaling across to the point where the cells with the highest value are a deep red. See gradient below for an ideal range:

To calculate the hex colour value of each individual cell, I look at the lowest and highest values from the table and the cell's total value, passing them into a method that returns the RGB hex, ready to be used with HTML's background-color style.

Here is the method so far:

public string ConvertTotalToRgb(int low, int high, int cell)
{
    int range = high - low;

    int main = 255 * cell/ range;
    string hexR = main.ToString("X2");
    int flip = 255 * (1 - (cell/ range));
    string hexB = flip.ToString("X2");

    return hexR + "00" + hexB;
}

With a lowest value of 0 and a highest value of 235, this method returns the following table (cell values are in the cells).

Example case: If lowest was 20, highest was 400 and cell was 60, I would want the method returning the RGB hex of the colour about 15.8% of the way along the gradient.

400 - 20 = 380
380 / 60 = 6.33
100 / 6.33 = 15.8

I'm aware that this formula isn't quite accurate but that's partially why I'm asking for help here.

I've made it this far but I'm really not sure how to proceed. Any help is hugely appreciated!

Solution 1

What you really want is an HSV color, because the Hue (H value) is cyclical. if the hue is between 0 and 1, then it indicates how far along your color gradient you want to be. The saturation and value components are always 1 in this case.

Follow the HSV to RGB conversion code here: HSV to RGB Stops at yellow C#

public string ConvertTotalToRgb(int low, int high, int cell)
{
    int range = high - low;
    float h= cell/ (float)range;
    rgb = HSVtoRGB(h,1.0f,1.0f);
    return "#" + rgb.R.ToString("X2") + rgb.G.ToString("X2") + rgb.B.ToString("X2");
}

If you know you can target browsers that support it (CSS3), you can just render the hsv value directly.

Solution 2

Today I've googoled to find some help about his matter, but no answer I found answer precisely the question.

The "Heat Map" is not a raw Value% to Hue conversion, it can be build with 7, 5 or less colors (eg: red to yellow), can be linear or logarithmic, etc.

I wrote, and I sharing, a C# .Net 4.6.1 code that can be a solid base to build your ValueToColorOnHeatMap converter: (Note: this was debuged and tested)

using System.Windows.Media;// for WPF
// for WindowsForms using System.Drawing
using System;
using System.Collections.Generic;
public class ColorHeatMap
{
    public ColorHeatMap()
    {
        initColorsBlocks();
    }
    public ColorHeatMap(byte alpha)
    {
        this.Alpha = alpha;
        initColorsBlocks();
    }
    private void initColorsBlocks()
    {
        ColorsOfMap.AddRange(new Color[]{
            Color.FromArgb(Alpha, 0, 0, 0) ,//Black
            Color.FromArgb(Alpha, 0, 0, 0xFF) ,//Blue
            Color.FromArgb(Alpha, 0, 0xFF, 0xFF) ,//Cyan
            Color.FromArgb(Alpha, 0, 0xFF, 0) ,//Green
            Color.FromArgb(Alpha, 0xFF, 0xFF, 0) ,//Yellow
            Color.FromArgb(Alpha, 0xFF, 0, 0) ,//Red
            Color.FromArgb(Alpha, 0xFF, 0xFF, 0xFF) // White
        });
    }
    public Color GetColorForValue(double val, double maxVal)
    {
        double valPerc = val / maxVal;// value%
        double colorPerc = 1d / (ColorsOfMap.Count-1);// % of each block of color. the last is the "100% Color"
        double blockOfColor = valPerc / colorPerc;// the integer part repersents how many block to skip
        int blockIdx = (int)Math.Truncate(blockOfColor);// Idx of 
        double valPercResidual = valPerc - (blockIdx*colorPerc);//remove the part represented of block 
        double percOfColor = valPercResidual / colorPerc;// % of color of this block that will be filled

        Color cTarget = ColorsOfMap[blockIdx];
        Color cNext = cNext = ColorsOfMap[blockIdx + 1]; 

        var deltaR =cNext.R - cTarget.R;
        var deltaG =cNext.G - cTarget.G;
        var deltaB =cNext.B - cTarget.B;

        var R = cTarget.R + (deltaR * percOfColor);
        var G = cTarget.G + (deltaG * percOfColor);
        var B = cTarget.B + (deltaB * percOfColor);

        Color c = ColorsOfMap[0];
        try
        {
            c = Color.FromArgb(Alpha, (byte)R, (byte)G, (byte)B);
        }
        catch (Exception ex)
        {
        }
        return c;
    }
    public byte Alpha = 0xff;
    public List<Color> ColorsOfMap = new List<Color>();
}

To use less, or personalized colors, work on ColorsOfMap List. The class use a proportional, linear, reperesentation, work on blocOfColor to change the linearity.

I hope this will help some people to save time :)

Thanks to all people that share their answers/solutions with the comunity.

To use less, or personalized colors, work on ColorsOfMap List. The class use a proportional, linear, reperesentation, work on blocOfColor to change the linearity.

I hope this will help some people to save time :)

Thanks to all people that share their answers/solutions with the comunity.

Comments

[Djentleman]

I literally put a picture of the table in the question, right at the bottom :/

[Djentleman]

That doesn't appear to have worked - it's rendering everything in the table above as red.

[Djentleman]

Ok, I figured out the issue. The hue was a tiny decimal, meaning it barely moved the colour along the spectrum. When it was multiplied by 240 (the position of pure blue on the HSV spectrum), it worked as expected. Thanks for the help!

[Craig.Feied]

As written, this code crashes with an index out of bounds exception when GetColorForValue is called with val == maxval. A simple fix would be double valPerc = val / (maxval + 1)

[Craig.Feied]

BTW, this was the best color-mapping code example I found after several hours of searching. Using (maxval + 1) to keep valPerc below 1.0 worked great in my environment, but you might need a different approach depending on the range of your values.

[Gondil]

I have also used this implementation, it is nice. You can configure your own colors in gradient, etc. But I have changed some lines. Your implementation is assuming that minVal is 0 but what if it is not? So I used double valPerc = (val-minVal) / (maxVal-minVal); Also changed @Craig.Feied treatment of case val==maxVal this way Color cNext = val == maxVal ? ColorGradient[blockIdx] : ColorGradient[blockIdx + 1]; Because when you use double valPerc = val / (maxval + 1) you will never reach max color which is in this case red.

[Olivier Jacot-Descombes]

I fixed the index error by adding the last color (white) twice to the ColorsOfMap list and then used ColorsOfMap.Count-2 instead of ColorsOfMap.Count-1 in the calculation of colorPerc.