feat: links

src/draw.js

@@ -19,6 +19,7 @@ import { shadow } from "./shadow.js";
 import { addscalebar } from "./scalebar.js";
 import { text } from "./text.js";
 import { label } from "./layer-label.js";
+import { links } from "./layer-links.js";
 import { spikes } from "./layer-spikes.js";
 import { dotcartogram } from "./layer-dotcartogram.js";
 import { proj4d3 } from "./proj4d3.js";
@@ -201,11 +202,11 @@ export function draw({ params = {}, layers = {} } = {}) {
         data : layer.data,
         data_i : layer.data_i,
         data_j : layer.data_j,
-        data_fij : layer.data_fij,
         stroke : layer.stroke,
         strokeOpacity : layer.strokeOpacity,
         strokeWidth : layer.strokeWidth,
-      }, clipid);
+        strokeLinecap : layer.strokeLinecap,
+    }, clipid);
     }
 
     // mushroom layer

src/layer-bubble.js

@@ -210,6 +210,9 @@ export function bubble(selection, projection, options = {}, clipid){
     });
   }
 
+
+
+
   // Legend (circles)
   let array = features.map((d) => Math.abs(+d.properties[values]));
   let legval = [

src/layer-links.js

@@ -11,6 +11,8 @@ import {poly2points } from "./poly2points.js";
 import {figuration } from "./figuration.js";
 import {chorotypo } from "./chorotypo.js";
 import {thickness } from "./thickness.js";
+import {leglinks } from "./leg-links.js";
+
 
 export function links(selection, projection, options = {}, clipid) {
   let cols = [
@@ -23,6 +25,7 @@ export function links(selection, projection, options = {}, clipid) {
     "#e5c494",
     "#b3b3b3"
   ];
+  let strokeLinecap = options.strokeLinecap ?? "butt"
   let stroke = options.stroke ?? cols[Math.floor(Math.random() * cols.length)];
   let strokeWidth = options.strokeWidth ?? 1.5;
   let strokeOpacity = options.strokeOpacity ?? 0.9;
@@ -31,9 +34,10 @@ export function links(selection, projection, options = {}, clipid) {
   let data = options.data;
   let data_i = options.data_i ?? "i";
   let data_j = options.data_j ?? "j";
-  let data_fij = options.data_fij ?? "fij";
   //let tooltip = options.tooltip ?? "";
 
+if (data.length > 0){
+
   let dots;
   if (figuration(geojson) == "p") {
     dots = geojson.features;
@@ -48,25 +52,48 @@ export function links(selection, projection, options = {}, clipid) {
     ])
   );
 
-  //return coordsbyid;
-
   selection
     .append("g")
     .selectAll("line")
-    .data(
+    .data
+    (
       data.sort((a, b) =>
-        d3.descending(Math.abs(+a[data_fij]), Math.abs(+b[data_fij]))
+        d3.descending(Math.abs(+a[strokeWidth.values]), Math.abs(+b[strokeWidth.values]))
       )
     )
     .join("line")
-    .attr("x1", (d) => coordsbyid.get(d[data_i]) ? coordsbyid.get(d[data_i])[0] : undefined)
-    .attr("y1", (d) => coordsbyid.get(d[data_i]) ? coordsbyid.get(d[data_i])[1] : undefined)
-    .attr("x2", (d) => coordsbyid.get(d[data_i]) ? coordsbyid.get(d[data_j])[0] : undefined)
-    .attr("y2", (d) => coordsbyid.get(d[data_i]) ? coordsbyid.get(d[data_j])[1] : undefined)
+    .attr("x1", (d) => coordsbyid.get(d[data_i]) && coordsbyid.get(d[data_j]) ? coordsbyid.get(d[data_i])[0] : undefined)
+    .attr("y1", (d) => coordsbyid.get(d[data_i]) && coordsbyid.get(d[data_j]) ? coordsbyid.get(d[data_i])[1] : undefined)
+    .attr("x2", (d) => coordsbyid.get(d[data_i]) && coordsbyid.get(d[data_j]) ? coordsbyid.get(d[data_j])[0] : undefined)
+    .attr("y2", (d) => coordsbyid.get(d[data_i]) && coordsbyid.get(d[data_j]) ? coordsbyid.get(d[data_j])[1] : undefined)
     .attr("fill", "none")
     .attr("stroke", stroke)
+    .attr("stroke-linecap",strokeLinecap)
     .attr("stroke-opacity", strokeOpacity)
     .attr("stroke-width", (d) =>
       thickness(data, strokeWidth)(d[strokeWidth.values])
     );
+
+
+// legend
+const vmax = d3.max(data.map((d) => +d[strokeWidth.values]))
+const smax = thickness(data, { k: strokeWidth.k, values: strokeWidth.values, fixmax: strokeWidth.fixmax})(vmax)
+
+leglinks(selection, {
+x: strokeWidth.leg_x,
+y: strokeWidth.leg_y,
+valmax: vmax,
+sizemax: smax,
+title: strokeWidth.leg_title ?? strokeWidth.values,
+fontSize: strokeWidth.leg_fontSize,
+fontSize2: strokeWidth.leg_fontSize2,
+fill: stroke,
+fillOpacity: strokeOpacity,
+txtcol: strokeWidth.leg_txtcol,
+w: strokeWidth.leg_w,
+round: strokeWidth.leg_round
+})
+
+}
+
 }

src/leg-choro.js

@@ -62,6 +62,7 @@ export function legchoro(selection, options = {}) {
       .attr("x", x + w + fontSize2 / 2)
       .attr("y", y + delta)
       .attr("font-size", `${fontSize2}px`)
+      .attr("fill", txtcol)
       .attr("dy", (d, i) => (h + span) * i)
       .attr("text-anchor", "start")
       .attr("dominant-baseline", "central")

src/leg-links.js

@@ -0,0 +1,78 @@
+import * as d3selection from "d3-selection";
+import * as d3scale from "d3-scale";
+import * as d3array from "d3-array";
+import {rounding } from "./rounding.js";
+
+
+const d3 = Object.assign({}, d3array, d3scale, d3selection);
+
+export function leglinks(selection, options = {}) {
+  let x = options.x ?? null;
+  let y = options.y ?? null;
+  let valmax = options.valmax;
+  let sizemax = options.sizemax;
+  let title = options.title ?? null;
+  let fontSize = options.fontSize ?? 14;
+  let fontSize2 = options.fontSize2 ?? 10;
+  let fill = options.fill ?? "black";
+  let fillOpacity = options.fillOpacity ?? 1;
+  let txtcol = options.txtcol ?? "#363636";
+  let w = options.w ?? 75;
+  let round = options.round ?? undefined;
+
+  const span = 10;
+
+  if (x != null && y != null) {
+    let leg = selection.append("g");
+
+    let delta = 0;
+    if (title != null) {
+      delta = (title.split("\n").length + 1) * fontSize;
+      leg
+        .append("g")
+        .selectAll("text")
+        .data(title.split("\n"))
+        .join("text")
+        .attr("x", x)
+        .attr("y", y)
+        .attr("font-size", `${fontSize}px`)
+        .attr("dy", (d, i) => i * fontSize)
+        .attr("text-anchor", "start")
+        .attr("dominant-baseline", "hanging")
+        .attr("fill", txtcol)
+        .text((d) => d);
+    }
+
+    leg
+      .append("path")
+      .attr(
+        "d",
+        `M ${x},${y + delta + sizemax / 2} ${x + w},${y + delta} ${x + w},${
+          y + delta + sizemax
+        } Z `
+      )
+      .attr("stroke", "none")
+      .attr("fill", fill)
+      .attr("fill-opacity", fillOpacity);
+
+    leg
+      .append("text")
+      .attr("font-size", `${fontSize2}px`)
+      .attr("fill", txtcol)
+      .attr("text-anchor", "start")
+      .attr("dominant-baseline", "hanging")
+      .attr("x", x)
+      .attr("y", y + delta + sizemax / 2 + fontSize2 / 2)
+      .text("0");
+
+    leg
+      .append("text")
+      .attr("font-size", `${fontSize2}px`)
+      .attr("fill", txtcol)
+      .attr("text-anchor", "end")
+      .attr("dominant-baseline", "hanging")
+      .attr("x", x + w)
+      .attr("y", y + delta + sizemax + fontSize2 / 2)
+      .text(rounding(valmax, round));
+  }
+}

src/leg-typo.js

@@ -68,6 +68,7 @@ export function legtypo(selection, options = {}) {
       .attr("y", y + delta + h / 2)
       //.attr("y", y + h / 2 - (fontSize2 * text.split("\n").length) / 2 + delta)
       .attr("font-size", `${fontSize2}px`)
+      .attr("fill", txtcol)
       .attr("dy", (d, i) => (h + span) * i)
       .attr("text-anchor", "start")
       .attr("dominant-baseline", "central")