Upgrade to d3v4

.gitignore

@@ -0,0 +1 @@
+node_modules/

.travis.yml

@@ -0,0 +1,4 @@
+language: node_js
+node_js:
+  - '8'
+  - '6'

README.md

@@ -1,10 +1,12 @@
-# d3.layout.grid
+# d3-grid
 
-A grid layout for [D3](http://d3js.org). The grid layout takes a one-dimensional array of data and arranges it on a two-dimensional grid.
+A grid layout for [D3](http://d3js.org)v4.
+
+The grid layout takes a one-dimensional array of data and arranges it on a two-dimensional grid.
 
 ## API
 
-<a name="layout-grid" href="#layout-grid">#</a> d3.layout.<b>grid</b>()
+<a name="layout-grid" href="#layout-grid">#</a> d3.<b>grid</b>()
 
 Constructs a new grid layout.
 
@@ -17,20 +19,21 @@ Computes the layout for <i>nodes</i>. Per default, the layout tries to keep the
 
 <a name="points" href="#points">#</a> grid.<b>points</b>()
 
-Configure the grid to treat nodes as points, cf. [d3.scale.ordinal().rangePoints()](https://github.com/mbostock/d3/wiki/Ordinal-Scales#wiki-ordinal_rangePoints).
+Configure the grid to treat nodes as points, cf. [d3.scalePoints().range()](https://github.com/d3/d3-scale#point-scales).
+
 
 <a name="bands" href="#bands">#</a> grid.<b>bands</b>()
 
-Configure the grid to treat nodes as bands, cf. [d3.scale.ordinal().rangeBands()](https://github.com/mbostock/d3/wiki/Ordinal-Scales#wiki-ordinal_rangeBands)
+Configure the grid to treat nodes as bands, cf. [d3.scaleBand().range()](https://github.com/d3/d3-scale#band-scales).
 
 <a name="padding" href="#padding">#</a> grid.<b>padding</b>([<i>padding</i>])
 
-Specify the <i>padding</i> between the node bands as [<i>x</i>, <i>y</i>]. <i>x</i> and <i>y</i> are relative to the band width/height, similar to the <i>padding</i> parameter of [d3.scale.ordinal().rangeBands()](https://github.com/mbostock/d3/wiki/Ordinal-Scales#wiki-ordinal_rangeBands).
+Specify the <i>padding</i> between the node bands as [<i>x</i>, <i>y</i>]. <i>x</i> and <i>y</i> are relative to the band width/height, similar to the <i>padding</i> parameter of [d3.scaleBand().range()](https://github.com/mbostock/d3/wiki/Ordinal-Scales#wiki-ordinal_rangeBands).
 
 If [nodeSize](#nodeSize) is set, <i>padding</i> is absolute. For example, to configure a grid layout for nodes with 100×100px size, and 20px horizontal and vertical padding, use:
 
 ```javascript
-var grid = d3.layout.grid()
+var grid = d3.grid()
   .nodeSize([100, 100])
   .padding([20, 20]);
 ```
@@ -59,15 +62,18 @@ If <i>nodeSize</i> is set, returns the current <i>nodeSize</i>.
 
 If instead [size](#size) is set, returns the actual size of a node <i>after</i> [grid](#grid) has been called.
 
-
 ## Examples
 
-* [Grid layout demo](http://bl.ocks.org/herrstucki/5684816)
+* [Grid layout demo](http://bl.ocks.org/basilesimon/dbb876d063f2b0475824dbd6b16c251f)
 
 ## Author
 
 Jeremy Stucki, [Interactive Things](http://interactivethings.com)
 
+## Contributors
+
+Basile Simon, [@basilesimon](https://twitter.com/basilesimon)
+
 ## License
 
 BSD, see LICENSE.txt

index.js

@@ -0,0 +1 @@
+export { default as grid } from './src/d3-grid';

package.json

@@ -1,10 +1,13 @@
 {
   "name": "d3-grid",
-  "version": "0.1.1",
-  "description": "Grid layout for D3",
+  "version": "0.2.0",
+  "description": "Grid layout for D3v4",
   "main": "d3-grid.js",
+  "module": "index",
+  "jsnext:main": "index",
   "scripts": {
-    "test": "node_modules/.bin/vows --spec"
+    "pretest": "rm -rf build && mkdir build && rollup --banner \"$(preamble)\" -f umd -n d3 -o build/d3-grid.js -- index.js",
+    "test": "vows test/*"
   },
   "repository": "https://github.com/interactivethings/d3-grid.git",
   "keywords": [
@@ -16,11 +19,20 @@
     "name": "Jeremy Stucki",
     "url": "http://interactivethings.com"
   },
-  "license": "BSD",
+  "constributors": [
+    {
+      "name": "Basile Simon",
+      "url": "https://twitter.com/basilesimon"
+    }
+  ],
+  "license": "BSD-3-Clause",
   "dependencies": {
-    "d3": "~3.1.5"
+    "d3-scale": "^1.0.6"
   },
   "devDependencies": {
+    "d3": "^4",
+    "package-preamble": "0.0",
+    "rollup": "0.41",
     "vows": "~0.7.0"
   }
 }

src/d3-grid.js

@@ -0,0 +1,117 @@
+export default function() {
+  var mode = 'equal',
+    layout = _distributeEqually,
+    x = d3.scaleOrdinal(),
+    y = d3.scaleOrdinal(),
+    size = [1, 1],
+    actualSize = [0, 0],
+    nodeSize = false,
+    bands = false,
+    padding = [0, 0],
+    cols,
+    rows;
+
+  function grid(nodes) {
+    return layout(nodes);
+  }
+
+  function _distributeEqually(nodes) {
+    var i = -1,
+      n = nodes.length,
+      _cols = cols ? cols : 0,
+      _rows = rows ? rows : 0,
+      col,
+      row;
+
+    if (_rows && !_cols) {
+      _cols = Math.ceil(n / _rows);
+    } else {
+      _cols || (_cols = Math.ceil(Math.sqrt(n)));
+      _rows || (_rows = Math.ceil(n / _cols));
+    }
+
+    if (nodeSize) {
+      x = d3.scaleOrdinal();
+      y = d3.scaleOrdinal();
+      x
+        .domain(d3.range(_cols))
+        .range(
+          d3.range(0, (size[0] + padding[0]) * _cols, size[0] + padding[0])
+        );
+      y
+        .domain(d3.range(_rows))
+        .range(
+          d3.range(0, (size[1] + padding[1]) * _rows, size[1] + padding[1])
+        );
+      actualSize[0] = bands ? x(_cols - 1) + size[0] : x(_cols - 1);
+      actualSize[1] = bands ? y(_rows - 1) + size[1] : y(_rows - 1);
+    } else if (bands) {
+      var x = d3.scaleBand();
+      var y = d3.scaleBand();
+      x.domain(d3.range(_cols)).range([0, size[0]], padding[0], 0);
+      y.domain(d3.range(_rows)).range([0, size[1]], padding[1], 0);
+      actualSize[0] = x.bandwidth() - 10;
+      actualSize[1] = y.bandwidth() - 10;
+    } else {
+      var x = d3.scalePoint();
+      var y = d3.scalePoint();
+      x.domain(d3.range(_cols)).range([0, size[0]]);
+      y.domain(d3.range(_rows)).range([0, size[1]]);
+      actualSize[0] = x(1);
+      actualSize[1] = y(1);
+    }
+
+    while (++i < n) {
+      col = i % _cols;
+      row = Math.floor(i / _cols);
+      nodes[i].x = x(col);
+      nodes[i].y = y(row);
+    }
+
+    return nodes;
+  }
+
+  grid.size = function(value) {
+    if (!arguments.length) return nodeSize ? actualSize : size;
+    actualSize = [0, 0];
+    nodeSize = (size = value) == null;
+    return grid;
+  };
+
+  grid.nodeSize = function(value) {
+    if (!arguments.length) return nodeSize ? size : actualSize;
+    actualSize = [0, 0];
+    nodeSize = (size = value) != null;
+    return grid;
+  };
+
+  grid.rows = function(value) {
+    if (!arguments.length) return rows;
+    rows = value;
+    return grid;
+  };
+
+  grid.cols = function(value) {
+    if (!arguments.length) return cols;
+    cols = value;
+    return grid;
+  };
+
+  grid.bands = function() {
+    bands = true;
+    return grid;
+  };
+
+  grid.points = function() {
+    bands = false;
+    return grid;
+  };
+
+  grid.padding = function(value) {
+    if (!arguments.length) return padding;
+    padding = value;
+    return grid;
+  };
+
+  return grid;
+}