CODEWITHSUNDEEP
javascriptjquerycolorsrgbhsl
olliepower
olliepower

Reputation: 1359

Determining the correct RGB for an html heat map

I want to be able to apply a color map that blends smoothly from red to green to blue.

It is clear to me, I will need to use HSL to make such a heat map, and then convert each HSL value to an RGB value to achieve this result. However I do not know how implement the solution.

Here is the part of the code that takes a table element and determines which RGB color to apply to it. In this case, it is for a table type of "cohesive energy"

var td = document.createElement('td');
                cellKey = sprintf('%s,%s', m1, m2);
                if (_.has(table['cells'], cellKey)) {
                    var diff = table['max'] - table['min'];
                    diff = Math.max(1, diff); // prevent divide by zero when max == min.
                    var val = table['cells'][cellKey]['value'];
                    var pct = (val - table['min']) / diff;
                    var blue = Math.floor(255 * (1 - pct));
                    var red = Math.floor(255 * pct);
                    if (table['type'] == "Cohesive Energy") {

                         var blue = Math.floor(255 * (1 - pct));

                         var red = Math.floor(255 * pct);

                         td.style.background = sprintf('rgb(%d,%d,0)', red, blue);

                    }

Here is the website http://muskoka.ices.utexas.edu/~fri/fridb/server.py

Here is some sample data:https://docs.google.com/file/d/0B5gGZ4-SD7-ZU0RCWkFwN3JBYWs/edit?usp=sharing

Upvotes: 0

Views: 1306

Answers (1)

David Mills
David Mills

Reputation: 2415

You might want to take a look at Chroma.js. It's a library that will handle the generation of color scales and the conversion of colors for a variety of ranges and color spaces.

Upvotes: 1

Related Questions