I've been hacking away at a map visualization that I'm surprised hasn't appeared elsewhere already - a heatmap that interpolates between sample points.
Every other heat map I've come across approximates interpolation by rendering circles with fading alpha at sample points and relies on the density of points to achieve a smooth result.
Below is an early screenshot of a canvas-based heatmap overlay I'm writing that is built from the Delaunay triangulation of the underlying data points (that's quite a mouthful!).
I'm using a scanline-based Gouraud shading algorithm to render the triangles to the canvas myself having tried and failed to get WebGL, SVG and CSS to do the job for me (none of these can draw triangles with three different coloured vertices with any serious speed).
 |
| Prices for 2BR units across Sydney's inner west. |
If there is interest, I will clean up and release the code once I have it working reasonably well and post it somewhere. For now, I'm rethinking my choice of Gouraud shading because with under-sampled data like I have here, it gives some very ugly, sharp lines.
I'm currently using it to display property values but hopefully others can think up some more good uses for it.
No comments:
Post a Comment