From c996fc0c075d67a58bbc056e67b63a7e6fa3865f Mon Sep 17 00:00:00 2001
From: Mike Bostock <mbostock@gmail.com>
Date: Wed, 11 Aug 2021 15:40:55 -0700
Subject: [PATCH 1/2] function marks

---
 src/facet.js                   |  4 ++--
 src/mark.js                    | 14 ++++++++++++++
 src/plot.js                    |  3 ++-
 test/plots/anscombe-quartet.js |  4 +++-
 4 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/facet.js b/src/facet.js
index 3f48d37ce1..9473026e02 100644
--- a/src/facet.js
+++ b/src/facet.js
@@ -1,6 +1,6 @@
 import {cross, difference, groups, InternMap} from "d3";
 import {create} from "d3";
-import {Mark, first, second} from "./mark.js";
+import {Mark, first, second, markify} from "./mark.js";
 import {applyScales} from "./scales.js";
 import {filterStyles} from "./style.js";
 
@@ -21,7 +21,7 @@ class Facet extends Mark {
       ],
       options
     );
-    this.marks = marks.flat(Infinity);
+    this.marks = marks.flat(Infinity).map(markify);
     // The following fields are set by initialize:
     this.marksChannels = undefined; // array of mark channels
     this.marksIndex = undefined; // array of mark indexes (for non-faceted marks)
diff --git a/src/mark.js b/src/mark.js
index 45cd137353..1a9ad193b7 100644
--- a/src/mark.js
+++ b/src/mark.js
@@ -271,3 +271,17 @@ export function isTemporal(values) {
     return value instanceof Date;
   }
 }
+
+export function markify(mark) {
+  return mark instanceof Mark ? mark : new Render(mark);
+}
+
+class Render extends Mark {
+  constructor(render) {
+    super();
+    if (render == null) return;
+    if (typeof render !== "function") throw new TypeError("invalid mark");
+    this.render = render;
+  }
+  render() {}
+}
diff --git a/src/plot.js b/src/plot.js
index 777cd76a81..e2d526853f 100644
--- a/src/plot.js
+++ b/src/plot.js
@@ -1,6 +1,7 @@
 import {create} from "d3";
 import {Axes, autoAxisTicks, autoAxisLabels} from "./axes.js";
 import {facets} from "./facet.js";
+import {markify} from "./mark.js";
 import {Scales, autoScaleRange, applyScales} from "./scales.js";
 import {filterStyles, offset} from "./style.js";
 
@@ -15,7 +16,7 @@ export function plot(options = {}) {
   }
 
   // Flatten any nested marks.
-  const marks = options.marks === undefined ? [] : options.marks.flat(Infinity);
+  const marks = options.marks === undefined ? [] : options.marks.flat(Infinity).map(markify);
 
   // A Map from Mark instance to an object of named channel values.
   const markChannels = new Map();
diff --git a/test/plots/anscombe-quartet.js b/test/plots/anscombe-quartet.js
index b298b29890..78d27b45a2 100644
--- a/test/plots/anscombe-quartet.js
+++ b/test/plots/anscombe-quartet.js
@@ -1,5 +1,6 @@
 import * as Plot from "@observablehq/plot";
 import * as d3 from "d3";
+import {svg} from "htl";
 
 export default async function() {
   const anscombe = await d3.csv("data/anscombe.csv", d3.autoType);
@@ -14,7 +15,8 @@ export default async function() {
     },
     marks: [
       Plot.frame(),
-      Plot.dot(anscombe, {x: "x", y: "y"})
+      Plot.dot(anscombe, {x: "x", y: "y"}),
+      () => svg`<circle cx=40 cy=40 r=10 fill=red>`
     ]
   });
 }

From d605f02464dcb15bc4de4c85181b590fba4ec07b Mon Sep 17 00:00:00 2001
From: Mike Bostock <mbostock@gmail.com>
Date: Wed, 11 Aug 2021 17:43:10 -0700
Subject: [PATCH 2/2] empty and function mark tests

---
 test/output/empty.svg          | 1 +
 test/plots/anscombe-quartet.js | 4 +---
 test/plots/empty.js            | 8 +++++++-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/test/output/empty.svg b/test/output/empty.svg
index 0cc4729c0a..8f790da6ef 100644
--- a/test/output/empty.svg
+++ b/test/output/empty.svg
@@ -92,4 +92,5 @@
     </g>
   </g>
   <rect fill="none" stroke="currentColor" transform="translate(0.5,0.5)" x="40" y="20" width="580" height="350"></rect>
+  <circle cx="50%" cy="50%" r="5" fill="green"></circle>
 </svg>
\ No newline at end of file
diff --git a/test/plots/anscombe-quartet.js b/test/plots/anscombe-quartet.js
index 78d27b45a2..b298b29890 100644
--- a/test/plots/anscombe-quartet.js
+++ b/test/plots/anscombe-quartet.js
@@ -1,6 +1,5 @@
 import * as Plot from "@observablehq/plot";
 import * as d3 from "d3";
-import {svg} from "htl";
 
 export default async function() {
   const anscombe = await d3.csv("data/anscombe.csv", d3.autoType);
@@ -15,8 +14,7 @@ export default async function() {
     },
     marks: [
       Plot.frame(),
-      Plot.dot(anscombe, {x: "x", y: "y"}),
-      () => svg`<circle cx=40 cy=40 r=10 fill=red>`
+      Plot.dot(anscombe, {x: "x", y: "y"})
     ]
   });
 }
diff --git a/test/plots/empty.js b/test/plots/empty.js
index 12d68afdf6..6c7a8e4a2c 100644
--- a/test/plots/empty.js
+++ b/test/plots/empty.js
@@ -1,4 +1,5 @@
 import * as Plot from "@observablehq/plot";
+import {svg} from "htl";
 
 export default async function() {
   return Plot.plot({
@@ -11,7 +12,12 @@ export default async function() {
       domain: [0, 1]
     },
     marks: [
-      Plot.frame()
+      Plot.frame(),
+      undefined,
+      null,
+      () => null,
+      () => undefined,
+      () => svg`<circle cx=50% cy=50% r=5 fill=green>`
     ]
   });
 }