geogrid 0.0.1 → 0.0.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "geogrid",
-  "version": "0.0.1",
-  "description": "xxx",
+  "version": "0.0.4",
+  "description": "Regular and irregular geoJSON grids ",
   "main": "src/index.js",
   "module": "src/index.js",
   "jsdelivr": "dist/index.min.js",
@@ -24,9 +24,10 @@
     "url": "git+https://github.com/neocarto/geogrid.git"
   },
   "keywords": [
-    "xxx",
-    "xxx",
-    "d3xxx"
+    "grid",
+    "regular mesh",
+    "maps",
+    "geo"
   ],
   "author": "Nicolas Lambert",
   "license": "MIT",
@@ -35,16 +36,24 @@
   },
   "homepage": "https://github.com/neocarto/geogrid#readme",
   "dependencies": {
+    "@turf/area": "^7.2.0",
+    "@turf/bbox": "^7.2.0",
+    "@turf/boolean-intersects": "^7.2.0",
     "@turf/boolean-point-in-polygon": "^7.1.0",
+    "@turf/boolean-within": "^7.2.0",
     "@turf/helpers": "^7.1.0",
     "@turf/intersect": "^7.1.0",
+    "@turf/length": "^7.2.0",
+    "@turf/line-split": "^7.2.0",
     "d3-array": "^3.2.4",
     "d3-delaunay": "^6.0.4",
     "d3-geo": "^3.1.1",
+    "d3-geo-projection": "^4.0.0",
     "docs": "^0.3.2-canary.0",
     "documentation": "^14.0.3",
     "geojson2h3": "^1.2.0",
     "h3-js": "^4.1.0",
+    "rbush": "^4.0.1",
     "rollup": "^4.10.0"
   },
   "devDependencies": {

package/src/grid/diamond.js

@@ -1,26 +1,49 @@
-import { range } from "d3-array";
-const d3 = Object.assign({}, { range });
+import { createSteppedArray } from "../helpers/createSteppedArray.js";
 
 /**
- * @function make.diamond
- * @description The `make.diamond()` function allows to create a diamond geoJSON grid in SVG coordinates.
- * @property {number} [step = 50] - step of the grid
- * @property {number} [width = 1000] - width of the grid
- * @property {number} [height = 500] - height of the grid
+ * @function diamond
+ * @summary Compute a diamond grid.
+ * @description The `diamond()` function allows to create a diamond grid in SVG coordinates.
+ * @param {number} [step = 50] - Step of the grid.
+ * @param {array} [start = [0,0]] - Positioning coordinates [x,y].
+ * @param {number} [width = 1000] - Width of the grid
+ * @param {number} [height = 500] - Height of the grid
+ * @param {boolean} [overflow = true] - Depending on the step you choose, the grid may be smaller than the bounding box defined by with and height. With overflow = true, the grid is allowed to exceed the bounding box.
+ * @returns {object} - A GeoJSON FeatureCollection
+ * @example
+ * geogrid.diamond({step:30})
  */
-export function diamond({ step = 50, width = 1000, height = 500 } = {}) {
+export function diamond({
+  start = [0, 0],
+  width = 1000,
+  height = 500,
+  step = 50,
+  overflow = true,
+} = {}) {
   let size = step * Math.sqrt(2);
 
-  // build grid
-  let x = d3.range(0, width + size, size);
-  let y = d3.range(0, height + size, size / 2).reverse();
+  let x0 = overflow ? start[0] : start[0] + size / 2;
+  let y0 = overflow ? start[1] : start[1] + size / 2;
+  let xend = start[0] + width + size / 2;
+  let yend = start[1] + height + size / 2;
+
+  let x = createSteppedArray(x0, xend, size);
+  let y = createSteppedArray(y0, yend, size / 2, false);
   let grid = x.map((x) => y.map((y, j) => [x, y, j % 2])).flat();
   grid = grid.map((d) => {
-    return d[2] == 1 ? [d[0] + size / 2, d[1]] : [d[0], d[1]];
+    return d[2] === 1 ? [d[0] + size / 2, d[1]] : [d[0], d[1]];
   });
 
+  grid = overflow
+    ? grid.filter((d) => d[0] <= start[0] + width + size / 2)
+    : grid.filter((d) => d[0] <= start[0] + width - size / 2);
+
+  grid = overflow
+    ? grid.filter((d) => d[1] <= start[1] + height + size / 2)
+    : grid.filter((d) => d[1] <= start[1] + height - size / 2);
+
   let s = size / 2;
-  // build object
+
   let result = grid.map((d, i) => {
     return {
       type: "Feature",
@@ -41,6 +64,7 @@ export function diamond({ step = 50, width = 1000, height = 500 } = {}) {
       },
     };
   });
+
   return {
     type: "FeatureCollection",
     grid: "diamond",

package/src/grid/dot.js

@@ -1,17 +1,33 @@
-import { range } from "d3-array";
-const d3 = Object.assign({}, { range });
+import { createSteppedArray } from "../helpers/createSteppedArray.js";
 
 /**
- * @function make.dot
- * @description The `make.dot()` function allows to create a geoJSON vith regular dots in SVG coordinates.
- * @property {number} [step = 50] - step of the grid
- * @property {number} [width = 1000] - width of the grid
- * @property {number} [height = 500] - height of the grid
+ * @function dot
+ * @summary Compute a dot grid.
+ * @description The `dot()` function allows to create a square grid in SVG coordinates.
+ * @param {number} [step = 50] - Step of the grid.
+ * @param {array} [start = [0,0]] - Positioning coordinates [x,y].
+ * @param {number} [width = 1000] - Width of the grid
+ * @param {number} [height = 500] - Height of the grid
+ * @param {boolean} [overflow = true] - Depending on the step you choose, the grid may be smaller than the bounding box defined by with and height. With overflow = true, the grid is allowed to exceed the bounding box.
+ * @returns {object} - A GeoJSON FeatureCollection
+ * @example
+ * geogrid.dot({step:30})
  */
-export function dot({ step = 30, width = 1000, height = 500 } = {}) {
+export function dot({
+  step = 30,
+  start = [0, 0],
+  width = 1000,
+  height = 500,
+  overflow = true,
+} = {}) {
   // build grid
-  let y = d3.range(0 + step / 2, height, step).reverse();
-  let x = d3.range(0 + step / 2, width, step);
+  let x0 = overflow ? start[0] - step / 2 : start[0];
+  let y0 = overflow ? start[1] - step / 2 : start[1];
+  let xend = overflow ? start[0] + width + step : start[0] + width;
+  let yend = overflow ? start[1] + height + step : start[1] + height;
+  let x = createSteppedArray(x0, xend, step);
+  let y = createSteppedArray(y0, yend, step, true);
+
   let grid = x.map((x) => y.map((y) => [x, y])).flat();
   let s = step / 2;
   // build object

package/src/grid/h3.js

@@ -6,11 +6,11 @@ import {
 } from "h3-js";
 
 import { featureToH3Set, h3SetToFeatureCollection } from "geojson2h3";
-import { rewind as rrewind } from "../helpers/rewind";
+import { rewind as rrewind } from "geotoolbox";
 
 /**
- * @function make.h3
- * @description The `make.h3()` function allows to create a hexbin geoJSON grid in geographical coordinates.
+ * @function h3
+ * @description The `h3()` function allows to create a hexbin geoJSON grid in geographical coordinates.
  * @property {number} [level = 0] - level of the grid. Form 0 (large hexagons) to 4 (small hexagons). See:  https://h3geo.org
  * @property {object} [domain] - a geoJSON to define an extent
  * @property {boolen} [rewind] - to rewind the output

package/src/grid/hexbin.js

@@ -1,52 +1,79 @@
-import { range, max } from "d3-array";
-const d3 = Object.assign({}, { range, max });
-
+import { createSteppedArray } from "../helpers/createSteppedArray.js";
 /**
- * @function make.hexbin
- * @description The `make.hexbin()` function allows to create a hexbin geoJSON grid in SVG coordinates.
- * @property {number} [step = 50] - step of the grid
- * @property {number} [width = 1000] - width of the grid
- * @property {number} [height = 500] - height of the grid
+ * @function hexbin
+ * @summary Compute a hexbin grid.
+ * @description The `hexbin()` function allows to create a hexbin grid in SVG coordinates.
+ * @param {number} [step = 50] - Step of the grid.
+ * @param {array} [start = [0,0]] - Positioning coordinates [x,y].
+ * @param {number} [width = 1000] - Width of the grid
+ * @param {number} [height = 500] - Height of the grid
+ * @param {boolean} [overflow = true] - Depending on the step you choose, the grid may be smaller than the bounding box defined by with and height. With overflow = true, the grid is allowed to exceed the bounding box.
+ * @returns {object} - A GeoJSON FeatureCollection
+ * @example
+ * geogrid.hexbin({step:30})
  */
-export function hexbin({ step = 50, width = 1000, height = 500 } = {}) {
-  let w = step;
-  let size = w / Math.sqrt(3);
-  let h = 2 * size * (3 / 4);
-
-  // build grid
-  let y = d3.range(0, height + size, h).reverse();
-  if (y.length % 2) {
-    y.unshift(d3.max(y) + h);
-  }
-  let x = d3.range(0, width + size, w);
-  let grid = x.map((x) => y.map((y) => [x, y])).flat();
-  grid = grid.map((d, i) => {
-    return i % 2 == 1 ? [d[0] + w / 2, d[1]] : d;
+export function hexbin({
+  step = 50,
+  width = 1000,
+  height = 500,
+  start = [0, 0],
+  overflow = true,
+} = {}) {
+  const w = step;
+  const size = w / Math.sqrt(3);
+  const h = size * 1.5;
+
+  const x0 = overflow ? start[0] - w / 2 : start[0];
+  //const x0 = start[0];
+  const y0 = overflow ? start[1] - size : start[1];
+
+  const yEnd = overflow ? height + y0 + size * 2 : height + y0 - size;
+  const y = createSteppedArray(y0 + size, yEnd, h);
+
+  const grid = [];
+
+  // Pour chaque ligne Y
+  y.forEach((yy, row) => {
+    const offset = (row % 2) * (w / 2);
+    let xEnd = overflow ? width + x0 : width + x0 - w - w / 2;
+
+    const x = createSteppedArray(x0 + offset + w / 2, xEnd, w);
+
+    x.forEach((xx) => {
+      if (xx <= width + x0) {
+        grid.push([xx, yy]);
+      }
+    });
+
+    if (x[x.length - 1] < width + x0) {
+      grid.push([x[x.length - 1] + w, yy]);
+    }
   });
-  let s = step / 2;
-  // build object
-  let result = grid.map((d, i) => {
-    let hex = [];
-    for (let i = 0; i < 6; i++) {
-      let ang = (Math.PI / 180) * (60 * i - 30);
-      hex.push([d[0] + size * Math.cos(ang), d[1] + size * Math.sin(ang)]);
+
+  const features = grid.map(([cx, cy], i) => {
+    const hex = [];
+    for (let a = 0; a < 6; a++) {
+      const angle = (Math.PI / 180) * (60 * a - 30);
+      hex.push([cx + size * Math.cos(angle), cy + size * Math.sin(angle)]);
     }
+    hex.push(hex[0]);
 
     return {
       type: "Feature",
       geometry: {
         type: "Polygon",
-        coordinates: [[hex[0], hex[1], hex[2], hex[3], hex[4], hex[5], hex[0]]],
+        coordinates: [hex],
       },
       properties: {
         index: i,
       },
     };
   });
+
   return {
     type: "FeatureCollection",
     grid: "hexbin",
     geo: false,
-    features: result,
+    features: features,
   };
 }

package/src/grid/random.js

@@ -2,25 +2,44 @@ import { Delaunay } from "d3-delaunay";
 const d3 = Object.assign({}, { Delaunay });
 
 /**
- * @function make.random
- * @description The `make.random()` function allows to create an arbitrary geoJSON grid in SVG coordinates.
- * @property {number} [step = 50] - step of the grid
- * @property {number} [width = 1000] - width of the grid
- * @property {number} [height = 500] - height of the grid
+ * @function hexbin
+ * @summary Compute a hexbin grid.
+ * @description The `hexbin()` function allows to create a hexbin grid in SVG coordinates.
+ * @param {number} [step = 50] - Step of the grid.
+ * @param {array} [start = [0,0]] - Positioning coordinates [x,y].
+ * @param {number} [width = 1000] - Width of the grid
+ * @param {number} [height = 500] - Height of the grid
+ * @param {boolean} [overflow = true] - Depending on the step you choose, the grid may be smaller than the bounding box defined by with and height. With overflow = true, the grid is allowed to exceed the bounding box.
+ * @returns {object} - A GeoJSON FeatureCollection
+ * @example
+ * geogrid.hexbin({step:30})
  */
 
-export function random({ step = 50, width = 1000, height = 500 } = {}) {
+export function random({
+  start = [0, 0],
+  width = 1000,
+  height = 500,
+  step = 50,
+  overflow = false,
+} = {}) {
+  let x0 = overflow ? start[0] - step : start[0];
+  let y0 = overflow ? start[1] - step : start[1];
+  let xend = overflow ? start[0] + width + step : x0 + width;
+  let yend = overflow ? start[1] + height + step : y0 + height;
+
+  let w = overflow ? width + step * 2 : width;
+  let h = overflow ? height + step * 2 : height;
   let grid = [];
   let nb = Math.round((width / step) * (height / step));
   for (let i = 0; i < nb; i++) {
-    grid.push([Math.random() * width, Math.random() * height]);
+    grid.push([Math.random() * w + x0, Math.random() * h + y0]);
   }
 
   let voronoi = d3.Delaunay.from(
     grid,
     (d) => d[0],
     (d) => d[1]
-  ).voronoi([0, 0, width, height]);
+  ).voronoi([x0, y0, xend, yend]);
 
   // build object
   let result = grid.map((d, i) => {
@@ -35,6 +54,8 @@ export function random({ step = 50, width = 1000, height = 500 } = {}) {
       },
     };
   });
+
+  //  return result;
   return {
     type: "FeatureCollection",
     grid: "random",

package/src/grid/square.js

@@ -1,17 +1,42 @@
-import { range } from "d3-array";
-const d3 = Object.assign({}, { range });
+import { createSteppedArray } from "../helpers/createSteppedArray.js";
 
 /**
- * @function make.square
- * @description The `make.square()` function allows to create a square geoJSON grid in SVG coordinates.
- * @property {number} [step = 50] - step of the grid
- * @property {number} [width = 1000] - width of the grid
- * @property {number} [height = 500] - height of the grid
+ * @function square
+ * @summary Compute a square grid.
+ * @description The `square()` function allows to create a square grid in SVG coordinates.
+ * @param {number} [step = 50] - Step of the grid.
+ * @param {array} [start = [0,0]] - Positioning coordinates [x,y].
+ * @param {number} [width = 1000] - Width of the grid
+ * @param {number} [height = 500] - Height of the grid
+ * @param {boolean} [overflow = true] - Depending on the step you choose, the grid may be smaller than the bounding box defined by with and height. With overflow = true, the grid is allowed to exceed the bounding box.
+ * @returns {object} - A GeoJSON FeatureCollection
+ * @example
+ * geogrid.square({step:30})
  */
-export function square({ step = 50, width = 1000, height = 500 } = {}) {
+export function square({
+  start = [0, 0],
+  width = 1000,
+  height = 500,
+  step = 50,
+  overflow = true,
+} = {}) {
   // build grid
-  let y = d3.range(0 + step / 2, height, step).reverse();
-  let x = d3.range(0 + step / 2, width, step);
+
+  let x0 = overflow ? start[0] : start[0] + step / 2;
+  let y0 = overflow ? start[1] : start[1] + step / 2;
+
+  let y = createSteppedArray(y0, start[1] + height - step / 2, step, true);
+  let x = createSteppedArray(x0, start[0] + width - step / 2, step);
+
+  if (overflow) {
+    if (y[0] + step / 2 < start[1] + height) {
+      y.unshift(y[0] + step);
+    }
+    if (x.at(-1) + step / 2 < start[0] + width) {
+      x.push(x.at(-1) + step);
+    }
+  }
+
   let grid = x.map((x) => y.map((y) => [x, y])).flat();
 
   let s = step / 2;

package/src/grid/triangle.js

@@ -1,14 +1,25 @@
-import { range, max } from "d3-array";
-const d3 = Object.assign({}, { range, max });
+import { createSteppedArray } from "../helpers/createSteppedArray.js";
 
 /**
- * @function make.triangle
- * @description The `make.triangle()` function allows to create a triangle geoJSON grid in SVG coordinates.
- * @property {number} [step = 50] - step of the grid
- * @property {number} [width = 1000] - width of the grid
- * @property {number} [height = 500] - height of the grid
+ * @function triangle
+ * @summary Compute a triangle grid.
+ * @description The `triangle()` function allows to create a triangle grid in SVG coordinates.
+ * @param {number} [step = 50] - Step of the grid.
+ * @param {array} [start = [0,0]] - Positioning coordinates [x,y].
+ * @param {number} [width = 1000] - Width of the grid
+ * @param {number} [height = 500] - Height of the grid
+ * @param {boolean} [overflow = true] - Depending on the step you choose, the grid may be smaller than the bounding box defined by with and height. With overflow = true, the grid is allowed to exceed the bounding box.
+ * @returns {object} - A GeoJSON FeatureCollection
+ * @example
+ * geogrid.triangle({step:30})
  */
-export function triangle({ step = 50, width = 1000, height = 500 } = {}) {
+export function triangle({
+  start = [0, 0],
+  width = 1000,
+  height = 500,
+  step = 50,
+  overflow = true,
+} = {}) {
   let triangletop = (p, size) => {
     let h = (Math.sqrt(3) / 2) * size;
     let p1 = [p[0] + size / 2, p[1]];
@@ -29,12 +40,18 @@ export function triangle({ step = 50, width = 1000, height = 500 } = {}) {
   let h = (Math.sqrt(3) / 2) * step;
 
   // build grid
+  let x0 = overflow ? start[0] - step / 2 : start[0];
+  let y0 = overflow ? start[1] - h / 2 : start[1];
+  let xend = start[0] + width + h;
+  let yend = x0 + height + h;
+
+  let x = createSteppedArray(x0, xend, step);
+  let y = createSteppedArray(y0, yend, h, true);
 
-  let y = d3.range(0, height + size, h).reverse();
   if (y.length % 2) {
-    y.unshift(d3.max(y) + h);
+    y.unshift(y[0] + h);
   }
-  let x = d3.range(0, width + size, step);
+
   let grid = x.map((x, i) => y.map((y) => [x, y])).flat();
   grid = grid.map((d, i) => {
     return i % 2 == 1 ? [d[0] + step / 2, d[1]] : d;
@@ -43,20 +60,71 @@ export function triangle({ step = 50, width = 1000, height = 500 } = {}) {
   let nb = grid.length;
   grid = grid.concat(grid);
 
-  // build object
-  let result = grid.map((d, i) => {
-    return {
-      type: "Feature",
-      geometry: {
-        type: "Polygon",
-        coordinates:
-          i < nb ? [triangletop(d, step)] : [trianglebottom(d, step)],
-      },
-      properties: {
-        index: i,
-      },
-    };
+  // Build triangles
+  let triangles = [];
+  grid.forEach((d, i) => {
+    if (overflow) {
+      // triangle top
+      if (i < nb) {
+        if (
+          d[0] <= x0 + width + step &&
+          d[0] > x0 &&
+          d[1] >= y0 + step / 2 &&
+          d[1] <= start[1] + height + h
+        ) {
+          triangles.push(triangletop(d, step));
+        }
+      }
+      //triangle bottom
+      else {
+        if (
+          d[0] <= x0 + width + step &&
+          d[0] > x0 &&
+          d[1] <= start[1] + height
+        ) {
+          triangles.push(trianglebottom(d, step));
+        }
+      }
+    } else {
+      // triangle top
+      if (i < nb) {
+        if (
+          d[0] <= x0 + width - step / 2 &&
+          d[0] > x0 &&
+          d[1] <= y0 + height &&
+          d[1] > y0
+        ) {
+          triangles.push(triangletop(d, step));
+        }
+      }
+      //triangle bottom
+      else {
+        if (
+          d[0] <= x0 + width - step / 2 &&
+          d[0] > x0 &&
+          d[1] <= y0 + height - h
+        ) {
+          triangles.push(trianglebottom(d, step));
+        }
+      }
+    }
   });
+
+  // Build geojson
+
+  let result = triangles.map((d, i) => ({
+    type: "Feature",
+    geometry: {
+      type: "Polygon",
+      //coordinates: d
+      coordinates: [d],
+    },
+    properties: {
+      index: i,
+      coords: d,
+    },
+  }));
+
   return {
     type: "FeatureCollection",
     grid: "triangle",

package/src/helpers/createSteppedArray.js

@@ -0,0 +1,7 @@
+export function createSteppedArray(start, max, step, reverse = false) {
+  const result = [];
+  for (let i = start; i <= max; i += step) {
+    result.push(i);
+  }
+  return reverse ? result.reverse() : result;
+}

package/src/helpers/project.js

@@ -0,0 +1,14 @@
+import { geoProject } from "d3-geo-projection";
+const d3 = Object.assign({}, { geoProject });
+
+/**
+ * @function project
+ * @description The function `project` use geoproject from d3-geo-projection to project a geoJSON. It returns a GeoJSON FeatureCollection with coordinates in the page map.
+ * @property {object} data - a GeoJSON FeatureCollection
+ * @property {function} options.projection - projection definition. See [d3-geo](https://github.com/d3/d3-geo) & [d3-geo-projection](https://github.com/d3/d3-geo-projection)
+ * @example
+ * let newGeoJSON = project(world, { projection: d3.geoOrthographic()})
+ */
+export function project(data, { projection = null } = {}) {
+  return projection == null ? data : d3.geoProject(data, projection);
+}

package/src/index.js

@@ -1,21 +1,11 @@
-import { square } from "./grid/square.js";
-import { triangle } from "./grid/triangle.js";
-import { dot } from "./grid/dot.js";
-import { random } from "./grid/random.js";
-import { diamond } from "./grid/diamond.js";
-import { hexbin } from "./grid/hexbin.js";
-import { h3 } from "./grid/h3.js";
-
-export let make = {
-  square,
-  triangle,
-  dot,
-  diamond,
-  random,
-  hexbin,
-  h3,
-};
-
-import { pointstogrid } from "./operator/pointstogrid.js";
-import { polygonstogrid } from "./operator/polygonstogrid.js";
-export let op = { pointstogrid, polygonstogrid };
+// export { square } from "./grid/square.js";
+// export { triangle } from "./grid/triangle.js";
+// export { dot } from "./grid/dot.js";
+//export { random } from "./grid/random.js";
+// export { diamond } from "./grid/diamond.js";
+export { hexbin } from "./grid/hexbin.js";
+// export { h3 } from "./grid/h3.js";
+export { pointstogrid } from "./operator/pointstogrid.js";
+// export { polygonstogrid } from "./operator/polygonstogrid.js";
+// export { linestogrid } from "./operator/linestogrid.js";
+// export { project } from "./helpers/project.js";