default tip for auto (#1546)

* default tip for auto

* use real DOM during hydration

* fix unit tests

* defer for auto mark

* update comment

Author: mbostock

docs/components/PlotRender.js

@@ -60,6 +60,12 @@ class Element {
   removeAttributeNS(namespace, name) {
     this.removeAttribute(name);
   }
+  addEventListener() {
+    // ignored; interaction needs real DOM
+  }
+  removeEventListener() {
+    // ignored; interaction needs real DOM
+  }
   appendChild(child) {
     this.children.push(child);
     child.parentNode = this;
@@ -127,7 +133,7 @@ export default {
       ...this.options,
       className: "plot"
     };
-    if (this.defer) { // || typeof document !== "undefined") {
+    if (this.defer) {
       const mounted = (el) => {
         disconnect(); // remove old listeners
         function observed() {
@@ -191,7 +197,6 @@ export default {
         ]
       );
     }
-    options.document = new Document();
-    return Plot[method](options).toHyperScript();
+    return Plot[method]({...options, document: new Document()}).toHyperScript();
   }
 };

docs/marks/auto.md

@@ -19,7 +19,7 @@ onMounted(() => {
 
 The magic ✨ **auto mark** automatically selects a mark type that best represents the given dimensions of the data according to some simple heuristics. The auto mark—which powers [Observable’s chart cell](https://observablehq.com/@observablehq/chart-cell)—is intended to support fast exploratory analysis where the goal is to get a useful plot as quickly as possible. For example, two quantitative dimensions make a scatterplot:
 
-:::plot https://observablehq.com/@observablehq/plot-auto-mark-scatterplot
+:::plot defer https://observablehq.com/@observablehq/plot-auto-mark-scatterplot
 ```js
 Plot.auto(penguins, {x: "body_mass_g", y: "flipper_length_mm"}).plot()
 ```
@@ -36,7 +36,7 @@ Because its heuristics are likely to evolve, they are not explicitly documented;
 
 A monotonically increasing dimension (here *Date*, as the data is ordered chronologically), paired with a numeric column (*Close*), makes a line chart:
 
-:::plot https://observablehq.com/@observablehq/plot-auto-mark-line-chart
+:::plot defer https://observablehq.com/@observablehq/plot-auto-mark-line-chart
 ```js
 Plot.auto(aapl, {x: "Date", y: "Close"}).plot()
 ```
@@ -50,7 +50,7 @@ Plot.auto(olympians, {x: "weight"}).plot()
 ```
 :::
 
-:::plot https://observablehq.com/@observablehq/plot-auto-mark-ordinal-histogram
+:::plot defer https://observablehq.com/@observablehq/plot-auto-mark-ordinal-histogram
 ```js
 Plot.auto(penguins, {x: "island"}).plot()
 ```
@@ -60,7 +60,7 @@ This is easier than deciding whether to use bin and rect, or group and bar: the
 
 If you’d like to explicitly avoid grouping the data, you can opt out of the reducer, and get a one-dimensional plot:
 
-:::plot https://observablehq.com/@observablehq/plot-auto-mark-barcode
+:::plot defer https://observablehq.com/@observablehq/plot-auto-mark-barcode
 ```js
 Plot.auto(penguins, {x: "body_mass_g", y: {reduce: null}}).plot()
 ```
@@ -92,21 +92,21 @@ Plot.auto(olympians, {x: "weight", y: "sex", color: "count"}).plot()
 
 Similarly, with explicit marks and transforms, changing a vertical histogram to a horizontal histogram involves switching [rectY](./rect.md#recty-data-options) to [rectX](./rect.md#rectx-data-options), [binX](../transforms/bin.md#binx-outputs-options) to [binY](../transforms/bin.md#biny-outputs-options), **x** to **y**, and **y** to **x**. With the auto mark, just specify **y** instead of **x**:
 
-:::plot https://observablehq.com/@observablehq/plot-auto-mark-horizontal-histogram
+:::plot defer https://observablehq.com/@observablehq/plot-auto-mark-horizontal-histogram
 ```js
 Plot.auto(penguins, {y: "island"}).plot()
 ```
 :::
 
 For the sake of seamless switching, the auto mark has just one color channel, which it assigns to either **fill** or **stroke** depending on the mark. We can see that clearly by overriding a line chart with the **mark** option to make an area chart:
 
-:::plot https://observablehq.com/@observablehq/plot-auto-mark-color-channel
+:::plot defer https://observablehq.com/@observablehq/plot-auto-mark-color-channel
 ```js
 Plot.auto(industries, {x: "date", y: "unemployed", color: "industry"}).plot()
 ```
 :::
 
-:::plot
+:::plot defer
 ```js
 Plot.auto(industries, {x: "date", y: "unemployed", color: "industry", mark: "area"}).plot()
 ```
@@ -126,15 +126,15 @@ Plot
 
 You can similarly pass a **zero** option to indicate that zero is meaningful for either **x** or **y**. This adds a corresponding rule to the returned mark.
 
-:::plot https://observablehq.com/@observablehq/plot-auto-mark-zero-option
+:::plot defer https://observablehq.com/@observablehq/plot-auto-mark-zero-option
 ```js
 Plot.auto(industries, {x: "date", y: {value: "unemployed", zero: true}, color: "industry"}).plot()
 ```
 :::
 
 The auto mark has a **size** channel, which (currently) always results in a dot. For now, it’s an alias for the dot’s **r** channel; in the future it will also represent a vector’s **length** channel.
 
-:::plot https://observablehq.com/@observablehq/plot-auto-mark-size-channel
+:::plot defer https://observablehq.com/@observablehq/plot-auto-mark-size-channel
 ```js
 Plot.auto(aapl, {x: "Date", y: "Close", size: "Volume"}).plot()
 ```

src/marks/auto.js

@@ -142,7 +142,8 @@ export function autoSpec(data, options) {
     y: Y ?? undefined, // treat null y as undefined for implicit stack
     [colorMode]: C ?? colorColor,
     z: Z,
-    r: S ?? undefined // treat null size as undefined for default constant radius
+    r: S ?? undefined, // treat null size as undefined for default constant radius
+    tip: true
   };
   let transformImpl;
   let transformOptions = {[colorMode]: colorReduce ?? undefined, r: sizeReduce ?? undefined};

test/marks/auto-test.js

@@ -19,7 +19,8 @@ it("Plot.autoSpec makes a histogram from a quantitative dimension", () => {
       y: undefined,
       fill: undefined,
       z: undefined,
-      r: undefined
+      r: undefined,
+      tip: true
     },
     transformImpl: "binX",
     transformOptions: {fill: undefined, r: undefined, y: "count"},
@@ -45,7 +46,8 @@ it("Plot.autoSpec makes a bar chart from an ordinal dimension", () => {
       y: undefined,
       fill: "blue",
       z: undefined,
-      r: undefined
+      r: undefined,
+      tip: true
     },
     transformImpl: "groupX",
     transformOptions: {fill: undefined, r: undefined, y: "count"},
@@ -75,7 +77,8 @@ it("Plot.autoSpec makes a lineY from monotonic x", () => {
       y: Object.assign([1, 0, 38], {label: "value"}),
       stroke: undefined,
       z: undefined,
-      r: undefined
+      r: undefined,
+      tip: true
     },
     transformImpl: undefined,
     transformOptions: {stroke: undefined, r: undefined},
@@ -105,7 +108,8 @@ it("Plot.autoSpec makes a lineY from monotonic x and monotonic y", () => {
       y: Object.assign([0, 1, 38], {label: "value"}),
       stroke: undefined,
       z: undefined,
-      r: undefined
+      r: undefined,
+      tip: true
     },
     transformImpl: undefined,
     transformOptions: {stroke: undefined, r: undefined},
@@ -135,7 +139,8 @@ it("Plot.autoSpec makes a lineX from monotonic y", () => {
       y: Object.assign([1, 2, 3], {label: "date"}),
       stroke: undefined,
       z: undefined,
-      r: undefined
+      r: undefined,
+      tip: true
     },
     transformImpl: undefined,
     transformOptions: {stroke: undefined, r: undefined},
@@ -165,7 +170,8 @@ it("Plot.autoSpec makes a line from non-monotonic x and non-monotonic y", () =>
       y: Object.assign([1, 0, 38], {label: "value"}),
       stroke: undefined,
       z: undefined,
-      r: undefined
+      r: undefined,
+      tip: true
     },
     transformImpl: undefined,
     transformOptions: {stroke: undefined, r: undefined},
@@ -195,7 +201,8 @@ it("Plot.autoSpec makes a dot plot from two quantitative dimensions", () => {
       y: Object.assign([0, 3, 2], {label: "y"}),
       stroke: undefined,
       z: undefined,
-      r: undefined
+      r: undefined,
+      tip: true
     },
     transformImpl: undefined,
     transformOptions: {stroke: undefined, r: undefined},
@@ -228,7 +235,8 @@ it("Plot.autoSpec makes a faceted heatmap", () => {
       y: {value: Object.assign([0, 3, 2, 1, 6, 2], {label: "y"})},
       fill: undefined,
       z: undefined,
-      r: undefined
+      r: undefined,
+      tip: true
     },
     transformImpl: "bin",
     transformOptions: {fill: "count", r: undefined},