text font-size as an unscaled numerical channel

src/marks/text.js

@@ -30,12 +30,14 @@ export class Text extends Mark {
     const [vfill, cfill] = maybeColor(fill, "currentColor");
     const [vfillOpacity, cfillOpacity] = maybeNumber(fillOpacity);
     const [vrotate, crotate] = maybeNumber(rotate, 0);
+    const [vfontSize, cfontSize] = maybeNumber(fontSize);
     super(
       data,
       [
         {name: "x", value: x, scale: "x", optional: true},
         {name: "y", value: y, scale: "y", optional: true},
         {name: "z", value: z, optional: true},
+        {name: "fontSize", value: numberChannel(vfontSize), optional: true},
         {name: "rotate", value: numberChannel(vrotate), optional: true},
         {name: "text", value: text},
         {name: "title", value: title, optional: true},
@@ -48,7 +50,7 @@ export class Text extends Mark {
     this.rotate = crotate;
     this.textAnchor = string(textAnchor);
     this.fontFamily = string(fontFamily);
-    this.fontSize = string(fontSize);
+    this.fontSize = string(cfontSize);
     this.fontStyle = string(fontStyle);
     this.fontVariant = string(fontVariant);
     this.fontWeight = string(fontWeight);
@@ -58,7 +60,7 @@ export class Text extends Mark {
   render(
     I,
     {x, y},
-    {x: X, y: Y, z: Z, rotate: R, text: T, title: L, fill: F, fillOpacity: FO},
+    {x: X, y: Y, z: Z, rotate: R, text: T, title: L, fill: F, fillOpacity: FO, fontSize: FS},
     {width, height, marginTop, marginRight, marginBottom, marginLeft}
   ) {
     const {rotate} = this;
@@ -84,6 +86,7 @@ export class Text extends Mark {
               : text => text.attr("x", X ? i => X[i] : cx).attr("y", Y ? i => Y[i] : cy))
             .call(applyAttr, "fill", F && (i => F[i]))
             .call(applyAttr, "fill-opacity", FO && (i => FO[i]))
+            .call(applyAttr, "font-size", FS && (i => FS[i]))
             .text(i => T[i])
             .call(title(L)))
       .node();

test/marks/text-test.js

@@ -5,9 +5,9 @@ tape("text() has the expected defaults", test => {
   const text = Plot.text();
   test.strictEqual(text.data, undefined);
   test.strictEqual(text.transform, undefined);
-  test.deepEqual(text.channels.map(c => c.name), ["x", "y", "rotate", "text"]);
-  test.deepEqual(text.channels.map(c => Plot.valueof([[1, 2], [3, 4]], c.value)), [[1, 3], [2, 4], undefined, [0, 1]]);
-  test.deepEqual(text.channels.map(c => c.scale), ["x", "y", undefined, undefined]);
+  test.deepEqual(text.channels.map(c => c.name), ["x", "y", "fontSize", "rotate", "text"]);
+  test.deepEqual(text.channels.map(c => Plot.valueof([[1, 2], [3, 4]], c.value)), [[1, 3], [2, 4], undefined, undefined, [0, 1]]);
+  test.deepEqual(text.channels.map(c => c.scale), ["x", "y", undefined, undefined, undefined]);
   test.strictEqual(text.fill, undefined);
   test.strictEqual(text.fillOpacity, undefined);
   test.strictEqual(text.stroke, undefined);

test/plots/index.js

@@ -33,6 +33,7 @@ export {default as industryUnemploymentShare} from "./industry-unemployment-shar
 export {default as industryUnemploymentStream} from "./industry-unemployment-stream.js";
 export {default as learningPoverty} from "./learning-poverty.js";
 export {default as letterFrequencyBar} from "./letter-frequency-bar.js";
+export {default as letterFrequencyCloud} from "./letter-frequency-cloud.js";
 export {default as letterFrequencyColumn} from "./letter-frequency-column.js";
 export {default as letterFrequencyDot} from "./letter-frequency-dot.js";
 export {default as letterFrequencyLollipop} from "./letter-frequency-lollipop.js";

test/plots/letter-frequency-cloud.js

@@ -0,0 +1,17 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+
+export default async function() {
+  const alphabet = await d3.csv("data/alphabet.csv", d3.autoType);
+  const random = d3.randomLcg(3);
+  const m = d3.max(alphabet, d => d.frequency);
+  const x = alphabet.map(random);
+  const y = alphabet.map(random);
+  return Plot.plot({
+    x: { axis: null, domain: [-0.1, 1.1] },
+    y: { axis: null, domain: [-0.1, 1.2] },
+    marks: [
+      Plot.text(alphabet, {x, y, text: "letter", fontSize: d => 10 + 200 * (d.frequency / m)})
+    ]
+  });
+}