text stroke channels

src/marks/text.js

@@ -13,6 +13,8 @@ export class Text extends Mark {
       title,
       fill,
       fillOpacity,
+      stroke,
+      strokeOpacity,
       textAnchor,
       fontFamily,
       fontSize,
@@ -25,6 +27,8 @@ export class Text extends Mark {
       ...options
     } = {}
   ) {
+    const [vstroke, cstroke] = maybeColor(stroke, "none");
+    const [vstrokeOpacity, cstrokeOpacity] = maybeNumber(strokeOpacity);
     const [vfill, cfill] = maybeColor(fill, "currentColor");
     const [vfillOpacity, cfillOpacity] = maybeNumber(fillOpacity);
     const [vrotate, crotate] = maybeNumber(rotate, 0);
@@ -39,11 +43,19 @@ export class Text extends Mark {
         {name: "text", value: text},
         {name: "title", value: title, optional: true},
         {name: "fill", value: vfill, scale: "color", optional: true},
-        {name: "fillOpacity", value: vfillOpacity, scale: "opacity", optional: true}
+        {name: "fillOpacity", value: vfillOpacity, scale: "opacity", optional: true},
+        {name: "stroke", value: vstroke, scale: "color", optional: true},
+        {name: "strokeOpacity", value: vstrokeOpacity, scale: "opacity", optional: true}
       ],
       options
     );
-    Style(this, {fill: cfill, fillOpacity: cfillOpacity, ...options});
+    Style(this, {
+      fill: cfill,
+      fillOpacity: cfillOpacity,
+      stroke: cstroke,
+      strokeOpacity: cstrokeOpacity,
+      ...options
+    });
     this.rotate = crotate;
     this.textAnchor = string(textAnchor);
     this.fontFamily = string(fontFamily);
@@ -57,7 +69,7 @@ export class Text extends Mark {
   render(
     I,
     {x, y},
-    {x: X, y: Y, rotate: R, text: T, title: L, fill: F, fillOpacity: FO, fontSize: FS},
+    {x: X, y: Y, rotate: R, text: T, title: L, fill: F, fillOpacity: FO, fontSize: FS, stroke: S, strokeOpacity: SO},
     {width, height, marginTop, marginRight, marginBottom, marginLeft}
   ) {
     const {rotate} = this;
@@ -83,6 +95,8 @@ export class Text extends Mark {
             .call(applyAttr, "fill", F && (i => F[i]))
             .call(applyAttr, "fill-opacity", FO && (i => FO[i]))
             .call(applyAttr, "font-size", FS && (i => FS[i]))
+            .call(applyAttr, "stroke", S && (i => S[i]))
+            .call(applyAttr, "stroke-opacity", SO && (i => SO[i]))
             .text(i => T[i])
             .call(title(L)))
       .node();

test/plots/index.js

@@ -98,4 +98,5 @@ export {default as usPopulationStateAgeDots} from "./us-population-state-age-dot
 export {default as usPresidentialElection2020} from "./us-presidential-election-2020.js";
 export {default as usRetailSales} from "./us-retail-sales.js";
 export {default as usStatePopulationChange} from "./us-state-population-change.js";
+export {default as wordCloud} from "./word-cloud.js";
 export {default as wordLengthMobyDick} from "./word-length-moby-dick.js";

test/plots/word-cloud.js

@@ -0,0 +1,37 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+
+export default async function() {
+
+  // Compute a set of “words” from the text. As with any natural language task,
+  // this is messy and approximate.
+  const words = Array.from(d3.rollup(
+    (await d3.text("data/moby-dick-chapter-1.txt"))
+      .replace(/’/g, "") // remove apostrophes
+      .split(/\b/g) // split at word boundaries
+      .map(word => word.replace(/[^a-z]+/ig, "")) // strip non-letters
+      .filter(word => word),
+    ([first]) => ({
+      len: first.length,
+      word: first
+    }),
+    word => word.length
+  ).values());
+  const random = d3.randomLcg(32);
+  return Plot.plot({
+    x: { axis: null, inset: 80 },
+    y: { axis: null, inset: 30 },
+    marks: [
+      Plot.text(words, {
+        x: random,
+        y: random,
+        text: "word",
+        fill: "word",
+        fillOpacity: 0.25,
+        stroke: "word",
+        strokeOpacity: 0.75,
+        fontSize: d => 100 / Math.sqrt(d.len)
+      })
+    ]
+  });
+}