time channel

Author: mbostock

src/plot.js

@@ -1,4 +1,4 @@
-import {cross, difference, groups, InternMap, select} from "d3";
+import {bisectLeft, cross, difference, groups, InternMap, select} from "d3";
 import {Axes, autoAxisTicks, autoScaleLabels} from "./axes.js";
 import {Channel, Channels, channelDomain, valueObject} from "./channel.js";
 import {Context, create} from "./context.js";
@@ -124,6 +124,9 @@ export function plot(options = {}) {
 
   autoScaleLabels(channelsByScale, scaleDescriptors, axes, dimensions, options);
 
+  // Aggregate and sort time channels.
+  const times = aggregateTimes(stateByMark);
+
   // Compute value objects, applying scales as needed.
   for (const state of stateByMark.values()) {
     state.values = valueObject(state.channels, scales);
@@ -213,11 +216,31 @@ export function plot(options = {}) {
           }
         });
   } else {
+    const timeMarks = [];
     for (const [mark, {channels, values, facets}] of stateByMark) {
       const facet = facets ? mark.filter(facets[0], channels, values) : null;
-      const node = mark.render(facet, scales, values, dimensions, context);
+      const index = channels.time ? [] : facet;
+      const node = mark.render(index, scales, values, dimensions, context);
+      if (channels.time) timeMarks.push({mark, node});
       if (node != null) svg.appendChild(node);
     }
+    if (timeMarks.length) {
+      let timeIndex = -1;
+      requestAnimationFrame(function tick() {
+        if (++timeIndex >= times.length) return;
+        const time = times[timeIndex];
+        for (const timeMark of timeMarks) {
+          const {mark, node} = timeMark;
+          const {channels, values, facets} = stateByMark.get(mark);
+          const facet = facets ? mark.filter(facets[0], channels, values) : null;
+          const index = facet.filter(i => channels.time.value[i] <= time);
+          const timeNode = mark.render(index, scales, values, dimensions, context);
+          node.replaceWith(timeNode);
+          timeMark.node = timeNode;
+        }
+        requestAnimationFrame(tick);
+      });
+    }
   }
 
   // Wrap the plot in a figure with a caption, if desired.
@@ -257,7 +280,7 @@ export function plot(options = {}) {
 
 export class Mark {
   constructor(data, channels = {}, options = {}, defaults) {
-    const {facet = "auto", sort, dx, dy, clip, channels: extraChannels} = options;
+    const {facet = "auto", sort, time, dx, dy, clip, channels: extraChannels} = options;
     this.data = data;
     this.sort = isDomainSort(sort) ? sort : null;
     this.initializer = initializer(options).initializer;
@@ -266,6 +289,7 @@ export class Mark {
     channels = maybeNamed(channels);
     if (extraChannels !== undefined) channels = {...maybeNamed(extraChannels), ...channels};
     if (defaults !== undefined) channels = {...styles(this, options, defaults), ...channels};
+    if (time != null) channels = {time: {value: time}, ...channels};
     this.channels = Object.fromEntries(Object.entries(channels).filter(([name, {value, optional}]) => {
       if (value != null) return true;
       if (optional) return false;
@@ -367,6 +391,21 @@ function addScaleChannels(channelsByScale, stateByMark, filter = yes) {
   return channelsByScale;
 }
 
+function aggregateTimes(stateByMark) {
+  const times = [];
+  for (const {channels: {time}} of stateByMark.values()) {
+    if (time) {
+      for (let t of time.value) {
+        if (t == null || isNaN(t = +t)) continue;
+        const i = bisectLeft(times, t);
+        if (times[i] === t) continue;
+        times.splice(i, 0, t);
+      }
+    }
+  }
+  return times;
+}
+
 // Derives a copy of the specified axis with the label disabled.
 function nolabel(axis) {
   return axis === undefined || axis.label === undefined

test/jsdom.js

@@ -24,6 +24,8 @@ function withJsdom(run) {
     global.Node = jsdom.window.Node;
     global.NodeList = jsdom.window.NodeList;
     global.HTMLCollection = jsdom.window.HTMLCollection;
+    global.requestAnimationFrame = () => 0;
+    global.cancelAnimationFrame = () => {};
     global.fetch = async (href) => new Response(path.resolve("./test", href));
     try {
       return await run();
@@ -35,6 +37,8 @@ function withJsdom(run) {
       delete global.Node;
       delete global.NodeList;
       delete global.HTMLCollection;
+      delete global.requestAnimationFrame;
+      delete global.cancelAnimationFrame;
       delete global.fetch;
     }
   };

test/output/drivingAnimation.svg

@@ -0,0 +1,13 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+
+export default async function() {
+  const driving = await d3.csv("data/driving.csv", d3.autoType);
+  return Plot.plot({
+    inset: 10,
+    grid: true,
+    marks: [
+      Plot.line(driving, {x: "miles", y: "gas", time: "year"})
+    ]
+  });
+}

test/plots/driving-animation.js

@@ -58,6 +58,7 @@ export {default as dotSort} from "./dot-sort.js";
 export {default as downloads} from "./downloads.js";
 export {default as downloadsOrdinal} from "./downloads-ordinal.js";
 export {default as driving} from "./driving.js";
+export {default as drivingAnimation} from "./driving-animation.js";
 export {default as empty} from "./empty.js";
 export {default as emptyLegend} from "./empty-legend.js";
 export {default as emptyX} from "./empty-x.js";