How to create heatmap

JavaScript
1

How to create heatmap like this

image
image678×511 31 KB

I have those data but I’m not sure how to create such colored heatmap for a given data.

I’ll do this in express js and handlebar .

Is it possible ?

2

You would just predefine colors and check to see what color you should display based on your criteria.

1 Like
3

[quote=“mawburn, post:2, topic:319321, full:true”]
You would just predefine colors [/quote]

yes. red is for negative and green is for positive.

This is the tricky part.

Is there any heatmap utility where I could feed the data and color definition . It should automaticall display heatmap.

Could you please post links which does this ?

4

This is the tricky part

Not really. There’s nothing tricky about this. I would expect any Jr to be able to do this in an interview.

if (val >= lowerThreshold && val < upperThreshold) {
    setColorOfThingy('orange')
} else if (....) {
    // More stuff
} // ...
5

some concerns here …

(1) But there is color gradient if you see the given heatmap. … how would you do that ?
I don’t think we should put color code for every data manually to get the gradient…right ?

(2) we also can’t give any fixed threshold value. because stocks data are dynamic. high redness and high greenness is relative and varies with the dynamic data.

6

Yes, I would pre-generate an array of colors, rather than trying to do it mathematically on the fly. There’s no reason to make it more complicated than it should be.

You could use something like this to get your list.

If you generate a list of colors between red and green, you can see that the max you need is like 5 or 6. Anything more and the colors are barely indistinguishable.

If you really want to do this on the fly for some reason, then you’d just figure out how to calculate gradients, then apply that where needed. But, there’s really no sense in that. Even if you have several hundred colors, you’re looking a trivial data sizes for a precomputed list.

we also can’t give any fixed threshold value. because stocks data are dynamic. high redness and high greenness is relative and varies with the dynamic data.

That just sounds like a business problem. You’re unlikely to find a library that will solve your business problem. That’s why we have jobs. :grin:

7

When you use a heatmap in Excel, you define a color for the lower/mid/upper bounds.
In your example, those are red, yellow, and green. For example:

var colorMap = [
    {red: 255, green: 0, blue: 0},
    {red: 255, green: 255, blue: 0},
    {red: 0, green: 255, blue: 0}
];

Then you could generate a table of 100 colors, starting from the first one and ending at the last color.

And then, you could find the lowest and highest figures from the table, and use those to figure out the relative distance that you are along, between the lowest and highest number, and use that relative distance to pick out one of the 100 colors to be used.

However, are you looking for a library where someone has done that work for you already instead?

8

That’s an interesting solution.

Could you please post the link. Let me check running the same.

Thanks

9

There are several things that a link could be posted for. Please provide more specifics on what you are asking about.

10

Yes, you can instead calculate the colour as HSL values dynamically, like e.g.

const getHSL = (value, max) => `hsl(${60 + 60 * value / max}, 100%, 50%)`;

You might then calculate the absolute maximum value from the data first, and then generate the HTML like so (or introduce a handlebars helper for this):

const dummyData = [0, 200, 50, -50, -75, 100, -150];
const absMax = Math.max(...dummyData.map(Math.abs));
const html = dummyData.map(value => `<div style="background-color: ${getHSL(value, absMax)}">${value}</div>`).join('');
// Render `html` somewhere...
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.