lightning-hexbin - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

lib/components/hexbin.js

@@ -7,2 +7,3 @@
 var utils = require('lightning-client-utils');
+var scale = require('d3-scale');
 
@@ -25,2 +26,11 @@
 
+    _getExtent: function(idx) {
+        var iter = function(d) { return d[idx]; };
+
+        var min = _.min(this.props.points, iter);
+        var max = _.max(this.props.points, iter);
+
+        return [min[idx], max[idx]];
+    },
+
     hexbin: function() {
@@ -30,12 +40,13 @@ return hexbin().size([this.props.width, this.props.height]).radius(this.state.radius);
 
+    scaleX: function() {
+        return scale.linear().domain(this._getExtent(0)).range([0, this.props.width]);
+    },
+
+    scaleY: function() {
+        return scale.linear().domain(this._getExtent(1)).range([0, this.props.height]);
+    },
+
     componentDidUpdate: function() {
         var context = this.getDOMNode().getContext('2d');
-        console.log('clearing rect');
         context.clearRect(0, 0, this.props.width, this.props.height);
-        // this.forceUpdate();
-
-        console.log(this.props.childen);
-        this.props.childen.map(function(c) {
-            c.forceUpdate();
-        })
     },
@@ -45,5 +56,14 @@
         var hexbin = this.hexbin();
+        var scaleX = this.scaleX();
+        var scaleY = this.scaleY();
         var path = hexbin.hexagon();
 
-        var data = hexbin(this.props.points);
+        var x, y;
+        var points = _.map(this.props.points, function(d) {
+            x = scaleX(d[0]);
+            y = scaleY(d[1]);
+            return [x, y];
+        }, this);
+
+        var data = hexbin(points);
         var value = _.pluck(data, 'length');
@@ -55,3 +75,3 @@ var colors = utils.getColorFromData({
         return _.map(data, function(d, i) {
-            return (React.createElement(Bin, {path: path, x: d.x, y: d.y, getCanvasNode: this.getDOMNode, color: colors[i]}))
+            return (React.createElement(Bin, {path: path, x: d.x, y: d.y, getCanvasNode: this.getDOMNode, color: colors[i], key: i}))
         }, this);
@@ -58,0 +78,0 @@ },

lib/index.js

@@ -5,2 +5,4 @@
 var d3 = require('d3');
+var LightningVisualization = require('lightning-visualization');
+var _ = require('lodash');
 
@@ -11,64 +13,18 @@
  */
-var LightningHexbin = function(selector, data, images, opts) {
-    this.opts = opts || {};
-    
-    this.width = (this.opts.width || $(selector).width());
-    this.height = (this.opts.height || (this.width * 0.6));
-    
-    this.data = this._formatData(data);
-    this.selector = selector;
-    this._init();
-};
+var LightningHexbin = LightningVisualization.extend({
 
-/*
- * Initialize the visualization. This is kept separate by convention to make it easy
- * to inherit from other visualization types.
- */
-LightningHexbin.prototype._init = function() {
-    // draw the actual visualization here
-    // e.g.           
+    init: function() {
 
+        React.render((React.createElement(Hexbin, {points: this.data.points, width: this.width, height: this.height})), $(this.selector)[0]);
+    },
 
-    var randomX = d3.random.normal(this.width / 2, 80);
-    var randomY = d3.random.normal(this.height / 2, 80);
-    var points = d3.range(2000).map(function() { return [randomX(), randomY()]; });
+    formatData: function(data) {
+        return {
+            points: _.zip(data.x || [], data.y || [])
+        }
+    }
 
-    this.data = {
-      points: points
-    };
+});
 
-    React.render((React.createElement(Hexbin, {points: this.data.points, width: this.width, height: this.height})), $(this.selector)[0]);
-}
 
-/*
- * Take the provided data and return it in whatever data format is needed
- */
-LightningHexbin.prototype._formatData = function(data) {
-   var transformedData = data;
-   
-   // …
-   // transform the data into whatever form you need here
-   // …
-   
-    return transformedData;
-    
-}
-
-/*
- * Optional function, use this if you want to users to send updated data to this plot
- */
-LightningHexbin.prototype.updateData = function(data) {
-    this.data = this._formatData(data);
-    // then update the visualization
-}
-
-/*
- * Optional function, use this if you want to enable streaming updates to this plot
- */
-LightningHexbin.prototype.appendData = function(data) {
-    this.data = this.data.concat(this._formatData(data));
-    // then update the visualization
-}
-
-
-module.exports = LightningHexbin;
+module.exports = LightningHexbin;

package.json

 {
   "name": "lightning-hexbin",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Lightning hexbin visualization",
@@ -18,3 +18,5 @@ "main": "index.js",
     "d3": "^3.5.5",
+    "d3-scale": "0.0.2",
     "lightning-client-utils": "^0.6.3",
+    "lightning-visualization": "0.0.1",
     "lodash": "^3.9.3",
@@ -27,9 +29,208 @@ "react": "^0.13.3"
         "name": "test",
-        "data": [
-          1,
-          2,
-          3,
-          4,
-          5
-        ]
+        "data": {
+          "x": [
+            86,
+            41,
+            95,
+            24,
+            100,
+            70,
+            62,
+            81,
+            63,
+            64,
+            5,
+            9,
+            51,
+            95,
+            4,
+            64,
+            37,
+            73,
+            42,
+            17,
+            43,
+            97,
+            8,
+            58,
+            57,
+            85,
+            36,
+            37,
+            9,
+            52,
+            29,
+            16,
+            42,
+            34,
+            35,
+            90,
+            12,
+            77,
+            57,
+            96,
+            50,
+            31,
+            65,
+            95,
+            29,
+            87,
+            93,
+            37,
+            76,
+            64,
+            71,
+            81,
+            6,
+            5,
+            42,
+            53,
+            85,
+            38,
+            79,
+            58,
+            71,
+            88,
+            16,
+            82,
+            21,
+            79,
+            71,
+            47,
+            18,
+            54,
+            44,
+            89,
+            31,
+            16,
+            6,
+            93,
+            38,
+            77,
+            84,
+            40,
+            75,
+            21,
+            10,
+            95,
+            74,
+            64,
+            92,
+            16,
+            48,
+            5,
+            84,
+            73,
+            49,
+            10,
+            35,
+            48,
+            92,
+            56,
+            33,
+            61
+          ],
+          "y": [
+            30,
+            28,
+            52,
+            28,
+            18,
+            40,
+            61,
+            34,
+            39,
+            26,
+            81,
+            63,
+            22,
+            79,
+            71,
+            48,
+            34,
+            15,
+            10,
+            73,
+            19,
+            62,
+            90,
+            68,
+            38,
+            63,
+            9,
+            58,
+            34,
+            27,
+            71,
+            1,
+            91,
+            72,
+            9,
+            57,
+            55,
+            25,
+            94,
+            16,
+            35,
+            60,
+            95,
+            24,
+            1,
+            29,
+            91,
+            24,
+            80,
+            34,
+            55,
+            87,
+            100,
+            4,
+            25,
+            57,
+            62,
+            8,
+            17,
+            47,
+            94,
+            32,
+            96,
+            37,
+            19,
+            46,
+            54,
+            10,
+            51,
+            74,
+            76,
+            49,
+            92,
+            17,
+            63,
+            28,
+            23,
+            77,
+            10,
+            17,
+            29,
+            11,
+            79,
+            3,
+            93,
+            14,
+            78,
+            5,
+            5,
+            97,
+            60,
+            12,
+            6,
+            54,
+            94,
+            60,
+            59,
+            28,
+            77,
+            65
+          ]
+        }
       }
@@ -36,0 +237,0 @@ ]

src/components/hexbin.js

@@ -7,2 +7,3 @@
 var utils = require('lightning-client-utils');
+var scale = require('d3-scale');
 
@@ -25,2 +26,11 @@
 
+    _getExtent: function(idx) {
+        var iter = function(d) { return d[idx]; };
+
+        var min = _.min(this.props.points, iter);
+        var max = _.max(this.props.points, iter);
+
+        return [min[idx], max[idx]];
+    },
+
     hexbin: function() {
@@ -30,2 +40,10 @@ return hexbin().size([this.props.width, this.props.height]).radius(this.state.radius);
 
+    scaleX: function() {
+        return scale.linear().domain(this._getExtent(0)).range([0, this.props.width]);
+    },
+
+    scaleY: function() {
+        return scale.linear().domain(this._getExtent(1)).range([0, this.props.height]);
+    },
+
     componentDidUpdate: function() {
@@ -38,5 +56,14 @@ var context = this.getDOMNode().getContext('2d');
         var hexbin = this.hexbin();
+        var scaleX = this.scaleX();
+        var scaleY = this.scaleY();
         var path = hexbin.hexagon();
 
-        var data = hexbin(this.props.points);
+        var x, y;
+        var points = _.map(this.props.points, function(d) {
+            x = scaleX(d[0]);
+            y = scaleY(d[1]);
+            return [x, y];
+        }, this);
+
+        var data = hexbin(points);
         var value = _.pluck(data, 'length');
@@ -48,3 +75,3 @@ var colors = utils.getColorFromData({
         return _.map(data, function(d, i) {
-            return (<Bin path={path} x={d.x} y={d.y} getCanvasNode={this.getDOMNode} color={colors[i]} />)
+            return (<Bin path={path} x={d.x} y={d.y} getCanvasNode={this.getDOMNode} color={colors[i]} key={i} />)
         }, this);
@@ -51,0 +78,0 @@ },

src/index.js

@@ -5,2 +5,4 @@
 var d3 = require('d3');
+var LightningVisualization = require('lightning-visualization');
+var _ = require('lodash');
 
@@ -11,64 +13,18 @@
  */
-var LightningHexbin = function(selector, data, images, opts) {
-    this.opts = opts || {};
-    
-    this.width = (this.opts.width || $(selector).width());
-    this.height = (this.opts.height || (this.width * 0.6));
-    
-    this.data = this._formatData(data);
-    this.selector = selector;
-    this._init();
-};
+var LightningHexbin = LightningVisualization.extend({
 
-/*
- * Initialize the visualization. This is kept separate by convention to make it easy
- * to inherit from other visualization types.
- */
-LightningHexbin.prototype._init = function() {
-    // draw the actual visualization here
-    // e.g.           
+    init: function() {
 
+        React.render((<Hexbin points={this.data.points} width={this.width} height={this.height} />), $(this.selector)[0]);
+    },
 
-    var randomX = d3.random.normal(this.width / 2, 80);
-    var randomY = d3.random.normal(this.height / 2, 80);
-    var points = d3.range(2000).map(function() { return [randomX(), randomY()]; });
+    formatData: function(data) {
+        return {
+            points: _.zip(data.x || [], data.y || [])
+        }
+    }
 
-    this.data = {
-      points: points
-    };
+});
 
-    React.render((<Hexbin points={this.data.points} width={this.width} height={this.height} />), $(this.selector)[0]);
-}
 
-/*
- * Take the provided data and return it in whatever data format is needed
- */
-LightningHexbin.prototype._formatData = function(data) {
-   var transformedData = data;
-   
-   // …
-   // transform the data into whatever form you need here
-   // …
-   
-    return transformedData;
-    
-}
-
-/*
- * Optional function, use this if you want to users to send updated data to this plot
- */
-LightningHexbin.prototype.updateData = function(data) {
-    this.data = this._formatData(data);
-    // then update the visualization
-}
-
-/*
- * Optional function, use this if you want to enable streaming updates to this plot
- */
-LightningHexbin.prototype.appendData = function(data) {
-    this.data = this.data.concat(this._formatData(data));
-    // then update the visualization
-}
-
-
-module.exports = LightningHexbin;
+module.exports = LightningHexbin;

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16128

increased by14.36%

Worsened metrics

Dependency count

6

increased by50%

Lines of code

319

decreased by-9.12%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Addedd3-scale@0.0.2

• + Addedlightning-visualization@0.0.1

• + Addedd3-scale@0.0.2(transitive)

• + Addedlightning-visualization@0.0.1(transitive)