Creating a 'thermal image' using data points

Question

I am looking for a way to represent some data points into a 'thermal map' (500x500).

Data array:

"data": [
    {
       "x": 120,
       "y": 350,
       "temperature": 90
    },
    {
       "x": 300,
       "y": 210,
       "temperature": 35
    },
    {
       "x": 450,
       "y": 50,
       "temperature": 68
    },
]

This array should be processed into something like this using CSS and Javascript: (Very roughly)

What would be the best way to approach this using Javascript and CSS?

Answer 1

• To draw circles with gradient translucency, use radial gradients.
• To position them, use position: absolute and left: x, top: y (make sure to omit the radius).

Knowing these two CSS features, you can just iterate over the JSON, creating DOM–elements (div will do) and modifying their style property.

Schematically:

data.forEach(function (point) {
    var div = document.createElement('div');
    div.style.background = generateGradient(point.temperature);
    div.style.left = point.x - radius;
    div.style.top = point.y - radius;
    container.appendChild(div);
});

The same is achievable with Canvas and SVG, but that's a longer story.