Application of Heatmap Heat map 3D based on HTML5 implementation

Heatmap Heat map through a number of data point information, aggregated into an intuitive visual color effect, heat map has been widely used in meteorological forecasts, medical imaging, computer room temperature monitoring and other industries, and even applied to the field of competitive sports data analysis.

There are many articles that share the principle of generating heatmap heat maps, and you can refer to "How to make heat maps" and "How to makes heat maps in Flex", this article introduces the implementation method based on HTML5 technology, Mainly based on the application of 2D and 3D Technologies of the two HTML5, Cavans and WebGL, the interface effect and operation Video realized by the final example first:

Realizing Heatmap's open source JS Library is more famous is  heatmapjs , the framework developed for more than 2 years, the author Patrick Wied recently decided to maintain open source based on the provision of paid commercial support services, which is good, The vast majority of open-source project authors on Earth have been barely for years without updating, and the products that actually use the line are not required to continue to improve, enhance scalability and provide special customization services, considering that the author has invested so much for the last two years (over the last 2 years, I devoted  more than-hours  of work-improving heatmap.js-make it a truly great l ibrary. ), hope this article can also help the author in the domestic starting point propaganda role.

heatmapjs  uses the 2D rendering of the canvas, this CPU-based rendering is good for hundreds of thousands of points, but if you need to compute thousands of nodes in real-time, you have to rely on a more powerful GPU mode of concurrency, Using HTML5 words can only be WebGL program, fortunately Florian Boesch in the "High performance JS heatmaps" blog provides a heatmap based on WEBGL implementation, and open it in https:// github.com/pyalot/webgl-heatmap  , these two open source libraries are both good quality, a canvas-based implementation, a WEBGL-based implementation, a high-performance, but need to support WebGL browser, heatmapjs  's document example is more comprehensive, but both interfaces are very simple and easy to learn, the code is also hundreds of lines, you can choose the project according to the situation and even code transformation optimization.

Back to the example we want to implement, I will use HEATMAPJS in memory in real-time operation of the heat map, combined with the Hightopo HT for Web 3D engine, a bunch of nodes connected to the 3D network topology diagram, wherein the node represents a heat source, the closer to the ground the higher the ground temperature, In this way, the XZ surface coordinate information of each node is used as the point XY coordinate information to be passed to Heatmapjs, the elevation of the three-dimensional node is also the Y axis information, as the distance information from the ground, the larger the distance is, the smaller the value of the Heatmapjs to pass in, and the last HT For web's three-dimensional topology auto-layout elastic algorithm, so as to visually observe the changes in the temperature and heat map of the floor when the element nodes are dynamically changing in different spatial positions.

The code core is in the overloaded forcelayout.onrelaxed function, where each automatic layout process constructs the information for all heat source nodes into heatmap required data, while passing ht.Default.setImage (' Hm-bottom ', heatmap . _renderer.canvas); The canvas of the heat map is registered as a picture of HT, and floor elements of floors are bound to the registered ' Hm-bottom ' picture, which enables the memory to be drawn to canvas and then via the HT for The web's 3D engine dynamically renders cavnas as mapping information to a 3D scene.

max = 500; width = 1024; Height = 512;        function init ()  {                             datamodel = new ht. Datamodel ();            g3d = new  Ht.graph3d.Graph3dView (Datamodel);                              G3d.getmovemode = function (e) { return  ' xyz '; };                          View = g3d.getview ();             view.classname =  ' main ';d ocument.body.appendChild (view);     window.addeventlistener (' Resize ', function  (e)  { g3d.invalidate ();  }, false);             heatmap = h337.create ({ width: width, height: height });                                     ht. Default.setimage (' Hm-bottom ',  heatmap._renderer.canvas);             var floor = new ht. Node (); Floor.s3 (width, 1, height); Floor.s ({' 3d.selectable ':  false, ' layoutable ':  false, ' All.visible ':  false, ' top.visible ':  true, ' top.image ':  ' hm-bottom ', ' top.reverse.flip ':  true, ' bottom.visible ':  true, ' bottom.transparent ':  true, ' Bottom.opaCity ':  0.5, ' Bottom.reverse.flip ': true                 });d Atamodel.add (floor);             var root = createnode ();                    for  (var i = 0;  i < 3; i++)  {var inode = createnode ();                         createedge (Root, inode);for  (var j = 0; j < 3; j++)  {var jnode = createnode ();                              Createedge (Inode, jnode);                                                             }}                    forcelayout = new ht.layout.force3dlayout (g3d);   forceLayout.start ( ); Forcelayout.onrelaxed = function () {var points = [];d Atamodel.each (function (data) {if (Data instanceof ht. Node && data !== floor) {var p3 = data.p3 (); if (p3[1] >  Max) {p3[1] = max;data.setelevation (max);} Else if (P3[1] < -max) {p3[1] = -max;data.setelevation (-MAX);}            &nbSp;            points.push ({x: p3[0] +  width/2,y: p3[2] + height/2,value: max - math.abs (P3[1])}); Heatmap.setdata ({Data: points, min: 0, max: max});};} Function createnode () {var node = new ht. Node ();              node.s ({' Shape3d ':  ') Sphere ', ' shape3d.color ':  ' #E74C3C ', ' shape3d.opacity ':  0.8, ' shape3d.transparent ':  true, ' Shape3d.reverse.cull ':  true}); Node.s3 (20, 20, 20);d atamodel.add (node); return node;} Function createedge (Sourcenode, targetnode) {var edge = new ht. Edge (Sourcenode, targetnode); Edge.s ({' edge.width ':  3, ' Edge.offset ': 10,                  ' shape3d ':  ' cylinder ', ' Shape3d.opacity ':  0.7, ' shape3d.transparent ':  true, ' shape3d.reverse.cull ':  true});d Atamodel.add (edge); Return edge;} 

Application of Heatmap Heat map 3D based on HTML5 implementation