grids wip

package.json

@@ -35,6 +35,7 @@
   },
   "homepage": "https://github.com/neocarto/geoviz#readme",
   "dependencies": {
+    "@turf/boolean-intersects": "^7.1.0",
     "@turf/boolean-point-in-polygon": "^6.5.0",
     "d3-delaunay": "^6.0.4",
     "d3-force": "^3.0.0",

src/container/create.js

@@ -140,6 +140,13 @@ export function create({
       zoomablelayers: [],
       zoom: { k: 1, x: 0, y: 0 },
       bbox: d3.geoBounds(ref),
+      // bbox:
+      //   domain == undefined
+      //     ? [
+      //         [-180, 90],
+      //         [180, -90],
+      //       ]
+      //     : d3.geoBounds(ref),
       inset: parent ? true : false,
       warning,
       warning_message,

src/grid/diamondgeo.js

@@ -0,0 +1,53 @@
+import { bbox } from "../helpers/bbox";
+import { booleanIntersects } from "@turf/boolean-intersects";
+import { range } from "d3-array";
+const d3 = Object.assign({}, { range });
+
+export function diamondgeo(step, domain) {
+  let size = step * Math.sqrt(2);
+
+  // build grid
+  let y = d3.range(-90 + size / 2, 90, size / 2).reverse();
+  let x = d3.range(-180 + size / 2, 180, size);
+  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,
+      },
+    };
+  });
+  let final = [];
+
+  if (domain) {
+    let bb = bbox(domain);
+    result.forEach((d) => {
+      if (booleanIntersects(d, bb.features[0])) {
+        final.push(d);
+      }
+    });
+  } else {
+    final = result;
+  }
+
+  return { type: "FeatureCollection", features: final };
+}

src/grid/dot.js

@@ -1,7 +1,7 @@
 import { range } from "d3-array";
 const d3 = Object.assign({}, { range });
 
-export function dot(step = 50, width = 1000, height = 500) {
+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);

src/grid/dotgeo.js

@@ -0,0 +1,46 @@
+import { range } from "d3-array";
+const d3 = Object.assign({}, { range });
+import { booleanIntersects } from "@turf/boolean-intersects";
+import { project } from "../tool/project.js";
+import { bbox } from "../helpers/bbox";
+
+export function dotgeo(step = 5, domain = undefined, projection = undefined) {
+  // build grid
+  let x = d3.range(-180 + step / 2, 180, step);
+  let y = d3.range(-90 + step / 2, 90, step).reverse();
+  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,
+      },
+    };
+  });
+
+  if (domain == undefined) {
+    return { type: "FeatureCollection", features: result };
+  } else {
+    let final = [];
+    let resultproj = project(
+      { type: "FeatureCollection", features: result },
+      { projection: projection }
+    ).features.filter((d) => d.geometry !== null);
+    let bb = project(bbox(domain), { projection: projection });
+    resultproj.forEach((d) => {
+      if (booleanIntersects(d, bb.features[0])) {
+        final.push(d.properties.index);
+      }
+    });
+    return {
+      type: "FeatureCollection",
+      features: result.filter((d) => final.includes(d.properties.index)),
+    };
+  }
+}

src/grid/make.js

@@ -0,0 +1,21 @@
+import { square } from "./square.js";
+import { dot } from "./dot.js";
+import { dotgeo } from "./dotgeo.js";
+import { squaregeo } from "./squaregeo.js";
+
+export function make(svg, { step, type = "square" } = {}) {
+  switch (type) {
+    case "square":
+      return square(step, svg.width, svg.height);
+      break;
+    case "dot":
+      return dot(step, svg.width, svg.height);
+      break;
+    case "dotgeo":
+      return dotgeo(step, svg.domain, svg.projection);
+      break;
+    case "squaregeo":
+      return squaregeo(step, svg.domain, svg.projection);
+      break;
+  }
+}

src/grid/squaregeo.js

@@ -0,0 +1,47 @@
+import { bbox } from "../helpers/bbox";
+import { booleanIntersects } from "@turf/boolean-intersects";
+import { range } from "d3-array";
+const d3 = Object.assign({}, { range });
+
+export function squaregeo(step = 1, domain = undefined) {
+  let y = d3.range(-90 + step / 2, 90, step).reverse();
+  let x = d3.range(-180 + step / 2, 180, step);
+  let grid = x.map((x, i) => 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,
+      },
+    };
+  });
+  let final = [];
+
+  if (domain) {
+    let bb = bbox(domain);
+    result.forEach((d) => {
+      if (booleanIntersects(d, bb.features[0])) {
+        final.push(d);
+      }
+    });
+  } else {
+    final = result;
+  }
+
+  return { type: "FeatureCollection", features: final };
+}

src/grid/trianglegeo.js

@@ -0,0 +1,71 @@
+import { bbox } from "../helpers/bbox";
+import { rewind } from "../tool/rewind";
+import { booleanIntersects } from "@turf/boolean-intersects";
+import { range, max } from "d3-array";
+const d3 = Object.assign({}, { range, max });
+
+export function trianglegeo(step = 1, domain = undefined) {
+  let size = step / Math.sqrt(3);
+  let h = (Math.sqrt(3) / 2) * step;
+
+  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 y = d3.range(-90 + h / 2, 90, h).reverse();
+  if (y.length % 2) {
+    y.unshift(d3.max(y) + h);
+  }
+
+  let x = d3.range(-180 + step / 2, 180, step);
+
+  let grid = x.map((x) => 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,
+      },
+    };
+  });
+
+  let final = [];
+
+  if (domain) {
+    let bb = bbox(domain);
+    result.forEach((d) => {
+      if (booleanIntersects(d, bb.features[0])) {
+        final.push(d);
+      }
+    });
+  } else {
+    final = result;
+  }
+
+  return rewind({ type: "FeatureCollection", features: final });
+}

src/index.js

@@ -87,13 +87,23 @@ import { square } from "./grid/square.js";
 import { hexbin } from "./grid/hexbin.js";
 import { diamond } from "./grid/diamond.js";
 import { triangle } from "./grid/triangle.js";
+import { trianglegeo } from "./grid/trianglegeo.js";
 import { arbitrary } from "./grid/arbitrary.js";
 import { dot } from "./grid/dot.js";
+import { dotgeo } from "./grid/dotgeo.js";
+import { squaregeo } from "./grid/squaregeo.js";
+import { diamondgeo } from "./grid/diamondgeo.js";
+import { make } from "./grid/make.js";
 export let grid = {
+  make,
   dot,
+  dotgeo,
   square,
+  squaregeo,
   triangle,
+  trianglegeo,
   diamond,
+  diamondgeo,
   hexbin,
   arbitrary,
 };