geogrid 0.0.1

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "geogrid",
+  "version": "0.0.1",
+  "description": "xxx",
+  "main": "src/index.js",
+  "module": "src/index.js",
+  "jsdelivr": "dist/index.min.js",
+  "unpkg": "dist/index.min.js",
+  "exports": {
+    "umd": "./dist/index.min.js",
+    "default": "./src/index.js"
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "scripts": {
+    "build": "rollup --config",
+    "prepare": "npm run build",
+    "docs": "jsdoc --configure jsdoc.json --verbose"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/neocarto/geogrid.git"
+  },
+  "keywords": [
+    "xxx",
+    "xxx",
+    "d3xxx"
+  ],
+  "author": "Nicolas Lambert",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/neocarto/geogrid/issues"
+  },
+  "homepage": "https://github.com/neocarto/geogrid#readme",
+  "dependencies": {
+    "@turf/boolean-point-in-polygon": "^7.1.0",
+    "@turf/helpers": "^7.1.0",
+    "@turf/intersect": "^7.1.0",
+    "d3-array": "^3.2.4",
+    "d3-delaunay": "^6.0.4",
+    "d3-geo": "^3.1.1",
+    "docs": "^0.3.2-canary.0",
+    "documentation": "^14.0.3",
+    "geojson2h3": "^1.2.0",
+    "h3-js": "^4.1.0",
+    "rollup": "^4.10.0"
+  },
+  "devDependencies": {
+    "@jood/jsdoc-theme": "^0.1.14",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.3",
+    "clean-jsdoc-theme": "^4.2.17",
+    "docdash": "^2.0.1",
+    "jsdoc": "^4.0.2",
+    "jsdoc-to-markdown": "^8.0.0",
+    "modern-jsdoc-template": "^1.0.0",
+    "postman-jsdoc-theme": "^0.0.3"
+  }
+}

package/src/grid/diamond.js

@@ -0,0 +1,50 @@
+import { range } from "d3-array";
+const d3 = Object.assign({}, { range });
+
+/**
+ * @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
+ */
+export function diamond({ step = 50, width = 1000, height = 500 } = {}) {
+  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 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]];
+  });
+
+  let s = size / 2;
+  // build object
+  let result = grid.map((d, i) => {
+    return {
+      type: "Feature",
+      geometry: {
+        type: "Polygon",
+        coordinates: [
+          [
+            [d[0] - s, d[1]],
+            [d[0], d[1] + s],
+            [d[0] + s, d[1]],
+            [d[0], d[1] - s],
+            [d[0] - s, d[1]],
+          ],
+        ],
+      },
+      properties: {
+        index: i,
+      },
+    };
+  });
+  return {
+    type: "FeatureCollection",
+    grid: "diamond",
+    geo: false,
+    features: result,
+  };
+}

package/src/grid/dot.js

@@ -0,0 +1,36 @@
+import { range } from "d3-array";
+const d3 = Object.assign({}, { range });
+
+/**
+ * @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
+ */
+export function dot({ step = 30, width = 1000, height = 500 } = {}) {
+  // build grid
+  let y = d3.range(0 + step / 2, height, step).reverse();
+  let x = d3.range(0 + step / 2, width, step);
+  let grid = x.map((x) => y.map((y) => [x, y])).flat();
+  let s = step / 2;
+  // build object
+  let result = grid.map((d, i) => {
+    return {
+      type: "Feature",
+      geometry: {
+        type: "Point",
+        coordinates: d,
+      },
+      properties: {
+        index: i,
+      },
+    };
+  });
+  return {
+    type: "FeatureCollection",
+    grid: "dot",
+    geo: false,
+    features: result,
+  };
+}

package/src/grid/h3.js

@@ -0,0 +1,48 @@
+import {
+  getRes0Cells,
+  cellToChildren,
+  isPentagon,
+  cellToBoundary,
+} from "h3-js";
+
+import { featureToH3Set, h3SetToFeatureCollection } from "geojson2h3";
+import { rewind as rrewind } from "../helpers/rewind";
+
+/**
+ * @function make.h3
+ * @description The `make.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
+ */
+export function h3({ level = 0, domain = undefined, rewind = undefined } = {}) {
+  let output;
+  if (domain) {
+    rewind = rewind !== undefined ? rewind : true;
+    const hexagons = featureToH3Set(domain, level);
+    output = h3SetToFeatureCollection(hexagons, (hex) => ({
+      value: hex,
+    }));
+  } else {
+    rewind = rewind !== undefined ? rewind : false;
+    output = {
+      type: "FeatureCollection",
+      grid: "h3",
+      level: level,
+      geo: true,
+      features: getRes0Cells()
+        .map((i) => cellToChildren(i, level))
+        .flat()
+        .map((d) => ({
+          type: "Feature",
+          properties: { id: d, pentagon: isPentagon(d) },
+          geometry: {
+            type: "Polygon",
+            coordinates: [cellToBoundary(d, true).reverse()],
+          },
+        })),
+    };
+  }
+
+  return rewind ? rrewind(output) : output;
+}

package/src/grid/hexbin.js

@@ -0,0 +1,52 @@
+import { range, max } from "d3-array";
+const d3 = Object.assign({}, { range, max });
+
+/**
+ * @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
+ */
+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;
+  });
+  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)]);
+    }
+
+    return {
+      type: "Feature",
+      geometry: {
+        type: "Polygon",
+        coordinates: [[hex[0], hex[1], hex[2], hex[3], hex[4], hex[5], hex[0]]],
+      },
+      properties: {
+        index: i,
+      },
+    };
+  });
+  return {
+    type: "FeatureCollection",
+    grid: "hexbin",
+    geo: false,
+    features: result,
+  };
+}

package/src/grid/random.js

@@ -0,0 +1,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
+ */
+
+export function random({ step = 50, width = 1000, height = 500 } = {}) {
+  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]);
+  }
+
+  let voronoi = d3.Delaunay.from(
+    grid,
+    (d) => d[0],
+    (d) => d[1]
+  ).voronoi([0, 0, width, height]);
+
+  // build object
+  let result = grid.map((d, i) => {
+    return {
+      type: "Feature",
+      geometry: {
+        type: "Polygon",
+        coordinates: [voronoi.cellPolygon(i)],
+      },
+      properties: {
+        index: i,
+      },
+    };
+  });
+  return {
+    type: "FeatureCollection",
+    grid: "random",
+    geo: false,
+    features: result,
+  };
+}

package/src/grid/square.js

@@ -0,0 +1,45 @@
+import { range } from "d3-array";
+const d3 = Object.assign({}, { range });
+
+/**
+ * @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
+ */
+export function square({ step = 50, width = 1000, height = 500 } = {}) {
+  // build grid
+  let y = d3.range(0 + step / 2, height, step).reverse();
+  let x = d3.range(0 + step / 2, width, step);
+  let grid = x.map((x) => y.map((y) => [x, y])).flat();
+
+  let s = step / 2;
+  // build object
+  let result = grid.map((d, i) => {
+    return {
+      type: "Feature",
+      geometry: {
+        type: "Polygon",
+        coordinates: [
+          [
+            [d[0] - s, d[1] + s],
+            [d[0] + s, d[1] + s],
+            [d[0] + s, d[1] - s],
+            [d[0] - s, d[1] - s],
+            [d[0] - s, d[1] + s],
+          ],
+        ],
+      },
+      properties: {
+        index: i,
+      },
+    };
+  });
+  return {
+    type: "FeatureCollection",
+    grid: "square",
+    geo: false,
+    features: result,
+  };
+}

package/src/grid/triangle.js

@@ -0,0 +1,66 @@
+import { range, max } from "d3-array";
+const d3 = Object.assign({}, { range, max });
+
+/**
+ * @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
+ */
+export function triangle({ step = 50, width = 1000, height = 500 } = {}) {
+  let triangletop = (p, size) => {
+    let h = (Math.sqrt(3) / 2) * size;
+    let p1 = [p[0] + size / 2, p[1]];
+    let p2 = [p[0], p[1] - h];
+    let p3 = [p[0] - size / 2, p[1]];
+    return [p1, p2, p3, p1];
+  };
+
+  let trianglebottom = (p, size) => {
+    let h = (Math.sqrt(3) / 2) * size;
+    let p1 = [p[0] + size / 2, p[1]];
+    let p2 = [p[0], p[1] + h];
+    let p3 = [p[0] - size / 2, p[1]];
+    return [p1, p2, p3, p1];
+  };
+
+  let size = step / Math.sqrt(3);
+  let h = (Math.sqrt(3) / 2) * step;
+
+  // 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, 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;
+  });
+
+  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,
+      },
+    };
+  });
+  return {
+    type: "FeatureCollection",
+    grid: "triangle",
+    geo: false,
+    features: result,
+  };
+}

package/src/helpers/rewind.js

@@ -0,0 +1,45 @@
+/**
+ * @function tool/rewind
+ * @description The `tool.rewind` function allows to generate compliant Polygon and MultiPolygon geometries. Adapted from MapBox geojson-rewind code (https://github.com/mapbox/grojson-rewind) under ISC license
+ * @see {@link https://observablehq.com/@neocartocnrs/handle-geometries}
+ * @property {object} data - a GeoJSON FeatureCollection
+ * @property {boolean} [options.outer = false] - rewind Rings Outer
+ * @property {boolean} [options.mutate  = false] - mutate the Input geoJSON
+ */
+
+export function rewind(data, options = {}) {
+  data = JSON.parse(JSON.stringify(data));
+  let outer = options.outer === false ? false : true;
+  let mutate = options.mutate === false ? false : true;
+  let geo = mutate === true ? data : JSON.parse(JSON.stringify(x));
+  for (let i = 0; i < geo.features.length; i++) {
+    if (geo.features[i].geometry.type === "Polygon") {
+      rewindRings(geo.features[i].geometry.coordinates, outer);
+    } else if (geo.features[i].geometry.type === "MultiPolygon") {
+      for (let j = 0; j < geo.features[i].geometry.coordinates.length; j++) {
+        rewindRings(geo.features[i].geometry.coordinates[j], outer);
+      }
+    }
+  }
+  return geo;
+}
+
+function rewindRings(rings, outer) {
+  if (rings.length === 0) return;
+  rewindRing(rings[0], outer);
+  for (let i = 1; i < rings.length; i++) {
+    rewindRing(rings[i], !outer);
+  }
+}
+
+function rewindRing(ring, dir) {
+  let tArea = 0;
+  let err = 0;
+  for (let i = 0, len = ring.length, j = len - 1; i < len; j = i++) {
+    const k = (ring[i][0] - ring[j][0]) * (ring[j][1] + ring[i][1]);
+    const m = tArea + k;
+    err += Math.abs(tArea) >= Math.abs(k) ? tArea - m + k : k - m + tArea;
+    tArea = m;
+  }
+  if (tArea + err >= 0 !== !!dir) ring.reverse();
+}

package/src/helpers/rewind2.ts

@@ -0,0 +1,159 @@
+/**
+ * The code in this file rewinds GeoJSON polygons and multipolygons to fit d3's expectations.
+ * This is adapted by Matthieu Viry from a notebook of Philippe Rivière: https://observablehq.com/@fil/rewind
+ * which is licensed under the ISC license.
+ */
+
+import d3 from './d3-custom';
+import { GeoJSONFeature, GeoJSONFeatureCollection } from '../global';
+
+const {
+  geoTransform,
+  geoStream,
+  geoContains,
+  geoArea,
+} = d3;
+
+function projectPolygons(o, stream) {
+  let coordinates = [];
+  let polygon; let
+    line;
+  geoStream(
+    o,
+    stream({
+      polygonStart() {
+        coordinates.push((polygon = []));
+      },
+      polygonEnd() {},
+      lineStart() {
+        polygon.push((line = []));
+      },
+      lineEnd() {
+        line.push(line[0].slice());
+      },
+      point(x, y) {
+        line.push([x, y]);
+      },
+    }),
+  );
+  if (o.type === 'Polygon') {
+    // eslint-disable-next-line prefer-destructuring
+    coordinates = coordinates[0];
+  }
+  return { ...o, coordinates, rewind: true };
+}
+
+function projectGeometry(o, stream) {
+  // eslint-disable-next-line no-nested-ternary
+  return !o
+    ? null
+    : o.type === 'GeometryCollection' // eslint-disable-line no-nested-ternary
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      ? projectGeometryCollection(o, stream)
+      : o.type === 'Polygon' || o.type === 'MultiPolygon'
+        ? projectPolygons(o, stream)
+        : o;
+}
+
+function projectFeature(o, stream) {
+  return { ...o, geometry: projectGeometry(o.geometry, stream) };
+}
+
+function projectFeatureCollection(o, stream) {
+  return { ...o, features: o.features.map((f) => projectFeature(f, stream)) };
+}
+
+function projectGeometryCollection(obj, stream) {
+  return {
+    ...obj,
+    geometries: obj.geometries.map((o) => projectGeometry(o, stream)),
+  };
+}
+
+const geoProjectSimple = function (object, projection) {
+  const { stream } = projection;
+  let project;
+  if (!stream) throw new Error('invalid projection');
+  switch (object && object.type) {
+    case 'Feature':
+      project = projectFeature;
+      break;
+    case 'FeatureCollection':
+      project = projectFeatureCollection;
+      break;
+    default:
+      project = projectGeometry;
+      break;
+  }
+  return project(object, stream);
+};
+
+function geoRewindStream(simple = true) {
+  let ring;
+  let polygon;
+  return geoTransform({
+    polygonStart() {
+      this.stream.polygonStart();
+      polygon = [];
+    },
+    lineStart() {
+      if (polygon) polygon.push((ring = []));
+      else this.stream.lineStart();
+    },
+    lineEnd() {
+      if (!polygon) this.stream.lineEnd();
+    },
+    point(x, y) {
+      if (polygon) ring.push([x, y]);
+      else this.stream.point(x, y);
+    },
+    polygonEnd() {
+      // eslint-disable-next-line no-restricted-syntax
+      for (const [i, rring] of polygon.entries()) {
+        rring.push(rring[0].slice());
+        if (
+          i // eslint-disable-line no-nested-ternary
+            // a hole must contain the first point of the polygon
+            ? !geoContains(
+              { type: 'Polygon', coordinates: [rring] },
+              polygon[0][0],
+            )
+            : polygon[1]
+              // the outer ring must contain the first point of its first hole (if any)
+              ? !geoContains(
+                { type: 'Polygon', coordinates: [rring] },
+                polygon[1][0],
+              // eslint-disable-next-line @typescript-eslint/no-loop-func
+              ) && !rring.some((p) => p[0] === polygon[1][0][0] && p[1] === polygon[1][0][1])
+              // a single ring polygon must be smaller than a hemisphere (optional)
+              : simple && geoArea({ type: 'Polygon', coordinates: [rring] }) > 2 * Math.PI
+        ) {
+          rring.reverse();
+        }
+
+        this.stream.lineStart();
+        rring.pop();
+        // eslint-disable-next-line no-restricted-syntax
+        for (const [x, y] of rring) this.stream.point(x, y);
+        this.stream.lineEnd();
+      }
+      this.stream.polygonEnd();
+      polygon = null;
+    },
+  });
+}
+
+const rewindFeature = (
+  feature: GeoJSONFeature,
+  simple: boolean,
+) => geoProjectSimple(feature, geoRewindStream(simple));
+
+const rewindLayer = (
+  layer: GeoJSONFeatureCollection,
+  simple: boolean = true,
+): GeoJSONFeatureCollection => {
+  const features = layer.features.map((feature) => rewindFeature(feature, simple));
+  return { ...layer, features };
+};
+
+export default rewindLayer;

package/src/index.js

@@ -0,0 +1,21 @@
+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 };

package/src/operator/pointstogrid.js

@@ -0,0 +1,49 @@
+import booleanPointInPolygon from "@turf/boolean-point-in-polygon";
+
+/**
+ * @function op.pointstogrid
+ * @description The `op.pointstogrid()` function allows to count dots in polygons (e.g. grid cells)
+ * @property {object} [points] - dots geoJSON
+ * @property {object} [grid] - grid
+ * @property {string} [var = undefined] - field (absolute quantitative data only)
+ */
+export function pointstogrid(
+  opts = {
+    points: undefined,
+    grid: undefined,
+    var: undefined,
+  }
+) {
+  let polys = opts.grid.features;
+  let points = opts.dots.features;
+  let count = new Array(polys.length).fill(0);
+  let nb = points.length;
+  let test = new Array(nb).fill(true);
+  polys.forEach((p, i) => {
+    points.forEach((d, j) => {
+      if (test[j]) {
+        if (booleanPointInPolygon(d, p)) {
+          if (opts.var == undefined) {
+            count[i] = count[i] + 1;
+          } else {
+            count[i] = count[i] + parseFloat(d.properties[opts.var]);
+          }
+          test[j] = false;
+        }
+      }
+    });
+  });
+
+  // Rebuild grid
+  let output = polys
+    .map((d, i) => ({
+      type: d.type,
+      geometry: d.geometry,
+      properties: { ...d.properties, count: count[i] },
+    }))
+    .filter((d) => d.properties.count !== 0);
+
+  //const endTime = performance.now();
+  //const elapsedTime = endTime - startTime;
+  return { type: "FeatureCollection", features: output };
+}