line halo

Author: Fil

README.md

@@ -3257,6 +3257,15 @@ If *curve* is a function, it will be invoked with a given *context* in the same
 
 The tension option only has an effect on cardinal and Catmull–Rom splines (*cardinal*, *cardinal-open*, *cardinal-closed*, *catmull-rom*, *catmull-rom-open*, and *catmull-rom-closed*). For cardinal splines, it corresponds to [tension](https://github.com/d3/d3-shape/blob/main/README.md#curveCardinal_tension); for Catmull–Rom splines, [alpha](https://github.com/d3/d3-shape/blob/main/README.md#curveCatmullRom_alpha).
 
+
+## Halo
+
+The line mark support a halo filter, allowing to better separate multiple lines by adding a thick white background underneath each line, [a technique described by Sara Soueidan](https://tympanus.net/codrops/2019/01/22/svg-filter-effects-outline-text-with-femorphology/). The halo options can be specified as:
+
+* *haloColor* - the halo’s color, defaults to white
+* *haloRadius* - the halo’s radius, which defaults to 2px
+* *halo* - if true, activates the halo filter; if specified as a color, defines the halo’s color; if specified as a number, defines the halo’s radius
+
 ## Markers
 
 A [marker](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker) defines a graphic drawn on vertices of a [line](#line) or a [link](#link) mark. The supported marker options are:

src/marks/halo.js

@@ -0,0 +1,33 @@
+import {isColor} from "../options.js";
+
+let nextHaloId = 0;
+
+export function applyHalo(g, {color, radius}) {
+  const id = `plot-linehalo-${nextHaloId++}`;
+  g.selectChildren().style("filter", `url(#${id})`);
+  g.append("filter").attr("id", id).html(`
+    <feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="${radius}"></feMorphology>
+    <feFlood flood-color="${color}" result="BG"></feFlood>
+    <feComposite in="BG" in2="DILATED" operator="in" result="OUTLINE"></feComposite>
+    <feMerge>
+      <feMergeNode in="OUTLINE" />
+      <feMergeNode in="SourceGraphic" />
+    </feMerge>`);
+}
+
+export function maybeHalo(halo, color, radius) {
+  if (halo === undefined) halo = color !== undefined || radius !== undefined;
+  if (!halo) return false;
+  const defaults = {color: "white", radius: 2};
+  if (color === undefined) {
+    color = isColor(halo) ? halo : defaults.color;
+  } else if (!isColor(color)) {
+    throw new Error(`Unsupported halo color: ${color}`);
+  }
+  if (radius === undefined) {
+    radius = !isNaN(+halo) ? +halo : defaults.radius;
+  } else if (isNaN(+radius)) {
+    throw new Error(`Unsupported halo radius: ${radius}`);
+  }
+  return {color, radius};
+}

src/marks/line.js

@@ -1,4 +1,4 @@
-import {line as shapeLine} from "d3";
+import {group, line as shapeLine} from "d3";
 import {create} from "../context.js";
 import {Curve} from "../curve.js";
 import {indexOf, identity, maybeTuple, maybeZ} from "../options.js";
@@ -12,6 +12,7 @@ import {
 } from "../style.js";
 import {maybeDenseIntervalX, maybeDenseIntervalY} from "../transforms/bin.js";
 import {applyGroupedMarkers, markers} from "./marker.js";
+import {applyHalo, maybeHalo} from "./halo.js";
 
 const defaults = {
   ariaLabel: "line",
@@ -25,7 +26,7 @@ const defaults = {
 
 export class Line extends Mark {
   constructor(data, options = {}) {
-    const {x, y, z, curve, tension} = options;
+    const {x, y, z, curve, tension, halo, haloColor, haloRadius} = options;
     super(
       data,
       {
@@ -38,14 +39,15 @@ export class Line extends Mark {
     );
     this.z = z;
     this.curve = Curve(curve, tension);
+    this.halo = maybeHalo(halo, haloColor, haloRadius);
     markers(this, options);
   }
   filter(index) {
     return index;
   }
   render(index, scales, channels, dimensions, context) {
     const {x: X, y: Y} = channels;
-    return create("svg:g", context)
+    const g = create("svg:g", context)
       .call(applyIndirectStyles, this, scales, dimensions)
       .call(applyTransform, this, scales)
       .call((g) =>
@@ -65,8 +67,25 @@ export class Line extends Mark {
               .x((i) => X[i])
               .y((i) => Y[i])
           )
-      )
-      .node();
+      );
+
+    if (this.halo) {
+      // With variable aesthetics, we need to regroup segments by line
+      let line = -1;
+      let segmented = false;
+      const groups = group(g.selectAll("path"), (d) =>
+        d.__data__.segment === undefined ? ++line : ((segmented = true), line)
+      );
+      if (segmented) {
+        for (const [, paths] of groups) {
+          const l = g.append("g").node();
+          for (const p of paths) l.appendChild(p);
+        }
+      }
+      applyHalo(g, this.halo);
+    }
+
+    return g.node();
   }
 }
 

src/style.js

@@ -248,6 +248,7 @@ export function* groupIndex(I, position, {z}, channels) {
   for (const G of Z ? groupZ(I, Z, z) : [I]) {
     let Ag; // the A-values (aesthetics) of the current group, if any
     let Gg; // the current group index (a subset of G, and I), if any
+    let segment = 0; // counter of sub-groups for the current z
     out: for (const i of G) {
       // If any channel has an undefined value for this index, skip it.
       for (const c of C) {
@@ -260,8 +261,9 @@ export function* groupIndex(I, position, {z}, channels) {
       // Otherwise, if this is a new group, record the aesthetics for this
       // group. Yield the current group and start a new one.
       if (Ag === undefined) {
-        if (Gg) yield Gg;
-        (Ag = A.map((c) => keyof(c[i]))), (Gg = [i]);
+        if (Gg) segment++ ? Object.assign(Gg, {segment}) : Gg;
+        Ag = A.map((c) => keyof(c[i]));
+        Gg = [i];
         continue;
       }
 
@@ -272,15 +274,16 @@ export function* groupIndex(I, position, {z}, channels) {
       for (let j = 0; j < A.length; ++j) {
         const k = keyof(A[j][i]);
         if (k !== Ag[j]) {
-          yield Gg;
-          (Ag = A.map((c) => keyof(c[i]))), (Gg = [i]);
+          yield segment++ ? Object.assign(Gg, {segment}) : Gg;
+          Ag = A.map((c) => keyof(c[i]));
+          Gg = [i];
           continue out;
         }
       }
     }
 
     // Yield the current group, if any.
-    if (Gg) yield Gg;
+    if (Gg) yield segment++ ? Object.assign(Gg, {segment}) : Gg;
   }
 }
 

test/data/README.md

@@ -118,6 +118,11 @@ https://observablehq.com/@moklick
 TSA
 https://www.tsa.gov/coronavirus/passenger-throughput
 
+## us-gdp.csv
+U.S. Gross Domestic Product, chained dollars, Jan 1947-Jan 2022
+Federal Reserve Economic Data
+https://fred.stlouisfed.org/
+
 ## us-population-state-age.csv
 U.S. Census Bureau
 https://observablehq.com/@d3/barcode-plot