A while back, I decided to build a small prototype for a heat map to be driven from temperature sensor data from a home HVAC system. This was really intended to test out the combination of a few different technologies: SVG.js, Vue.js, animations, color gradients, and spatial interpolation algorithms.
I started with an architectural floor plan and converted it into an SVG. I then defined polygons for each of the temperature zones on the main floor then added badges for each of the temperature sensor locations.
In order to keep the rendering performance reasonable, I decided to write an algorithm to place the minimum number of hexagons (which I’m using for my temperature cells) to cover all the zones. In retrospect, I should have used a library, but I figured that writing a point-in-polygon routine would be straightforward (and it was).
I tested out several spatial interpolation algorithms to determine the “temperature” of each hexagon in the heat map. There are several controls connected directly to the parameters of the interpolation algorithm for quick experimentation. There are also options to enable/disable per-hexagon temperature labels, enable/disable color, and a few other visual features.
At some point in the near future I’ll be adding a large number of sensors and can verify the accuracy of the interpolated data.
I was pleased with the result, but didn’t quite have enough time to implement all the options that I wanted.
