plot.rescale

src/plot.js

@@ -139,7 +139,7 @@ export function plot(options = {}) {
     stateByMark.set(mark, {data, facets, channels});
   }
 
-  // Initalize the scales and dimensions.
+  // Initialize the scales and dimensions.
   const scaleDescriptors = createScales(addScaleChannels(channelsByScale, stateByMark, options), options);
   const dimensions = createDimensions(scaleDescriptors, marks, options);
 
@@ -159,6 +159,11 @@ export function plot(options = {}) {
   context.className = className;
   context.projection = createProjection(options, subdimensions);
 
+  // A path generator for marks that want to draw GeoJSON.
+  context.path = function () {
+    return geoPath(this.projection ?? xyProjection(scales));
+  };
+
   // Allows e.g. the axis mark to determine faceting lazily.
   context.filterFacets = (data, channels) => {
     return facetFilter(facets, {channels, groups: facetGroups(data, channels)});
@@ -236,11 +241,6 @@ export function plot(options = {}) {
     facetTranslate = facetTranslator(fx, fy, dimensions);
   }
 
-  // A path generator for marks that want to draw GeoJSON.
-  context.path = function () {
-    return geoPath(this.projection ?? xyProjection(scales));
-  };
-
   // Compute value objects, applying scales and projection as needed.
   for (const [mark, state] of stateByMark) {
     state.values = mark.scale(state.channels, scales, context);
@@ -357,6 +357,17 @@ export function plot(options = {}) {
       .text(`${w.toLocaleString("en-US")} warning${w === 1 ? "" : "s"}. Please check the console.`);
   }
 
+  figure.rescale = (rescales) => {
+    const reoptions = {...options, figure: false};
+    for (const key in rescales) {
+      if (!(key in scales.scales)) throw new Error(`missing scale: ${key}`);
+      reoptions[key] = {...scales.scales[key], ...rescales[key]};
+    }
+    const resvg = plot(reoptions);
+    while (svg.lastChild) svg.removeChild(svg.lastChild);
+    while (resvg.firstChild) svg.appendChild(resvg.firstChild);
+  };
+
   return figure;
 }
 

test/plots/index.ts

@@ -259,6 +259,7 @@ export * from "./raster-vapor.js";
 export * from "./raster-walmart.js";
 export * from "./rect-band.js";
 export * from "./reducer-scale-override.js";
+export * from "./rescale.js";
 export * from "./rounded-rect.js";
 export * from "./seattle-precipitation-density.js";
 export * from "./seattle-precipitation-rule.js";

test/plots/rescale.ts

@@ -0,0 +1,18 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+
+export async function rescaleZoom() {
+  const data = await d3.csv<any>("data/gistemp.csv", d3.autoType);
+  const plot = Plot.dot(data, {x: "Date", y: "Anomaly", stroke: "Anomaly"}).plot();
+  requestAnimationFrame(() => {
+    let frame: number;
+    (function tick(now) {
+      if (!plot.isConnected) return cancelAnimationFrame(frame);
+      const t = (Math.sin(now / 2000) + 1) / 2;
+      const [x1, x2] = plot.scale("x").domain;
+      plot.rescale({x: {domain: [+x1 + ((x2 - x1) / 2) * t, +x1 + ((x2 - x1) / 2) * (t + 1)]}});
+      frame = requestAnimationFrame(tick);
+    })(performance.now());
+  });
+  return plot;
+}