Extracting Heatmap

Inspired by this tweet, I wanted to try to do something similar in JavaScript.

Very cool hack: Extracting the original data from a heatmap image with R vector ops #rstats http://t.co/Lbi6FCXdrI pic.twitter.com/LCabkMGjXY

— Gregory Piatetsky (@kdnuggets) March 6, 2015

Fortunately, I had this old post Chart from R + Color from Javascript to serve as a reference, and I got lots of help from these links.

• http://stackoverflow.com/questions/6735470/get-pixel-color-from-canvas-on-mouseover
• http://bl.ocks.org/jinroh/4666920
• https://github.com/dtao/nearest-color
• https://github.com/Nycto/PicoModal

In a couple of hours, I got this crude but working rendering complete with a d3.js brush to get the scale.  Then since this is sort of a finance blog, I imagined we found an old correlation heatmap like the one in Pretty Correlation Map of PIMCO Funds.  Although, we could guess at the correlation values, I thought it would be a lot more fun to get live values.  Try it out below.

1. Brush over the scale / legend
2. Input scale min and max
3. Mouseover color areas in the chart

As I said, it is rough, but it works. It needs a little UI work :)