Mesh is now usable, added simple example

rwakulszowa · Jun 9, 2016 · c36944b · c36944b
1 parent d2e586c
commit c36944b
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 44 deletions.
diff --git a/examples/d3-mesh.js b/examples/d3-mesh.js
@@ -8,38 +8,45 @@
     var dims,
         divs;
 
-    //TODO: cell.js
+    //TODO: cell.js, node.js?
     //TODO: 3 results: interpolate(relX, relY, ...) -> array of interpolated dims, mesh(dims) -> N-D array of cells / callable?, cover(context, data) -> selection of {data, d1, d2, dx...}
     //TODO: provide some useful interpolators out of the box
 
     function mesh(indices) {
-        var ans = [];
-        for (var i in dims) {
-          ans[i] = dims[i](indices[i] / divs[i]);
+      return indices.map(
+        function(el, i) {
+          // map each index to a pair (index, index+1) scaled to range [0, 1]
+          return [ +el / divs[i], ( +el + 1) / divs[i] ];
         }
-        return ans;
+      ).reduce(
+        function(obj, val, i) {
+          // convert to an object {d0: [start, end], d1:[start, end], dn...}
+          obj["d" + i] = val.map(function(el) { return dims[i](el); });
+          return obj;
+        }, {}
+      );
     }
 
     function interpolate(args) {
-        var ans = new Array(dims.length);
-        for (var i in args) {
-            ans[i] = dims[i](args[i]);
-        }
-        return ans;
+      return args.map(function(el, i) {
+        return Array.isArray(el) ? (
+          el.map(function(e) { return dims[i](e); })
+        ) : dims[i](el);
+      });
     }
 
     mesh.dims = function(_) {
-        return arguments.length ? (
-          dims = _,
-          mesh
-        ) : dims;
+      return arguments.length ? (
+        dims = _,
+        mesh
+      ) : dims;
     };
 
     mesh.divs = function(_) {
-        return arguments.length ? (
-          divs = _,
-          mesh
-        ) : divs;
+      return arguments.length ? (
+        divs = _,
+        mesh
+      ) : divs;
     };
 
     mesh.interpolate = interpolate;

diff --git a/examples/mesh.html b/examples/mesh.html
@@ -1,13 +1,9 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>
-.box {
+.cell {
   fill: mediumaquamarine;
 }
-.box {
-  max-height: 100%;
-  max-width: 100%;
-}
 </style>
 <body>
 <script src="https://d3js.org/d3.v3.min.js"></script>
@@ -30,14 +26,24 @@
 
 var mesh = d3_mesh.mesh()
     .dims([x,y])
-    .divs([4,44]);
+    .divs([4,4]);
 
 d3.json("./table.json", function(error, data) {
   if (error) throw error;
 
-  for (var i in [0,1,2]) {
-    console.log(mesh([i, i]));
+  var cells = [];
+  for (var i of [0,1,2,3]) {
+      cells.push(mesh([i, i]));
   }
+
+  plot.selectAll(".cell")
+      .data(cells)
+    .enter().append("rect")
+      .attr("class", "cell")
+      .attr("x", function(d) { return d.d0[0]; })
+      .attr("y", function(d) { return d.d1[0]; })
+      .attr("width", function(d) { return d.d0[1] - d.d0[0]; })
+      .attr("height", function(d) { return d.d1[1] - d.d1[0]; });
 });
 
 </script>
diff --git a/src/mesh.js b/src/mesh.js
@@ -2,38 +2,45 @@ export default function() {
   var dims,
       divs;
 
-  //TODO: cell.js
+  //TODO: cell.js, node.js?
   //TODO: 3 results: interpolate(relX, relY, ...) -> array of interpolated dims, mesh(dims) -> N-D array of cells / callable?, cover(context, data) -> selection of {data, d1, d2, dx...}
   //TODO: provide some useful interpolators out of the box
 
   function mesh(indices) {
-      var ans = [];
-      for (var i in dims) {
-        ans[i] = dims[i](indices[i] / divs[i]);
+    return indices.map(
+      function(el, i) {
+        // map each index to a pair (index, index+1) scaled to range [0, 1]
+        return [ +el / divs[i], ( +el + 1) / divs[i] ];
       }
-      return ans;
+    ).reduce(
+      function(obj, val, i) {
+        // convert to an object {d0: [start, end], d1:[start, end], dn...}
+        obj["d" + i] = val.map(function(el) { return dims[i](el); });
+        return obj;
+      }, {}
+    );
   }
 
   function interpolate(args) {
-      var ans = new Array(dims.length);
-      for (var i in args) {
-          ans[i] = dims[i](args[i]);
-      }
-      return ans;
+    return args.map(function(el, i) {
+      return Array.isArray(el) ? (
+        el.map(function(e) { return dims[i](e); })
+      ) : dims[i](el);
+    });
   }
 
   mesh.dims = function(_) {
-      return arguments.length ? (
-        dims = _,
-        mesh
-      ) : dims;
+    return arguments.length ? (
+      dims = _,
+      mesh
+    ) : dims;
   };
 
   mesh.divs = function(_) {
-      return arguments.length ? (
-        divs = _,
-        mesh
-      ) : divs;
+    return arguments.length ? (
+      divs = _,
+      mesh
+    ) : divs;
   };
 
   mesh.interpolate = interpolate;