Creating a 'thermal image' using data points

依然范特西╮ 提交于 2019-12-12 09:52:26

问题


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?


回答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.



来源:https://stackoverflow.com/questions/22169337/creating-a-thermal-image-using-data-points

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!