Bug fixes; Updated examples; Updated ReadMe.md file; Rotation bug fix;

nswamy14 · Dec 30, 2023 · 9c5a9d0 · 9c5a9d0
1 parent 08e9650
commit 9c5a9d0
Show file tree

Hide file tree

Showing 11 changed files with 120 additions and 182 deletions.
diff --git a/README.md b/README.md
@@ -4,9 +4,10 @@ Open source javascript module for rendering high performance, large scale heatma
 Visual Heatmap is based on advanced graphical rendering context - WebGL/Shaders. It can render 500,000+ data points with a good framerate.
 
 <p align="center">
-  <a href="https://nswamy14.github.io/visual-heatmap/demo/heatmap3.html"> <label>Click me<label><img src="https://nswamy14.github.io/visual-heatmap/snaps/snap3.png" width=1200> </a>
-  <a href="https://nswamy14.github.io/visual-heatmap/demo/heatmap1.html"> <label>Click me<label><img src="https://nswamy14.github.io/visual-heatmap/snaps/snap1.png" width=1200></a>
-   <a href="https://nswamy14.github.io/visual-heatmap/demo/heatmap2.html"> <label>Click me<label><img src="https://nswamy14.github.io/visual-heatmap/snaps/snap2.png" width=1200> </a>
+<a href="https://nswamy14.github.io/visual-heatmap/demo/heatmap3.html"> <label>Click me<label><img src="https://nswamy14.github.io/visual-heatmap/snaps/snap3.png" width=1200> </a>
+<a href="https://nswamy14.github.io/visual-heatmap/demo/heatmap1.html"> <label>Click me<label><img src="https://nswamy14.github.io/visual-heatmap/snaps/snap1.png" width=1200></a>
+<a href="https://nswamy14.github.io/visual-heatmap/demo/heatmap2.html"> <label>Click me<label><img src="https://nswamy14.github.io/visual-heatmap/snaps/snap2.png" width=1200> </a>
+<a href="https://nswamy14.github.io/visual-heatmap/demo/heatmapWithLabels.html"> <label>Click me<label><img src="https://nswamy14.github.io/visual-heatmap/snaps/snap4.png" width=1200> </a>
 </p>
 
 ## Installing

diff --git a/demo/heatmap1.html b/demo/heatmap1.html
@@ -7,7 +7,7 @@
 <body style="height: 100%">
 
 <div id="canvas" style="height: 100%;width:100%;">
-    <img src="world_map_PNG14.png" alt="Smiley face" style="position: absolute; width: 100%; height: 100%">
+    <!-- <img src="world_map_PNG14.png" alt="Smiley face" style="position: absolute; width: 100%; height: 100%"> -->
 </div>
 <script type="text/javascript" src="./../dist/visualHeatmap.js"></script>
 <script type="text/javascript" src="./dat.gui.min.js"></script>
@@ -18,6 +18,11 @@
         size: 15.0,
         max: 100,
         intensity: 1.0,
+        backgroundImage: {
+            url: "./world_map_PNG14.png",
+            x: 0,
+            y: 0
+        },
         gradient: [{
             color: [0, 0, 0, 0.0],
             offset: 0
@@ -38,7 +43,7 @@
 
     var gui = new dat.GUI();
     var Params = function() {
-        this.points = 100;
+        this.points = 20000;
         this.size = 15;
         this.opacity = 1.0;
         this.intensity = 1.0;
@@ -77,7 +82,7 @@
         instance.setRotationAngle(params.rotationAngle);
     } );
 
-    data = generateData(100000);
+    data = generateData(20000);
     instance.renderData(data);
 
     function generateData (count) {

diff --git a/demo/heatmap2.html b/demo/heatmap2.html
@@ -7,7 +7,7 @@
 <body style="height: 100%">
 
 <div id="canvas" style="height: 100%;width:100%;background: #000;">
-    <img src="world_map_PNG14.png" alt="Smiley face" style="position: absolute; width: 100%; height: 100%">
+    <!-- <img src="world_map_PNG14.png" alt="Smiley face" style="position: absolute; width: 100%; height: 100%"> -->
 </div>
 <script type="text/javascript" src="./dat.gui.min.js"></script>
 
@@ -19,6 +19,13 @@
 let instance = Heatmap('#canvas', {
         size: 15.0,
         max: 100,
+        backgroundImage: {
+            url: "./world_map_PNG14.png",
+            // height: 553.5* 2,
+            // width: 864*2,
+            x: 0,
+            y: 0
+        },
         gradient: [{
             color: [0, 0, 0, 0.0],
             offset: 0.0
@@ -35,7 +42,7 @@
     });
 
     var gui = new dat.GUI();
-    var Params = function() {
+    var ParamsCon = function() {
         this.points = 100000;
         this.size = 15;
         this.opacity = 1.0;
@@ -48,7 +55,7 @@
         }
     };
 
-    var params = new Params();
+    var params = new ParamsCon();
 	gui.add( params, 'size', 10, 100 ).onChange( function () {
         instance.setSize(params.size);
     } );

diff --git a/demo/heatmap3.html b/demo/heatmap3.html
@@ -20,6 +20,13 @@
         max: 100,
         intensity: 1.0,
         zoom: 1.0,
+        backgroundImage: {
+            url: "./world_map_PNG14.png",
+            // height: 553.5* 2,
+            // width: 864*2,
+            x: 0,
+            y: 0
+        },
         gradient: [{
             color: [255, 255, 255, 0.0],
             offset: 0
@@ -39,7 +46,7 @@
     });
 
     var gui = new dat.GUI();
-    var Params = function() {
+    var ParamsCon = function() {
         this.points = 10000;
         this.size = 100;
         this.opacity = 1.0;
@@ -52,7 +59,7 @@
         }
     };
 
-    var params = new Params();
+    var params = new ParamsCon();
 	gui.add( params, 'size', 1, 100 ).onChange( function () {
         instance.setSize(params.size);
     } );

diff --git a/demo/heatmapWithLabels.html b/demo/heatmapWithLabels.html
@@ -8,8 +8,7 @@
 
 <div id="canvas" style="height: 100%;width:100%;">
 </div>
- <!-- include i2djs file : https://raw.githubusercontent.com/I2djs/I2D/master/dist/i2d.js  -->
-<script src="./../libs/i2d.js"></script>
+<script type="text/javascript" src="https://i2djs.github.io/I2Djs/dist/i2d.js"></script>
 <script type="text/javascript" src="./../dist/visualHeatmap.js"></script>
 <script type="text/javascript" src="./dat.gui.min.js"></script>
 
@@ -45,7 +44,7 @@
     });
 
     var gui = new dat.GUI();
-    var Params = function() {
+    var ParamsCon = function() {
         this.points = 100;
         this.size = 50;
         this.opacity = 1.0;
@@ -59,7 +58,7 @@
         }
     };
 
-    var params = new Params();
+    var params = new ParamsCon();
     gui.add( params, 'points', 1, 1000000 ).onChange( function () {
         data = generateData(params.points);
         instance.renderData(data);

diff --git a/demo/heatmap_withImage.html b/demo/heatmap_withImage.html