difference mark and shift transform

src/index.d.ts

@@ -21,6 +21,7 @@ export * from "./marks/contour.js";
 export * from "./marks/crosshair.js";
 export * from "./marks/delaunay.js";
 export * from "./marks/density.js";
+export * from "./marks/difference.js";
 export * from "./marks/dot.js";
 export * from "./marks/frame.js";
 export * from "./marks/geo.js";

src/index.js

@@ -12,6 +12,7 @@ export {Contour, contour} from "./marks/contour.js";
 export {crosshair, crosshairX, crosshairY} from "./marks/crosshair.js";
 export {delaunayLink, delaunayMesh, hull, voronoi, voronoiMesh} from "./marks/delaunay.js";
 export {Density, density} from "./marks/density.js";
+export {differenceY} from "./marks/difference.js";
 export {Dot, dot, dotX, dotY, circle, hexagon} from "./marks/dot.js";
 export {Frame, frame} from "./marks/frame.js";
 export {Geo, geo, sphere, graticule} from "./marks/geo.js";

src/marks/difference.d.ts

@@ -0,0 +1,8 @@
+import type {Data, RenderableMark} from "../mark.js";
+import type {AreaYOptions} from "./area.js";
+
+/** TODO */
+export function differenceY(data?: Data, options?: AreaYOptions): Difference;
+
+/** The difference mark. */
+export class Difference extends RenderableMark {}

src/marks/difference.js

@@ -0,0 +1,109 @@
+import {area as shapeArea, line as shapeLine} from "d3";
+import {create} from "../context.js";
+import {maybeCurve} from "../curve.js";
+import {Mark} from "../mark.js";
+import {identity, indexOf, isColor} from "../options.js";
+import {applyIndirectStyles, applyTransform, getClipId} from "../style.js";
+import {maybeDenseIntervalX} from "../transforms/bin.js";
+
+const defaults = {
+  ariaLabel: "difference",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 1.5,
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  strokeMiterlimit: 1
+};
+
+function maybeColor(value) {
+  if (value == null) return "none";
+  if (!isColor(value)) throw new Error(`invalid color: ${value}`);
+  return value;
+}
+
+class Difference extends Mark {
+  constructor(data, options = {}) {
+    const {x1, y1, x2, y2, curve, tension, positiveColor = "green", negativeColor = "blue"} = options;
+    super(
+      data,
+      {
+        x1: {value: x1, scale: "x"},
+        y1: {value: y1, scale: "y"},
+        x2: {value: x2, scale: "x", optional: true},
+        y2: {value: y2, scale: "y", optional: true}
+      },
+      options,
+      defaults
+    );
+    this.curve = maybeCurve(curve, tension);
+    this.positiveColor = maybeColor(positiveColor);
+    this.negativeColor = maybeColor(negativeColor);
+  }
+  filter(index) {
+    return index;
+  }
+  render(index, scales, channels, dimensions, context) {
+    const {x1: X1, y1: Y1, x2: X2 = X1, y2: Y2 = Y1} = channels;
+    const {negativeColor, positiveColor} = this;
+    const {height} = dimensions;
+    const clipPositive = getClipId();
+    const clipNegative = getClipId();
+    return create("svg:g", context)
+      .call(applyIndirectStyles, this, dimensions, context)
+      .call(applyTransform, this, scales, 0, 0)
+      .call((g) =>
+        g
+          .append("clipPath")
+          .attr("id", clipPositive)
+          .append("path")
+          .attr("d", renderArea(X1, Y1, height, this, index))
+      )
+      .call((g) =>
+        g
+          .append("clipPath")
+          .attr("id", clipNegative)
+          .append("path")
+          .attr("d", renderArea(X1, Y1, 0, this, index))
+      )
+      .call((g) =>
+        g
+          .append("path")
+          .attr("fill", positiveColor)
+          .attr("stroke", "none")
+          .attr("clip-path", `url(#${clipPositive})`)
+          .attr("d", renderArea(X2, Y2, 0, this, index))
+      )
+      .call((g) =>
+        g
+          .append("path")
+          .attr("fill", negativeColor)
+          .attr("stroke", "none")
+          .attr("clip-path", `url(#${clipNegative})`)
+          .attr("d", renderArea(X2, Y2, height, this, index))
+      )
+      .call((g) => g.append("path").attr("d", renderLine(X1, Y1, this, index)))
+      .node();
+  }
+}
+
+function renderArea(X, Y, y0, {curve}, index) {
+  return shapeArea()
+    .curve(curve)
+    .defined((i) => i >= 0)
+    .x((i) => X[i])
+    .y1((i) => Y[i])
+    .y0(y0)(index);
+}
+
+function renderLine(X, Y, {curve}, index) {
+  return shapeLine()
+    .curve(curve)
+    .defined((i) => i >= 0)
+    .x((i) => X[i])
+    .y((i) => Y[i])(index);
+}
+
+export function differenceY(data, {x = indexOf, x1 = x, x2 = x, y = identity, y1 = y, y2 = y, ...options} = {}) {
+  return new Difference(data, maybeDenseIntervalX({...options, x1, x2, y1, y2}));
+}

src/style.js

@@ -10,7 +10,7 @@ export const offset = (typeof window !== "undefined" ? window.devicePixelRatio >
 
 let nextClipId = 0;
 
-function getClipId() {
+export function getClipId() {
   return `plot-clip-${++nextClipId}`;
 }
 

test/plots/difference.ts

@@ -0,0 +1,13 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+
+export async function differenceY() {
+  const aapl = await d3.csv<any>("data/aapl.csv", d3.autoType);
+  const goog = await d3.csv<any>("data/goog.csv", d3.autoType);
+  const x = aapl.map((d) => d.Date);
+  const y1 = aapl.map((d, i, data) => d.Close / data[0].Close);
+  const y2 = goog.map((d, i, data) => d.Close / data[0].Close);
+  return Plot.plot({
+    marks: [Plot.differenceY(aapl, {x, y1, y2})]
+  });
+}

test/plots/index.ts

@@ -69,6 +69,7 @@ export * from "./diamonds-boxplot.js";
 export * from "./diamonds-carat-price-dots.js";
 export * from "./diamonds-carat-price.js";
 export * from "./diamonds-carat-sampling.js";
+export * from "./difference.js";
 export * from "./documentation-links.js";
 export * from "./dodge-rule.js";
 export * from "./dodge-text-radius.js";