Skip to content

Commit

Permalink
Renamed project back to d3-mesh
Browse files Browse the repository at this point in the history
d3-grid was already taken, dammit
  • Loading branch information
rwakulszowa committed Jul 6, 2016
1 parent 7608d11 commit 0bd3e35
Show file tree
Hide file tree
Showing 11 changed files with 177 additions and 73 deletions.
56 changes: 29 additions & 27 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,39 +1,37 @@
# d3-grid
# d3-mesh

Create a grid of SVG elements the d3 way

[A fancy example](https://cloud.githubusercontent.com/assets/10756296/15933899/de013c76-2e61-11e6-88ad-3d0fef83af32.png)
Create a mesh of SVG elements the d3 way

## Installing

If you use NPM, `npm install d3-grid`. Otherwise, download the [latest release](https://github.com/rwakulszowa/d3-grid/releases/latest).
If you use NPM, `npm install d3-mesh`. Otherwise, download the [latest release](https://github.com/rwakulszowa/d3-mesh/releases/latest).
If you are super lazy, I also keep the non-minified source in
`https://raw.githubusercontent.com/rwakulszowa/d3-grid/v0.1.0/examples/d3-grid.js`
`https://raw.githubusercontent.com/rwakulszowa/d3-mesh/v0.1.0/examples/d3-mesh.js`
which you can probably copy-paste into your script.

## API Reference

<a href="#d3_grid" name="d3_grid">#</a> <i>d3</i>.<b>grid</b>()
<a href="#d3_mesh" name="d3_mesh">#</a> <i>d3</i>.<b>mesh</b>()

Constructs a new grid with default values.
Constructs a new mesh with default values.

<a href="#grid" name="grid">#</a> <b>grid</b>(data)
<a href="#mesh" name="mesh">#</a> <b>mesh</b>(data)

Converts a n-dimensional data array to an array of dimensions specified by *grid*.**dims**, where each data point is converted to a cell object `{'data': data, 'd0': {'a': d0Start, 'b': d0End}, 'd1': {'a': d1Start, 'b': d1End}, 'dn'...}`
start and end values are calculated as specified in *d3_grid*.**cell**
Converts a n-dimensional data array to an array of dimensions specified by *mesh*.**dims**, where each data point is converted to a cell object `{'data': data, 'd0': {'a': d0Start, 'b': d0End}, 'd1': {'a': d1Start, 'b': d1End}, 'dn'...}`
start and end values are calculated as specified in *d3_mesh*.**cell**
```js
var grid = d3_grid.grid()
var mesh = d3_mesh.mesh()
.dims([
d3_grid.dimension([0, 0.5, 1]),
d3_grid.dimension([0, 0.5, 1])
d3_mesh.dimension([0, 0.5, 1]),
d3_mesh.dimension([0, 0.5, 1])
]);

var data = [
['a', 'b'],
['c', 'd']
];

grid(data); /*
mesh(data); /*
[
[
{'d0': {'a': 0, 'b': 0.5}, 'd1': {'a': 0, 'b': 0.5}, 'data': 'a'},
Expand All @@ -47,44 +45,48 @@ grid(data); /*
*/
```

<a href="#grid_dims" name="grid_dims" >#</a> <i>grid</i>.<b>dims</b>([<i>dims</i>])
<a href="#mesh_dims" name="mesh_dims" >#</a> <i>mesh</i>.<b>dims</b>([<i>dims</i>])

Dims stands for dimensions - a set of arrays defining nodes of each cell (i.e. start- and endpoints).

If *dims* is specified, sets the grid’s dims to the specified array of values. The elements in the array must be objects of type *d3_grid*.**Dimension**
If *dims* is not specified, returns the grid’s current dims.
If *dims* is specified, sets the mesh’s dims to the specified array of values. The elements in the array must be objects of type *d3_mesh*.**Dimension**
If *dims* is not specified, returns the mesh’s current dims.
The default value is ``[]``

<a href="#grid_dimension" name="grid_dimension" >#</a> <i>d3_grid</i>.<b>dimension</b>(<i>nodes</i>[<i>, divs</i>])
<a href="#mesh_dimension" name="mesh_dimension" >#</a> <i>d3_mesh</i>.<b>dimension</b>(<i>nodes</i>[<i>, divs</i>])

Constructs a new Dimension object with default *domain*.

<i>d3_grid</i>.<b>dimension</b> must be called with an array of length >=1 or a function and an integer as arguments.
<i>d3_mesh</i>.<b>dimension</b> must be called with an array of length >=1 or a function and an integer as arguments.
If *nodes* is an array, Dimension will divide its domain into a set of `nodes.length - 1` elements of start- and endpoints as defined by *nodes* argument.
If *nodes* is a callable, it must accept one argument - a number within range (0, 1). An array of length *divs* with start- and endpoints will be computed by passing *divs* equally divided numbers from range (0, 1) to *nodes*.
```js
//These are equal
var d1 = d3_grid.dimension([0, 0.5, 1]),
d2 = d3_grid.dimension(function(x) { return x; }, 2);
var d1 = d3_mesh.dimension([0, 0.5, 1]),
d2 = d3_mesh.dimension(function(x) { return x; }, 2);
```
NOTE: in most non-weird cases, you want to provide a function that is [monotonic](https://en.wikipedia.org/wiki/Monotonic_function) within range (0, 1).

Values provided / computed will be internally normalized, i.e. converted to fit within range (0, 1):
```js
//These are equal
var d1 = d3_grid.dimension([0, 0.5, 1]),
d2 = d3_grid.dimension([0, 2, 4]);
var d1 = d3_mesh.dimension([0, 0.5, 1]),
d2 = d3_mesh.dimension([0, 2, 4]);
```

<a href="#grid_dimension_domain" name="grid_dimension_domain" >#</a> <i>d3_grid.dimension</i>.<b>domain</b>([<i>domain</i>])
<a href="#mesh_dimension_domain" name="mesh_dimension_domain" >#</a> <i>d3_mesh.dimension</i>.<b>domain</b>([<i>domain</i>])

Domain is the range of values the dimension will be expanded to from range (0, 1).
```js
var dim = grid.dimension([0, 0.25, 0.5, 1])
var dim = mesh.dimension([0, 0.25, 0.5, 1])
.domain([0, 100]);
dim.nodes; // [0, 25, 50, 100]
```

If *domain* is specified, sets the grid’s domain to *domain*. *domain* must be a 2-element array of numbers.
If *domain* is specified, sets the mesh’s domain to *domain*. *domain* must be a 2-element array of numbers.
If *domain* is not specified, returns the dimension’s current domain.
The default value is ``[0, 1]``

## Examples

* [A fancy circle](https://cloud.githubusercontent.com/assets/10756296/15933899/de013c76-2e61-11e6-88ad-3d0fef83af32.png)
10 changes: 5 additions & 5 deletions examples/circles.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="d3-grid.js"></script>
<script src="d3-mesh.js"></script>
<script>

var margin = {top: 20, right: 30, bottom: 30, left: 40},
Expand All @@ -27,10 +27,10 @@
var d1 = 24, // circles
d2 = 2; // cells per circle

var grid = d3_grid.grid()
.dims([d3_grid.dimension(function(x) { return Math.pow(x, 2); }, d1)
var mesh = d3_mesh.mesh()
.dims([d3_mesh.dimension(function(x) { return Math.pow(x, 2); }, d1)
.domain([0, height / 2]),
d3_grid.dimension(function(x) { return x; }, d2)
d3_mesh.dimension(function(x) { return x; }, d2)
.domain([0, 2 * Math.PI])]); // If you want a full circle, make sure domain covers range [0, 2 * Pi], (or equivalent)

function arcCell(radius, angle) {
Expand All @@ -54,7 +54,7 @@
data.push(row);
}

var cells = grid(data);
var cells = mesh(data);
var circlesG = plot.selectAll(".circle")
.data(cells)
.enter().append("g")
Expand Down
16 changes: 8 additions & 8 deletions examples/d3-grid.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(factory((global.d3_grid = global.d3_grid || {})));
(factory((global.d3_mesh = global.d3_mesh || {})));
}(this, function (exports) { 'use strict';

function Cell(nodes, data) {
Expand Down Expand Up @@ -61,16 +61,16 @@
return dimension;
}

function grid() {
function mesh() {
var dims = [];

//TODO: utils for irregular grids (merged cells) - empty array cells? - map omits them
//TODO: utils for irregular meshs (merged cells) - empty array cells? - map omits them

//NOTE: dimension animations can be handled by moving passing / shuffling data
//NOTE: data structure will always be the same / regular
//TODO: multiple getters: flat, grouped by each dimension

function grid(data) {
function mesh(data) {
return _dig(data, [], dims.length);
}

Expand All @@ -85,17 +85,17 @@
}
}

grid.dims = function(_) {
mesh.dims = function(_) {
return arguments.length ? (
dims = _,
grid
mesh
) : dims;
};

return grid;
return mesh;
};

exports.grid = grid;
exports.mesh = mesh;
exports.dimension = dimension;
exports.Cell = Cell;

Expand Down
102 changes: 102 additions & 0 deletions examples/d3-mesh.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(factory((global.d3_mesh = global.d3_mesh || {})));
}(this, function (exports) { 'use strict';

function Cell(nodes, data) {
for (var i in nodes) {
var n = nodes[i];
if (n != undefined && n != null) {
this['d' + i] = n;
}
}
this['data'] = data;
}

Cell.prototype = {
constructor: Cell
};

function dimension(nodes, divs) {
var dimension = {},
domain = [0, 1];

dimension.nodes = nodes;
if (Array.isArray(nodes)) {
dimension.divs = nodes.length - 1;
} else if (typeof nodes == "function" && divs != undefined) {
dimension.divs = divs;
compute();
} else {
throw "Bad arguments";
}
normalize();

function compute() {
var temp = new Array(dimension.divs + 1);
for (var i=0; i < temp.length; ++i) { temp[i] = dimension.nodes(i / dimension.divs); };
dimension.nodes = temp;
};

function normalize() {
var max = Math.max.apply(null, dimension.nodes);
for (var i in dimension.nodes) { dimension.nodes[i] /= max; };
};

function expand() {
var domainLength = domain[1] - domain[0];
var expander = function(x) { return domain[0] + x * domainLength };
for (var i in dimension.nodes) { dimension.nodes[i] = expander(dimension.nodes[i]); };
}

dimension.domain = function(_) {
return arguments.length ? (
domain = _,
expand(),
dimension
) : domain;
};

return dimension;
}

function mesh() {
var dims = [];

//TODO: utils for irregular meshs (merged cells) - empty array cells? - map omits them

//NOTE: dimension animations can be handled by moving passing / shuffling data
//NOTE: data structure will always be the same / regular
//TODO: multiple getters: flat, grouped by each dimension

function mesh(data) {
return _dig(data, [], dims.length);
}

function _dig(data, nodes, depth) {
if (nodes.length == depth) {
return new Cell(nodes, data);
} else {
var nextNodes = dims[nodes.length].nodes;
return data.map(function(el, i) {
return _dig(el, nodes.concat( {'a': nextNodes[i], 'b': nextNodes[i+1] } ), depth);
});
}
}

mesh.dims = function(_) {
return arguments.length ? (
dims = _,
mesh
) : dims;
};

return mesh;
};

exports.mesh = mesh;
exports.dimension = dimension;
exports.Cell = Cell;

}));
10 changes: 5 additions & 5 deletions examples/table.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="d3-grid.js"></script>
<script src="d3-mesh.js"></script>
<script>

var margin = {top: 20, right: 30, bottom: 30, left: 40},
Expand All @@ -36,14 +36,14 @@
var rowsCount = data.length,
colsCount = data[0].length;

var grid = d3_grid.grid()
var mesh = d3_mesh.mesh()
.dims([
d3_grid.dimension([0, 0.25, 0.5, 0.75, 1]).domain([0, height]),
d3_grid.dimension([0, 0.3, 1]).domain([0, width])
d3_mesh.dimension([0, 0.25, 0.5, 0.75, 1]).domain([0, height]),
d3_mesh.dimension([0, 0.3, 1]).domain([0, width])
]);

var rows = table.selectAll(".row")
.data(grid(data))
.data(mesh(data))
.enter().append("g")
.attr("class", "row");

Expand Down
2 changes: 1 addition & 1 deletion index.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
export {default as grid} from "./src/grid";
export {default as mesh} from "./src/mesh";
export {default as dimension} from "./src/dimension";
export {default as Cell} from "./src/cell";
18 changes: 9 additions & 9 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
{
"name": "d3-grid",
"name": "d3-mesh",
"version": "0.1.0",
"description": "Create a grid of elements the d3 way",
"description": "Create a mesh of elements the d3 way",
"keywords": [
"d3", "grid", "table"
"d3", "mesh", "grid", "table"
],
"license": "MIT",
"main": "build/d3-grid.js",
"main": "build/d3-mesh.js",
"jsnext:main": "index",
"homepage": "https://github.com/rwakulszowa/d3-grid",
"homepage": "https://github.com/rwakulszowa/d3-mesh",
"repository": {
"type": "git",
"url": "https://github.com/rwakulszowa/d3-grid.git"
"url": "https://github.com/rwakulszowa/d3-mesh.git"
},
"scripts": {
"pretest": "rm -rf build && mkdir build && json2module package.json > build/package.js && rollup -f umd -n d3_grid -o build/d3-grid.js -- index.js",
"pretest": "rm -rf build && mkdir build && json2module package.json > build/package.js && rollup -f umd -n d3_mesh -o build/d3-mesh.js -- index.js",
"test": "tape 'test/**/*-test.js'",
"prepublish": "npm run test && uglifyjs build/d3-grid.js -c -m -o build/d3-grid.min.js && cp build/d3-grid.js examples/d3-grid.js",
"postpublish": "zip -j build/d3-grid.zip -- LICENSE README.md build/d3-grid.js build/d3-grid.min.js"
"prepublish": "npm run test && uglifyjs build/d3-mesh.js -c -m -o build/d3-mesh.min.js && cp build/d3-mesh.js examples/d3-mesh.js",
"postpublish": "zip -j build/d3-mesh.zip -- LICENSE README.md build/d3-mesh.js build/d3-mesh.min.js"
},
"devDependencies": {
"json2module": "0.0",
Expand Down
10 changes: 5 additions & 5 deletions src/grid.js → src/mesh.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ import dimension from "./dimension";
export default function() {
var dims = [];

//TODO: utils for irregular grids (merged cells) - empty array cells? - map omits them
//TODO: utils for irregular meshs (merged cells) - empty array cells? - map omits them

//NOTE: dimension animations can be handled by moving passing / shuffling data
//NOTE: data structure will always be the same / regular
//TODO: multiple getters: flat, grouped by each dimension

function grid(data) {
function mesh(data) {
return _dig(data, [], dims.length);
}

Expand All @@ -25,12 +25,12 @@ export default function() {
}
}

grid.dims = function(_) {
mesh.dims = function(_) {
return arguments.length ? (
dims = _,
grid
mesh
) : dims;
};

return grid;
return mesh;
};
Loading

0 comments on commit 0bd3e35

Please sign in to comment.