Comments on: How to make heat maps in Flex

By: Ryan G0dlonton-Shaw

Ryan G0dlonton-Shaw — Wed, 27 Apr 2011 10:36:19 +0000

Amazing concept.

By: Omar

Omar — Sun, 30 Jan 2011 21:38:20 +0000

Hello Michael, Thanks for your suggestion, I’ll take a try and let you know my results… Good Bye!

By: Michael

Michael — Sat, 29 Jan 2011 15:01:45 +0000

Omar, the HeatMap wasn’t really built to do that, but that is definitely a good feature. You would need a way to let the class know what radius to use for each point, so you could add a radiusFunction and call it in the same way as the transformation/weight functions. drawHeatMap would need to be altered so creating the heatMapItem happened inside the loop since that is the object responsible for drawing each point. I hope this helps.

By: Omar

Omar — Thu, 27 Jan 2011 18:35:26 +0000

Hello Michael, gr8 job… i’ve been using this component. I’d like you to tell me how can I modify the itemRadius property to change the size of a point dynamically, I’ve modified the point:Point for an Object (with the point inside) and the current radius but all objects become the same size… Hope you can give me a hand. Thank you very much…

By: Jon

Jon — Sun, 20 Dec 2009 15:56:51 +0000

Thanks Michael for this great work! I’ve created a simple tool to draw the gradient by hand, and use your process to create the gradient array…

http://isokon.net/post/gradientArray/accessColorInGradient.fla

By: Shawn

Shawn — Tue, 03 Nov 2009 16:25:04 +0000

It would be interesting to extract that technique into a class that could generate random gradients, or better yet, take the algorithm and allow the user to define their own.

Again, thanks Michael!

By: Michael

Michael — Sun, 26 Apr 2009 14:35:22 +0000

Shawn: This is something that a few people have asked about, so I should probably write up a post about exactly how it works. Basically, the HeatMap needs 255 exactly colors, so it just felt more natural to pre-generate the array than calculate them on the fly. To create the arrays, I built a few linear gradients, drew them to a BitmapData that was 255 pixels wide, and extracted the color at each pixel.

By: Shawn Yale

Shawn Yale — Wed, 22 Apr 2009 16:32:52 +0000

Thank you for sharing the source. Your implementation is amazing. I noticed some performance degradation with larger canvases, but thats to be expected with the amount of points being drawn. I am curious as to the format used for the Gradient dictionary arrays. I’ve never seen colors mapped that way before. How did you come up with those values? Fireworks? Photoshop? Thanks and keep up the great work.

By: Joshua Gourneau

Joshua Gourneau — Fri, 17 Apr 2009 13:56:41 +0000

This is wonderful, thanks for posting the source! I might try to use this to do some realtime data viz.

Thanks

By: Trygve

Trygve — Sat, 09 Aug 2008 06:14:54 +0000

I found my error. In the updateDisplayList() method, the following line [graphics.drawRect(0,0,width,height);] always contained zeros for height and width so the drawHeatMap() never made it through your first if statement. I had to hardcode the width and height for some reason. I tried stage.height & stage.width but that didn’t work but I can figure that out later.

However, I have a new question for you . I’m afraid I may not be able to use this example after all. Is there a way to allow this heat map to be semi-transparent over an image. I’m assuming that I need to start with the underlying image as part of the bitmap before I start the processing of the points…? Am I heading in the right direction? I feel like a kid swinging blindly at a piñata.

Again, thanks for any help you may provide. I promise I’ll stop spamming your blog soon.