I recently needed to create an interactive wireframe concept using a heatmap. This was for a presentation and I needed to walk the client through a particular story. As a result I needed just enough data to populate the heatmap but had to somehow create the data myself.
Getting the right data wouldn’t be straightforward: The heatmap, using json, requires both an x-and-y coordinates, and then a third value to denote intensity of colour on it (I’m calling it z or z-value). Since this was a POC (proof-of-concept) I needed just enough for it to work, but didn’t want to over-engineer it.
Even though the heatmap is about 750 by 500 pixels, you don’t need 500 rows and 750 columns in Excel to get it to work. In my example I had 30 rows and 47 columns, and then I just multiplied them to get them to reach across to the full range of pixels in the heat map. This is because the points are fuzzy and spread out and cover any gaps. You’ll see this in the Excel example for download, below.
Since I was kind of hacking this out, I simply created a grid in Excel which had x-coordinates along the top, y-coordinates on the side, and then in the middle, the z-values. In order for me to see roughly what it would look like, I used conditional formatting in Excel to show colour values based on a scale.
Below the Excel ‘heatmap’, I concatenated values in the format of the json file, multiplying the coordinates so it would fill in the whole canvas in html. Then I cut the ‘json’ file into somewhere the javascript would find it. Running the simpleheat.js code on the placeholder file was the final step.
In case the explanation isn’t enough, I’ve made the Excel file available for download here.
[…] the data is not actually generated by the client; it was data that I created for this purpose (see my blog post on creating placeholder data). For the demo, there are actually several data […]