channel aliases; mark.with

Author: mbostock

src/options.js

@@ -15,6 +15,7 @@ export function valueof(data, value, arrayType) {
     : type === "function" ? array.from(data, value)
     : type === "number" || value instanceof Date || type === "boolean" ? array.from(data, constant(value))
     : value && typeof value.transform === "function" ? arrayify(value.transform(data), arrayType)
+    : value && value.alias !== undefined ? value // TODO cleaner?
     : arrayify(value, arrayType); // preserve undefined type
 }
 

src/plot.js

@@ -39,8 +39,10 @@ export function plot(options = {}) {
     if (markChannels.has(mark)) throw new Error("duplicate mark");
     const {index, channels} = mark.initialize();
     for (const [, channel] of channels) {
-      const {scale} = channel;
-      if (scale !== undefined) {
+      const {value, scale} = channel;
+      if (value && value.alias !== undefined) {
+        channel.value = value.alias(markChannels);
+      } else if (scale !== undefined) {
         const scaled = scaleChannels.get(scale);
         const {percent, transform = percent ? x => x * 100 : undefined} = options[scale] || {};
         if (transform != null) channel.value = Array.from(channel.value, transform);
@@ -153,6 +155,7 @@ export class Mark {
     const {facet = "auto", sort, dx, dy, clip} = options;
     const names = new Set();
     this.data = data;
+    this.options = options;
     this.sort = isOptions(sort) ? sort : null;
     this.facet = facet == null || facet === false ? null : keyword(facet === true ? "include" : facet, "facet", ["auto", "include", "exclude"]);
     const {transform} = basic(options);
@@ -196,6 +199,19 @@ export class Mark {
   plot({marks = [], ...options} = {}) {
     return plot({...options, marks: [...marks, this]});
   }
+  with(Mark, options) {
+    const m = [
+      this,
+      Mark(this.data, {
+        ...this.options,
+        ...Object.fromEntries(this.channels.map(({name}) => [name, ({alias: (channels) => channels.get(this).find(([n]) => n === name)[1].value})])),
+        ...options
+      })
+    ];
+    m.with = () => m; // TODO chained with
+    m.plot = Mark.prototype.plot;
+    return m;
+  }
 }
 
 export function marks(...marks) {

test/output/randomWith.svg

@@ -36,10 +36,7 @@ export default async function() {
         x: "date",
         y: "mean",
         fill: "currentColor"
-      }),
-      Plot.text([data[i]], {
-        x: "date",
-        y: "mean",
+      }).with(Plot.text, {
         text: "mean",
         textAnchor: "start",
         dx: 6

test/plots/covid-ihme-projected-deaths.js

@@ -119,6 +119,7 @@ export {default as randomBins} from "./random-bins.js";
 export {default as randomBinsXY} from "./random-bins-xy.js";
 export {default as randomQuantile} from "./random-quantile.js";
 export {default as randomWalk} from "./random-walk.js";
+export {default as randomWith} from "./random-with.js";
 export {default as seattlePrecipitationRule} from "./seattle-precipitation-rule.js";
 export {default as seattleTemperatureBand} from "./seattle-temperature-band.js";
 export {default as seattleTemperatureCell} from "./seattle-temperature-cell.js";

test/plots/index.js

@@ -0,0 +1,11 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+
+export default async function() {
+  const randomNormal = d3.randomNormal.source(d3.randomLcg(42))();
+  return Plot.plot({
+    marks: [
+      Plot.lineY({length: 500}, Plot.mapY("cumsum", {y: randomNormal, stroke: "blue"})).with(Plot.dot)
+    ]
+  });
+}