doc

riatelab · Dec 5, 2024 · 367e89e · 367e89e
1 parent ebc6961
commit 367e89e
Show file tree

Hide file tree

Showing 81 changed files with 321 additions and 153 deletions.
diff --git a/docs/container_create.js.html b/docs/container_create.js.html
diff --git a/docs/container_draw.js.html b/docs/container_draw.js.html
diff --git a/docs/container_render.js.html b/docs/container_render.js.html
diff --git a/docs/data/search.json b/docs/data/search.json
diff --git a/docs/effect_blur.js.html b/docs/effect_blur.js.html
diff --git a/docs/effect_clippath.js.html b/docs/effect_clippath.js.html
diff --git a/docs/effect_radialgradient.js.html b/docs/effect_radialgradient.js.html
diff --git a/docs/effect_shadow.js.html b/docs/effect_shadow.js.html
diff --git a/docs/global.html b/docs/global.html
diff --git a/docs/grid_arbitrary.js.html b/docs/grid_arbitrary.js.html
diff --git a/docs/grid_count.js.html b/docs/grid_count.js.html
diff --git a/docs/grid_diamond.js.html b/docs/grid_diamond.js.html
diff --git a/docs/grid_dot.js.html b/docs/grid_dot.js.html
diff --git a/docs/grid_h3.js.html b/docs/grid_h3.js.html
diff --git a/docs/grid_hexbin.js.html b/docs/grid_hexbin.js.html
diff --git a/docs/grid_intersect.js.html b/docs/grid_intersect.js.html
diff --git a/docs/grid_make.js.html b/docs/grid_make.js.html
diff --git a/docs/grid_square.js.html b/docs/grid_square.js.html
diff --git a/docs/grid_triangle.js.html b/docs/grid_triangle.js.html
diff --git a/docs/helpers_tooltip.js.html b/docs/helpers_tooltip.js.html
diff --git a/docs/index.html b/docs/index.html
diff --git a/docs/legend_box.js.html b/docs/legend_box.js.html
diff --git a/docs/legend_choro-horizontal.js.html b/docs/legend_choro-horizontal.js.html
diff --git a/docs/legend_choro-vertical.js.html b/docs/legend_choro-vertical.js.html
diff --git a/docs/legend_circles-half.js.html b/docs/legend_circles-half.js.html
diff --git a/docs/legend_circles-nested.js.html b/docs/legend_circles-nested.js.html
diff --git a/docs/legend_circles.js.html b/docs/legend_circles.js.html
diff --git a/docs/legend_mushrooms.js.html b/docs/legend_mushrooms.js.html
diff --git a/docs/legend_spikes.js.html b/docs/legend_spikes.js.html
diff --git a/docs/legend_squares-nested.js.html b/docs/legend_squares-nested.js.html
diff --git a/docs/legend_squares.js.html b/docs/legend_squares.js.html
diff --git a/docs/legend_symbol-horizontal.js.html b/docs/legend_symbol-horizontal.js.html
diff --git a/docs/legend_symbol-vertical.js.html b/docs/legend_symbol-vertical.js.html
diff --git a/docs/legend_typo-horizontal.js.html b/docs/legend_typo-horizontal.js.html
diff --git a/docs/legend_typo-vertical.js.html b/docs/legend_typo-vertical.js.html
diff --git a/docs/mark_circle.js.html b/docs/mark_circle.js.html
diff --git a/docs/mark_footer.js.html b/docs/mark_footer.js.html
diff --git a/docs/mark_graticule.js.html b/docs/mark_graticule.js.html
diff --git a/docs/mark_halfcircle.js.html b/docs/mark_halfcircle.js.html
diff --git a/docs/mark_header.js.html b/docs/mark_header.js.html
diff --git a/docs/mark_north.js.html b/docs/mark_north.js.html
diff --git a/docs/mark_outline.js.html b/docs/mark_outline.js.html
diff --git a/docs/mark_path.js.html b/docs/mark_path.js.html
diff --git a/docs/mark_scalebar.js.html b/docs/mark_scalebar.js.html
diff --git a/docs/mark_spike.js.html b/docs/mark_spike.js.html
diff --git a/docs/mark_square.js.html b/docs/mark_square.js.html
diff --git a/docs/mark_symbol.js.html b/docs/mark_symbol.js.html
diff --git a/docs/mark_text.js.html b/docs/mark_text.js.html
diff --git a/docs/mark_tile.js.html b/docs/mark_tile.js.html
diff --git a/docs/mark_tissot.js.html b/docs/mark_tissot.js.html
diff --git a/docs/plot_plot.js.html b/docs/plot_plot.js.html
diff --git a/docs/plot_plot_choro.js.html b/docs/plot_plot_choro.js.html
diff --git a/docs/plot_plot_prop.js.html b/docs/plot_plot_prop.js.html
diff --git a/docs/plot_plot_propchoro.js.html b/docs/plot_plot_propchoro.js.html
diff --git a/docs/plot_plot_proptypo.js.html b/docs/plot_plot_proptypo.js.html
diff --git a/docs/plot_plot_symbol.js.html b/docs/plot_plot_symbol.js.html
diff --git a/docs/plot_plot_typo.js.html b/docs/plot_plot_typo.js.html
diff --git a/docs/tool_addfonts.js.html b/docs/tool_addfonts.js.html
diff --git a/docs/tool_centroid.js.html b/docs/tool_centroid.js.html
diff --git a/docs/tool_choro.js.html b/docs/tool_choro.js.html
diff --git a/docs/tool_dissolve.js.html b/docs/tool_dissolve.js.html
diff --git a/docs/tool_dodge.js.html b/docs/tool_dodge.js.html
diff --git a/docs/tool_dotstogrid.js.html b/docs/tool_dotstogrid.js.html
diff --git a/docs/tool_featurecollection.js.html b/docs/tool_featurecollection.js.html
diff --git a/docs/tool_geotable.js.html b/docs/tool_geotable.js.html
diff --git a/docs/tool_height.js.html b/docs/tool_height.js.html
diff --git a/docs/tool_merge.js.html b/docs/tool_merge.js.html
diff --git a/docs/tool_proj4d3.js.html b/docs/tool_proj4d3.js.html
diff --git a/docs/tool_project.js.html b/docs/tool_project.js.html
diff --git a/docs/tool_radius.js.html b/docs/tool_radius.js.html
diff --git a/docs/tool_random.js.html b/docs/tool_random.js.html
diff --git a/docs/tool_replicate.js.html b/docs/tool_replicate.js.html
diff --git a/docs/tool_rewind.js.html b/docs/tool_rewind.js.html
diff --git a/docs/tool_ridge.js.html b/docs/tool_ridge.js.html
diff --git a/docs/tool_symbols.js.html b/docs/tool_symbols.js.html
diff --git a/docs/tool_typo.js.html b/docs/tool_typo.js.html
diff --git a/docs/tool_unproject.js.html b/docs/tool_unproject.js.html
diff --git a/src/container/create.js b/src/container/create.js
@@ -32,6 +32,7 @@ import { clipPath as addclippath } from "../effect/clippath.js";
 import { blur as addblur } from "../effect/blur.js";
 import { shadow as addshadow } from "../effect/shadow.js";
 import { radialGradient as addradialGradient } from "../effect/radialgradient.js";
+import { tissot as addtissot } from "../mark/tissot.js";
 
 import { make as addgrid } from "../grid/make.js";
 
@@ -210,6 +211,7 @@ export function create({
     { id: "scalebar", func: addscalebar },
     { id: "north", func: addnorth },
     { id: "plot", func: addplot },
+    { id: "tissot", func: addtissot },
   ].forEach(
     (d) =>
       (mark[d.id] = function () {

diff --git a/src/index.js b/src/index.js
@@ -136,6 +136,7 @@ export { render } from "./container/render";
 export { tile } from "./mark/tile.js";
 export { halfcircle } from "./mark/halfcircle.js";
 export { symbol } from "./mark/symbol.js";
+export { tissot } from "./mark/tissot.js";
 
 // Plot
 export { plot } from "./plot/plot.js";

diff --git a/src/mark/tissot.js b/src/mark/tissot.js
@@ -0,0 +1,74 @@
+import { create } from "../container/create";
+import { render } from "../container/render";
+import { geoCircle, geoPath, geoNaturalEarth1 } from "d3-geo";
+const d3 = Object.assign({}, { geoPath, geoCircle, geoNaturalEarth1 });
+
+/**
+ * @function tissot
+ * @description The `tissot` function aims to draw Tissot circles to visualize the deformations due to the projection
+ * @see {@link https://observablehq.com/@neocartocnrs/https://observablehq.com/@neocartocnrs/map-projections}
+ *
+ * @property {number} [step = 20] - step between circles
+ * @property {string} [id] - id of the layer
+ * @property {string} [fill = "red"] - fill color.
+ * @property {string} [stroke = "white"] - stroke color.
+ * @property {number} [strokeOpacity = 0.5] - stroke color.
+ * @property {*} [*] - *other SVG attributes that can be applied (strokeDasharray, strokeWidth, opacity, strokeLinecap...)*
+ * @property {*} [svg_*]  - *parameters of the svg container created if the layer is not called inside a container (e.g svg_width)*
+ * @example
+ * // There are several ways to use this function
+ * geoviz.tissot(svg, { step: 25 }) // where svg is the container
+ * svg.tissot({ step: 25 }) // where svg is the container
+ * svg.plot({ type: "tissot", step: 25 }) // where svg is the container
+ * geoviz.tissot({ step: 25 }) // no container
+ */
+
+export function tissot(arg1, arg2) {
+  let newcontainer =
+    (arguments.length <= 1 || arguments[1] == undefined) &&
+    !arguments[0]?._groups
+      ? true
+      : false;
+  let options = newcontainer ? arg1 : arg2;
+  // Default values
+  let opts = {
+    step: 20,
+    fill: "red",
+    fillOpacity: 0.5,
+    stroke: "white",
+  };
+  opts = { ...opts, ...options };
+  opts.datum = regularcircles(opts.step);
+  let ids = `#${opts.id}`;
+  let svg = newcontainer ? create({ projection: d3.geoNaturalEarth1() }) : arg1;
+  svg.path(opts);
+  if (newcontainer) {
+    return render(svg);
+  } else {
+    return ids;
+  }
+}
+
+// Create circles
+function regularcircles(step) {
+  const circle = d3
+    .geoCircle()
+    .center((d) => d)
+    .radius(step / 4)
+    .precision(10);
+  const features = [];
+  for (let y = -80; y <= 80; y += step) {
+    for (let x = -180; x < 180; x += step) {
+      features.push({
+        type: "Feature",
+        properties: {},
+        geometry: {
+          type: "MultiPolygon",
+          coordinates: [circle([x, y]).coordinates],
+        },
+      });
+    }
+  }
+
+  return { type: "FeatureCollection", features: features };
+}
diff --git a/src/plot/plot.js b/src/plot/plot.js
@@ -1,5 +1,6 @@
 // Marks
 import { graticule } from "../mark/graticule";
+import { tissot } from "../mark/tissot";
 import { outline } from "../mark/outline";
 import { path } from "../mark/path";
 import { text } from "../mark/text";
@@ -95,6 +96,9 @@ export function plot(arg1, arg2) {
       : arg2;
 
   switch (options.type) {
+    case "tissot":
+      return tissot(arg1, arg2);
+      break;
     case "graticule":
       return graticule(arg1, arg2);
       break;