transforms *almost* work now

Author: Fil

src/plot.js

@@ -5,7 +5,7 @@ import {Context, create} from "./context.js";
 import {defined} from "./defined.js";
 import {Dimensions} from "./dimensions.js";
 import {Legends, exposeLegends} from "./legends.js";
-import {arrayify, isDomainSort, isScaleOptions, keyword, map, maybeNamed, range, second, where, yes} from "./options.js";
+import {arrayify, isDomainSort, isScaleOptions, keyword, map, maybeNamed, range, second, valueof, where, yes} from "./options.js";
 import {Scales, ScaleFunctions, autoScaleRange, exposeScales, coerceNumbers} from "./scales.js";
 import {position, registry as scaleRegistry} from "./scales/index.js";
 import {inferDomain} from "./scales/quantitative.js";
@@ -366,7 +366,29 @@ export class Mark {
   initialize(facets, facetChannels) {
     let data = arrayify(this.data);
     if (facets === undefined && data != null) facets = [range(data)];
-    if (this.transform != null) ({facets, data} = this.transform(data, facets)), data = arrayify(data);
+    if (this.transform != null) {
+      if (this.channels.time) {
+        // Split facets by keyframe, transform
+        const {value} = this.channels.time;
+        const T = valueof(data, value);
+        const times = [...new Set(T)];
+        const n = facets.length;
+        facets = facets.flatMap(facet => times.map(time => facet.filter(i => T[i] === time)));
+        ({data, facets} = this.transform(data, facets));
+
+        // and reassemble
+        const TT = []; // keyframes for the new indices
+        this.channels.time.value = { transform: () => TT};
+        for (let i = 0; i < facets.length; ++i) {
+          const time = times[i % times.length];
+          for (const j of facets[i]) TT[j] = time;
+        }
+        facets = Array.from({length: n}, (_, i) => facets.filter((_, j) => j % n === i).flat());
+      } else {
+        ({facets, data} = this.transform(data, facets));
+      }
+      data = arrayify(data);
+    }
     const channels = Channels(this.channels, data);
     if (this.sort != null) channelDomain(channels, facetChannels, data, this.sort);
     return {data, facets, channels};

test/plots/gapminder-box.js

@@ -0,0 +1,27 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+
+export default async function () {
+  const gapminder = await d3.tsv("data/gapminder.tsv", d3.autoType);
+  return Plot.plot({
+    marginLeft: 70,
+    inset: 10,
+    grid: true,
+  //  facet:{ data: gapminder, y: "continent"},
+    x: {
+      type: "log",
+      transform: d => Math.pow(10, d)
+    },
+    marks: [
+      Plot.boxX(gapminder, {
+        x: d => Math.log10(d.gdpPercap),
+        sort: null,
+        y: "continent",
+        stroke: "continent",
+        strokeWidth: 0.5,
+        time: "year",
+        timeFilter: "lte"
+      })
+    ]
+  });
+}

test/plots/gapminder-dodge.js

@@ -0,0 +1,40 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+
+export default async function () {
+  let gapminder = await d3.tsv("data/gapminder.tsv", d3.autoType);
+  gapminder = gapminder.filter(d => d.continent === "Europe");
+  return Plot.plot({
+    height: 400,
+    marginLeft: 75,
+    inset: 10,
+    grid: true,
+    x: {
+      type: "log",
+      transform: d => Math.pow(10, d)
+    },
+    marks: [
+      Plot.dot(gapminder, Plot.dodgeY({
+        x: d => Math.log10(d.gdpPercap),
+        z: d => `${d.year} & ${d.continent}`,
+        r: "pop",
+        stroke: "continent",
+        sort: null
+//        time: "year"
+      })),
+      Plot.dot(gapminder, Plot.dodgeY({
+        x: d => Math.log10(d.gdpPercap),
+        z: d => `${d.year} & ${d.continent}`,
+        r: "pop",
+        fill: "continent",
+        sort: null,
+        fillOpacity: 0.3,
+        strokeWidth: 0.5,
+        time: "year"
+      })),
+      void Plot.text(gapminder, {frameAnchor: "top-left", text: "year", time: "year"})
+//      Plot.text(gapminder, Plot.selectFirst({frameAnchor: "top-left", text: "year", time: "year"}))
+
+    ]
+  });
+}

test/plots/index.js

@@ -76,6 +76,8 @@ export {default as frameCorners} from "./frame-corners.js";
 export {default as fruitSales} from "./fruit-sales.js";
 export {default as fruitSalesDate} from "./fruit-sales-date.js";
 export {default as gapminder} from "./gapminder.js";
+export {default as gapminderBox} from "./gapminder-box.js";
+export {default as gapminderDodge} from "./gapminder-dodge.js";
 export {default as gapminderContinent} from "./gapminder-continent.js";
 export {default as gistempAnomaly} from "./gistemp-anomaly.js";
 export {default as gistempAnomalyMoving} from "./gistemp-anomaly-moving.js";