doc

riatelab · Mar 19, 2024 · bebd64d · bebd64d
1 parent 63c803e
commit bebd64d
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 16 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -35,7 +35,7 @@
 svg.plot({type:&quot;header&quot;, fontSize: 30, text: &quot;A Simple World Map&quot;, fill: &quot;#267A8A&quot;, fontWeight: &quot;bold&quot;, fontFamily: &quot;Tangerine&quot;})
 return svg.render() // render
 }
-</code></pre><h2>Statistical cartography</h2><p>In addition of mapping static marks, the plot function lets you quickly create statistical maps (including legends) with very few parameters (and many others as options). Let's see some examples.</p><h3>Proportional symbols</h3><p>By using <a href="global.html#plot/prop"><code>type = &quot;prop&quot;</code></a>, you can design a map with proportionnal symbols. Find below a minimal example.</p><pre class="prettyprint source lang-js"><code>geoviz.plot({type = &quot;prop&quot;, data = *a geoJSON*, var = *a field*})
+</code></pre><h2>Statistical cartography</h2><p>In addition of mapping static marks, the plot function lets you quickly create statistical maps (including legends) with very few parameters (and many others as options). Let's see some examples.</p><h3>Proportional symbols</h3><p>By using <a href="global.html#plot/prop"><code>type = &quot;prop&quot;</code></a>, you can design a map with proportionnal symbols (&quot;circle&quot;, &quot;square&quot;, &quot;halfcircle&quot;,&quot;spike&quot;). Find below a minimal example.</p><pre class="prettyprint source lang-js"><code>geoviz.plot({type = &quot;prop&quot;, data = *a geoJSON*, var = *a field*})
 </code></pre><p>📚 <a href="global.html#plot/prop"><code>plot/prop()</code></a></p><p>🌏 live demo <a href="https://observablehq.com/@neocartocnrs/prop"><code>prop</code></a></p><h3>Choropleth</h3><p>By using <a href="global.html#plot/choro"><code>type = &quot;choro&quot;</code></a>, you can design a choropleth map. Find below a minimal example.</p><pre class="prettyprint source lang-js"><code>geoviz.plot({type = &quot;choro&quot;, data = *a geoJSON*, var = *a field*})
 </code></pre><p>📚 <a href="global.html#plot/choro"><code>plot/choro()</code></a></p><p>🌏 live demo <a href="https://observablehq.com/@neocartocnrs/choropleth"><code>choropleth</code></a></p><h3>Typology</h3><p>By using <a href="global.html#plot/typo"><code>type = &quot;typo&quot;</code></a>, you can design a qualitative typo map. Find below a minimal example.</p><pre class="prettyprint source lang-js"><code>geoviz.plot({type = &quot;typo&quot;, data = *a geoJSON*, var = *a field*})
 </code></pre><p>📚 <a href="global.html#plot/typo"><code>plot/typo()</code></a></p><p>🌏 live demo <a href="https://observablehq.com/@neocartocnrs/typo"><code>typology</code></a></p><h3>Proportional symbols + horopleth</h3><p>By using <a href="global.html#plot/propchoro"><code>type = &quot;propchoro&quot;</code></a>, you can design a map with proportionnal symbols with graduated colors. Find below a minimal example.</p><pre class="prettyprint source lang-js"><code>geoviz.plot({type = &quot;propchoro&quot;, data = *a geoJSON*, var1 = *a field*, var2 = *a field*})

diff --git a/docs/mark_square.js.html b/docs/mark_square.js.html
@@ -253,16 +253,14 @@
           )
           .attr(
             "x",
-            (d) =>
-              path.centroid(d.geometry)[0] + opts.dx - radius(d, opts.side) / 2
+            (d) => path.centroid(d.geometry)[0] + opts.dx - radius(d, opts.side)
           )
           .attr(
             "y",
-            (d) =>
-              path.centroid(d.geometry)[1] + opts.dy - radius(d, opts.side) / 2
+            (d) => path.centroid(d.geometry)[1] + opts.dy - radius(d, opts.side)
           )
-          .attr("width", (d) => radius(d, opts.side))
-          .attr("height", (d) => radius(d, opts.side))
+          .attr("width", (d) => radius(d, opts.side) * 2)
+          .attr("height", (d) => radius(d, opts.side) * 2)
           .attr("visibility", (d) =>
             isNaN(path.centroid(d.geometry)[0]) ? "hidden" : "visible"
           );

diff --git a/docs/plot_plot_prop.js.html b/docs/plot_plot_prop.js.html
@@ -45,12 +45,13 @@
     id: unique(),
     missing: "white",
     k: 50,
-
     fixmax: null,
     leg_type: "nested",
     leg_pos: [10, 10],
   };
 
+  opts.k = opts.symbol == "square" ? 100 : 50;
+
   opts = { ...opts, ...options };
   let ids = `#${opts.id}`;
 
@@ -65,8 +66,18 @@
 
   // LAYER OPTS
 
-  opts.r = opts.var;
-  opts.height = opts.var;
+  if (opts.symbol == "square") {
+    opts.side = opts.var;
+  }
+  if (opts.symbol == "spike") {
+    opts.height = opts.var;
+  }
+  if (opts.symbol == "circle") {
+    opts.r = opts.var;
+  }
+  if (opts.symbol == "halfcircle") {
+    opts.r = opts.var;
+  }
 
   let layeropts = {};
   Object.keys(opts)
@@ -120,6 +131,11 @@
           ? svg.legend.circles_nested(legopts)
           : svg.legend.circles(legopts);
         break;
+      case "square":
+        opts.leg_type == "nested"
+          ? svg.legend.squares_nested(legopts)
+          : svg.legend.squares(legopts);
+        break;
       case "spike":
         svg.legend.spikes(legopts);
         break;

diff --git a/docs/plot_plot_propchoro.js.html b/docs/plot_plot_propchoro.js.html
@@ -90,8 +90,18 @@
     svg.path({ datum: opts.data, fill: "#CCC", fillOpacity: 0.2 });
   }
 
-  opts.r = opts.var1;
-  opts.height = opts.var1;
+  if (opts.symbol == "square") {
+    opts.side = opts.var1;
+  }
+  if (opts.symbol == "spike") {
+    opts.height = opts.var1;
+  }
+  if (opts.symbol == "circle") {
+    opts.r = opts.var1;
+  }
+  if (opts.symbol == "halfcircle") {
+    opts.r = opts.var1;
+  }
 
   // CLASSIFY
   opts.missing_fill = opts.missing;
@@ -116,7 +126,6 @@
 
   opts.fill = (d) => classif.colorize(d.properties[opts.var2]);
 
-  // LAYER OPTS
   let layeropts = {};
   Object.keys(opts)
     .filter((str) => str.slice(0, 3) != "leg")
@@ -128,6 +137,9 @@
     case "circle":
       svg.circle(layeropts);
       break;
+    case "square":
+      svg.square(layeropts);
+      break;
     case "spike":
       svg.spike(layeropts);
       break;
@@ -169,6 +181,11 @@
           ? svg.legend.circles_nested(legopts)
           : svg.legend.circles(legopts);
         break;
+      case "square":
+        opts.leg1_type == "nested"
+          ? svg.legend.squares_nested(legopts)
+          : svg.legend.squares(legopts);
+        break;
       case "spike":
         svg.legend.spikes(legopts);
         break;

diff --git a/docs/plot_plot_proptypo.js.html b/docs/plot_plot_proptypo.js.html
@@ -88,8 +88,18 @@
     svg.path({ datum: opts.data, fill: "#CCC", fillOpacity: 0.2 });
   }
 
-  opts.r = opts.var1;
-  opts.height = opts.var1;
+  if (opts.symbol == "square") {
+    opts.side = opts.var1;
+  }
+  if (opts.symbol == "spike") {
+    opts.height = opts.var1;
+  }
+  if (opts.symbol == "circle") {
+    opts.r = opts.var1;
+  }
+  if (opts.symbol == "halfcircle") {
+    opts.r = opts.var1;
+  }
 
   // CLASSIFY
   opts.missing_fill = opts.missing;
@@ -108,7 +118,6 @@
     opts.missing = false;
   }
 
-  // LAYER OPTS
   let layeropts = {};
   Object.keys(opts)
     .filter((str) => str.slice(0, 3) != "leg")
@@ -120,6 +129,9 @@
     case "circle":
       svg.circle(layeropts);
       break;
+    case "square":
+      svg.square(layeropts);
+      break;
     case "spike":
       svg.spike(layeropts);
       break;
@@ -159,6 +171,11 @@
           ? svg.legend.circles_nested(legopts)
           : svg.legend.circles(legopts);
         break;
+      case "square":
+        opts.leg1_type == "nested"
+          ? svg.legend.squares_nested(legopts)
+          : svg.legend.squares(legopts);
+        break;
       case "spike":
         svg.legend.spikes(legopts);
         break;