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:

implementation Heatmap of the 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 business support services, this is good, most of the Earth's Open source project authors to make a barely available in the primary version, after years have not been updated, and really can actually use the line of products which do not need continuous improvement, Enhanced scalability and the provision of special customization services, considering that the author has paid so much for the past two years (over the last 2 years, I devoted  more than hours  of Work to improving heatmap.js to make it a truly great library. ), hope this article can also help the author in the domestic starting point propaganda role.

Heatmapjs uses the canvas 2D rendering method, this CPU-based drawing method for hundreds of thousands of points, but if you need to compute thousands of nodes in real-time, or rely on the more powerful GPU mode, using HTML5 can only be the WebGL solution, Fortunately Florian Boesch in the "High performance JS heatmaps" blog provides a heatmap approach based on WEBGL implementation, and open it up in https://github.com/pyalot/ Webgl-heatmap, these two open source libraries are also good quality, a canvas-based implementation, a WEBGL-based implementation, the latter performance high, but need to support WebGL browser, HEATMAPJS document example is more comprehensive, but both interfaces are very simple and easy to learn, The code is hundreds of lines, and you can choose and even optimize the code based on the project situation.

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.

The entire implementation code below hundred lines, you can also use Https://github.com/pyalot/webgl-heatmap WebGL way to achieve, this is 3D to 2D to 3D of the fun process, This is how HTML5 technology can seamlessly blend the charms of various solutions!

1MAX = 500;2WIDTH = 1024;3HEIGHT = 512; 4 functioninit () {5Datamodel =Newht.            Datamodel (); 6G3d =NewHt.graph3d.Graph3dView (Datamodel); 7G3d.getmovemode =function(e) {return' XYZ '; }; 8View =G3d.getview (); 9View.classname = ' main ';Ten document.body.appendChild (view);  OneWindow.addeventlistener (' Resize ',function(e) {g3d.invalidate ();},false);  AHeatmap =h337.create ({width:width, height:height});  -Ht. Default.setimage (' Hm-bottom ', Heatmap._renderer.canvas);  -     varFloor =Newht. Node (); theFLOOR.S3 (WIDTH, 1, HEIGHT); - Floor.s ({ -' 3d.selectable ':false, -' Layoutable ':false, +' All.visible ':false, -' Top.visible ':true, +' Top.image ': ' Hm-bottom ', A' Top.reverse.flip ':true, at' Bottom.visible ':true, -' Bottom.transparent ':true, -' Bottom.opacity ': 0.5, -' Bottom.reverse.flip ':true                 -     }); - Datamodel.add (floor);  in     varRoot =CreateNode ();  -      for(vari = 0; I < 3; i++) { to         varINode =CreateNode ();  + Createedge (root, INode); -          for(varj = 0; J < 3; J + +) { the             varJNode =CreateNode ();  * Createedge (INode, JNode);  $         }Panax Notoginseng     }                    -Forcelayout =Newht.layout.Force3dLayout (g3d);  the Forcelayout.start (); +Forcelayout.onrelaxed =function(){ A         varPoints = []; theDatamodel.each (function(data) { +             if(DatainstanceofHt. Node && Data!==Floor ) { -                 varP3 =data.p3 (); $                 if(P3[1] >MAX) { $P3[1] =MAX; - data.setelevation (MAX); -                 } the                 Else if(P3[1] <-MAX) { -P3[1] =-MAX;WuyiData.setelevation (-MAX); the                 }                         - Points.push ({ WuX:p3[0] + WIDTH/2, -Y:P3[2] + HEIGHT/2, AboutValue:max-math.abs (p3[1]) $                 }); -             } -         }); -Heatmap.setdata ({data:points, min:0, Max:max}); A     }; + } the functionCreateNode () { -     varnode =Newht.             Node ();  $ node.s ({ the' Shape3d ': ' Sphere ', the' Shape3d.color ': ' #E74C3C ', the' Shape3d.opacity ': 0.8, the' Shape3d.transparent ':true, -' Shape3d.reverse.cull ':true in     }); theNODE.S3 (20, 20, 20); the datamodel.add (node); About     returnnode; the } the functionCreateedge (Sourcenode, TargetNode) { the     varEdge =Newht. Edge (Sourcenode, targetnode); + edge.s ({ -' Edge.width ': 3, the' Edge.offset ': 10,                Bayi' Shape3d ': ' Cylinder ', the' Shape3d.opacity ': 0.7, the' Shape3d.transparent ':true, -' Shape3d.reverse.cull ':true -     }); the Datamodel.add (edge); the     returnEdge; the}

Application of Heatmap Heat map 3D based on HTML5 implementation