simpleheat - npm Package Compare versions

Comparing version 0.0.1 to 0.1.0

package.json

 {
   "name": "simpleheat",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "A tiny JavaScript library for drawing heatmaps with Canvas",
@@ -5,0 +5,0 @@ "homepage": "https://github.com/mourner/simpleheat",

README.md

@@ -9,2 +9,43 @@ simpleheat
 
+```js
+simpleheat('canvas').data(data).draw();
+```
 
+## Reference
+
+#### Constructor
+
+```js
+// create a simpleheat object given an id or canvas reference
+var heat = simpleheat(canvas);
+```
+
+#### Data
+
+```js
+// set data of [[x, y, value], ...] format
+heat.data(data);
+
+// add a data point
+heat.add(point);
+
+// clear data
+heat.clear();
+```
+
+#### Appearance
+
+```js
+// set point radius and blur radius (25 and 15 by default)
+heat.radius(r, r2);
+
+// set gradient colors as {<stop>: '<color>'}, e.g. {0.4: 'blue', 0.65: 'lime', 1: 'red'}
+heat.gradient(grad);
+```
+
+#### Rendering
+
+```js
+// draw the heatmap with optional minimum point opacity (0.05 by default)
+heat.draw(minOpacity);
+```

simpleheat.js

@@ -9,3 +9,3 @@ /*
 
-function simpleheat(canvas, radius, gradient) {
+function simpleheat(canvas) {
     // jshint newcap: false, validthis: true
@@ -20,12 +20,3 @@ if (!(this instanceof simpleheat)) { return new simpleheat(canvas); }
 
-    this.radius(radius || 25);
-
-    this.gradient(gradient || {
-        0.00: 'rgba(0,0,255,0)',
-        0.45: 'rgb(0,0,255)',
-        0.55: 'rgb(0,255,255)',
-        0.65: 'rgb(0,255,0)',
-        0.95: 'yellow',
-        1.00: 'rgb(255,0,0)'
-    });
+    this.clear();
 }
@@ -35,19 +26,33 @@
 
-    data: function (data, max) {
+    data: function (data) {
         this._data = data;
-        this._max = max;
+
+        for (var i = 0, len = data.length; i < len; i++) {
+            this._max = Math.max(this._max, data[i][2]);
+        }
+
         return this;
     },
 
+    add: function (point) {
+        this._data.push(point);
+        this._max = Math.max(this._max, point[2]);
+        return this;
+    },
+
+    clear: function () {
+        this._data = [];
+        this._max = -Infinity;
+    },
+
     radius: function (r, blur) {
-        this._circle = document.createElement('canvas');
-
         blur = blur || 15;
 
-        var ctx = this._circle.getContext('2d'),
+        var circle = this._circle = document.createElement('canvas'),
+            ctx = circle.getContext('2d'),
             r2 = this._r = r + blur;
 
-        this._circle.width = this._circle.height = r2 * 2;
+        circle.width = circle.height = r2 * 2;
 
-        ctx.shadowOffsetX = ctx.shadowOffsetY = 1000;
+        ctx.shadowOffsetX = ctx.shadowOffsetY = 200;
         ctx.shadowBlur = blur;
@@ -57,3 +62,3 @@ ctx.shadowColor = 'black';
         ctx.beginPath();
-        ctx.arc(r2 - 1000, r2 - 1000, r, 0, Math.PI * 2, true);
+        ctx.arc(r2 - 200, r2 - 200, r, 0, Math.PI * 2, true);
         ctx.closePath();
@@ -67,3 +72,4 @@ ctx.fill();
         var canvas = document.createElement('canvas'),
-            ctx = canvas.getContext('2d');
+            ctx = canvas.getContext('2d'),
+            gradient = ctx.createLinearGradient(0, 0, 0, 256);
 
@@ -73,4 +79,2 @@ canvas.width = 1;
 
-        var gradient = ctx.createLinearGradient(0, 0, 0, 256);
-
         for (var i in grad) {
@@ -83,3 +87,3 @@ gradient.addColorStop(i, grad[i]);
 
-        this._palette = ctx.getImageData(0, 0, 1, 256).data;
+        this._grad = ctx.getImageData(0, 0, 1, 256).data;
 
@@ -89,13 +93,21 @@ return this;
 
-    draw: function () {
-        this._ctx.clearRect(0, 0, this._width, this._height);
+    draw: function (minOpacity) {
+        if (!this._circle) {
+            this.radius(25).gradient({0.45: 'blue', 0.55: 'cyan', 0.65: 'lime', 0.95: 'yellow', 1: 'red'});
+        }
 
+        var ctx = this._ctx;
+
+        ctx.clearRect(0, 0, this._width, this._height);
+
         for (var i = 0, len = this._data.length, p; i < len; i++) {
             p = this._data[i];
 
-            this._ctx.globalAlpha = p[2] ? p[2] / this._max : 0.1;
-            this._ctx.drawImage(this._circle, p[0] - this._r, p[1] - this._r);
+            ctx.globalAlpha = Math.max(p[2] / this._max, minOpacity || 0.05);
+            ctx.drawImage(this._circle, p[0] - this._r, p[1] - this._r);
         }
 
-        this._colorize();
+        var colored = ctx.getImageData(0, 0, this._width, this._height);
+        this._colorize(colored.data, this._grad);
+        ctx.putImageData(colored, 0, 0);
 
@@ -105,7 +117,3 @@ return this;
 
-    _colorize: function () {
-        var imageData = this._ctx.getImageData(0, 0, this._width, this._height),
-            pixels = imageData.data,
-            palette = this._palette;
-
+    _colorize: function (pixels, gradient) {
         for (var i = 3, len = pixels.length, j; i < len; i += 4) {
@@ -115,10 +123,7 @@ j = pixels[i] * 4;
             if (j) {
-                pixels[i - 3] = palette[j];
-                pixels[i - 2] = palette[j + 1];
-                pixels[i - 1] = palette[j + 2];
+                pixels[i - 3] = gradient[j];
+                pixels[i - 2] = gradient[j + 1];
+                pixels[i - 1] = gradient[j + 2];
             }
         }
-
-        imageData.data = pixels;
-        this._ctx.putImageData(imageData, 0, 0);
     }
@@ -125,0 +130,0 @@ };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16773

increased by5.29%

Lines of code

132

increased by3.13%

Number of lines in readme file

51

increased by410%

No dependency changes