diff --git a/docs/components/PlotRender.js b/docs/components/PlotRender.js index ac995ceaf9..8f0a54fb35 100644 --- a/docs/components/PlotRender.js +++ b/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(); } }; diff --git a/docs/marks/auto.md b/docs/marks/auto.md index 2dfbb251ee..2da04ba031 100644 --- a/docs/marks/auto.md +++ b/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,7 +92,7 @@ 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() ``` @@ -100,13 +100,13 @@ 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,7 +126,7 @@ 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() ``` @@ -134,7 +134,7 @@ Plot.auto(industries, {x: "date", y: {value: "unemployed", zero: true}, color: " 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() ``` diff --git a/src/marks/auto.js b/src/marks/auto.js index e77281ac68..1604dc5796 100644 --- a/src/marks/auto.js +++ b/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}; diff --git a/test/marks/auto-test.js b/test/marks/auto-test.js index d002bbdbdb..a1f0d1f0f9 100644 --- a/test/marks/auto-test.js +++ b/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}, diff --git a/test/output/autoArea.svg b/test/output/autoArea.svg index 63fed34fda..6e40b095fc 100644 --- a/test/output/autoArea.svg +++ b/test/output/autoArea.svg @@ -60,4 +60,5 @@ + \ No newline at end of file diff --git a/test/output/autoAreaColor.svg b/test/output/autoAreaColor.svg index 37c9fdb8ad..cc9cc33aad 100644 --- a/test/output/autoAreaColor.svg +++ b/test/output/autoAreaColor.svg @@ -1260,4 +1260,5 @@ + \ No newline at end of file diff --git a/test/output/autoAreaColorColor.svg b/test/output/autoAreaColorColor.svg index 1449edd015..27ed307d9a 100644 --- a/test/output/autoAreaColorColor.svg +++ b/test/output/autoAreaColorColor.svg @@ -60,4 +60,5 @@ + \ No newline at end of file diff --git a/test/output/autoAreaColorName.svg b/test/output/autoAreaColorName.svg index 1449edd015..27ed307d9a 100644 --- a/test/output/autoAreaColorName.svg +++ b/test/output/autoAreaColorName.svg @@ -60,4 +60,5 @@ + \ No newline at end of file diff --git a/test/output/autoAreaColorValue.svg b/test/output/autoAreaColorValue.svg index 37c9fdb8ad..cc9cc33aad 100644 --- a/test/output/autoAreaColorValue.svg +++ b/test/output/autoAreaColorValue.svg @@ -1260,4 +1260,5 @@ + \ No newline at end of file diff --git a/test/output/autoAreaStackColor.svg b/test/output/autoAreaStackColor.svg index 00d52c1760..254842df4a 100644 --- a/test/output/autoAreaStackColor.svg +++ b/test/output/autoAreaStackColor.svg @@ -81,4 +81,5 @@ + \ No newline at end of file diff --git a/test/output/autoAutoHistogram.svg b/test/output/autoAutoHistogram.svg index 929c651994..6a202a7dd9 100644 --- a/test/output/autoAutoHistogram.svg +++ b/test/output/autoAutoHistogram.svg @@ -67,4 +67,5 @@ + \ No newline at end of file diff --git a/test/output/autoBar.svg b/test/output/autoBar.svg index 5b63abcdf7..873c381d47 100644 --- a/test/output/autoBar.svg +++ b/test/output/autoBar.svg @@ -124,4 +124,5 @@ + \ No newline at end of file diff --git a/test/output/autoBarColorReducer.svg b/test/output/autoBarColorReducer.svg index 1b4910f87d..2c66dbe3d7 100644 --- a/test/output/autoBarColorReducer.svg +++ b/test/output/autoBarColorReducer.svg @@ -57,4 +57,5 @@ + \ No newline at end of file diff --git a/test/output/autoBarMode.svg b/test/output/autoBarMode.svg index a0f026a250..12b49e714e 100644 --- a/test/output/autoBarMode.svg +++ b/test/output/autoBarMode.svg @@ -44,4 +44,5 @@ + \ No newline at end of file diff --git a/test/output/autoBarNonZeroReducer.svg b/test/output/autoBarNonZeroReducer.svg index c8915a1b2c..227f3ddb84 100644 --- a/test/output/autoBarNonZeroReducer.svg +++ b/test/output/autoBarNonZeroReducer.svg @@ -121,4 +121,5 @@ + \ No newline at end of file diff --git a/test/output/autoBarStackColor.svg b/test/output/autoBarStackColor.svg index df2f1eb4a6..92d2c61cab 100644 --- a/test/output/autoBarStackColor.svg +++ b/test/output/autoBarStackColor.svg @@ -62,4 +62,5 @@ + \ No newline at end of file diff --git a/test/output/autoBarStackColorConstant.svg b/test/output/autoBarStackColorConstant.svg index 1fc853443c..0c51ff9975 100644 --- a/test/output/autoBarStackColorConstant.svg +++ b/test/output/autoBarStackColorConstant.svg @@ -118,4 +118,5 @@ + \ No newline at end of file diff --git a/test/output/autoBarStackColorField.svg b/test/output/autoBarStackColorField.svg index 67cdff8c21..5586559226 100644 --- a/test/output/autoBarStackColorField.svg +++ b/test/output/autoBarStackColorField.svg @@ -173,4 +173,5 @@ + \ No newline at end of file diff --git a/test/output/autoChannels.svg b/test/output/autoChannels.svg index 549049b0a9..b699889687 100644 --- a/test/output/autoChannels.svg +++ b/test/output/autoChannels.svg @@ -11307,4 +11307,5 @@ + \ No newline at end of file diff --git a/test/output/autoConnectedScatterplot.svg b/test/output/autoConnectedScatterplot.svg index 5e2d20ead6..18e4198d0c 100644 --- a/test/output/autoConnectedScatterplot.svg +++ b/test/output/autoConnectedScatterplot.svg @@ -64,4 +64,5 @@ + \ No newline at end of file diff --git a/test/output/autoDot.svg b/test/output/autoDot.svg index 13d72dd5cc..4f7489afbc 100644 --- a/test/output/autoDot.svg +++ b/test/output/autoDot.svg @@ -395,4 +395,5 @@ + \ No newline at end of file diff --git a/test/output/autoDotBin.svg b/test/output/autoDotBin.svg index 64d3718ce3..80ce1aa876 100644 --- a/test/output/autoDotBin.svg +++ b/test/output/autoDotBin.svg @@ -115,4 +115,5 @@ + \ No newline at end of file diff --git a/test/output/autoDotColor.svg b/test/output/autoDotColor.svg index d0192b551b..ee830cd60d 100644 --- a/test/output/autoDotColor.svg +++ b/test/output/autoDotColor.svg @@ -461,4 +461,5 @@ + \ No newline at end of file diff --git a/test/output/autoDotFacet.svg b/test/output/autoDotFacet.svg index b1380b90f9..c00103c25e 100644 --- a/test/output/autoDotFacet.svg +++ b/test/output/autoDotFacet.svg @@ -450,4 +450,9 @@ + + + + + \ No newline at end of file diff --git a/test/output/autoDotFacet2.svg b/test/output/autoDotFacet2.svg index 4d3c4c0116..87a466f49e 100644 --- a/test/output/autoDotFacet2.svg +++ b/test/output/autoDotFacet2.svg @@ -490,4 +490,11 @@ + + + + + + + \ No newline at end of file diff --git a/test/output/autoDotGroup.svg b/test/output/autoDotGroup.svg index 6d310000bc..6b31c0f580 100644 --- a/test/output/autoDotGroup.svg +++ b/test/output/autoDotGroup.svg @@ -46,4 +46,5 @@ + \ No newline at end of file diff --git a/test/output/autoDotOrdCont.svg b/test/output/autoDotOrdCont.svg index b8d95236c8..b3a68b1b5d 100644 --- a/test/output/autoDotOrdCont.svg +++ b/test/output/autoDotOrdCont.svg @@ -387,4 +387,5 @@ + \ No newline at end of file diff --git a/test/output/autoDotOrdinal.svg b/test/output/autoDotOrdinal.svg index 005d304738..92c35ec91c 100644 --- a/test/output/autoDotOrdinal.svg +++ b/test/output/autoDotOrdinal.svg @@ -855,4 +855,5 @@ + \ No newline at end of file diff --git a/test/output/autoDotSize.svg b/test/output/autoDotSize.svg index 5f63a8fa47..911d7af5a9 100644 --- a/test/output/autoDotSize.svg +++ b/test/output/autoDotSize.svg @@ -1289,4 +1289,5 @@ + \ No newline at end of file diff --git a/test/output/autoDotSize2.svg b/test/output/autoDotSize2.svg index 224c2afc25..4d6046f2c6 100644 --- a/test/output/autoDotSize2.svg +++ b/test/output/autoDotSize2.svg @@ -397,4 +397,5 @@ + \ No newline at end of file diff --git a/test/output/autoDotUnsortedDate.svg b/test/output/autoDotUnsortedDate.svg index 30d664e7c5..c60edb4130 100644 --- a/test/output/autoDotUnsortedDate.svg +++ b/test/output/autoDotUnsortedDate.svg @@ -11277,4 +11277,5 @@ + \ No newline at end of file diff --git a/test/output/autoDotZero.svg b/test/output/autoDotZero.svg index a1837e91d1..b80fa592e3 100644 --- a/test/output/autoDotZero.svg +++ b/test/output/autoDotZero.svg @@ -124,4 +124,5 @@ + \ No newline at end of file diff --git a/test/output/autoHeatmap.svg b/test/output/autoHeatmap.svg index a22a2400ae..d1d8d80c6e 100644 --- a/test/output/autoHeatmap.svg +++ b/test/output/autoHeatmap.svg @@ -121,4 +121,5 @@ + \ No newline at end of file diff --git a/test/output/autoHeatmapOrdCont.svg b/test/output/autoHeatmapOrdCont.svg index af5ec467a0..e1beba4b13 100644 --- a/test/output/autoHeatmapOrdCont.svg +++ b/test/output/autoHeatmapOrdCont.svg @@ -73,4 +73,5 @@ + \ No newline at end of file diff --git a/test/output/autoHeatmapOrdinal.svg b/test/output/autoHeatmapOrdinal.svg index 71b42fc1eb..5c0e3e4f03 100644 --- a/test/output/autoHeatmapOrdinal.svg +++ b/test/output/autoHeatmapOrdinal.svg @@ -46,4 +46,5 @@ + \ No newline at end of file diff --git a/test/output/autoHistogram.svg b/test/output/autoHistogram.svg index 12fdead10c..1f842833e4 100644 --- a/test/output/autoHistogram.svg +++ b/test/output/autoHistogram.svg @@ -141,4 +141,5 @@ + \ No newline at end of file diff --git a/test/output/autoHistogramDate.svg b/test/output/autoHistogramDate.svg index 0ed682670c..04936980d3 100644 --- a/test/output/autoHistogramDate.svg +++ b/test/output/autoHistogramDate.svg @@ -121,4 +121,5 @@ + \ No newline at end of file diff --git a/test/output/autoHistogramGroup.svg b/test/output/autoHistogramGroup.svg index 3441715bef..37e1e1ed3f 100644 --- a/test/output/autoHistogramGroup.svg +++ b/test/output/autoHistogramGroup.svg @@ -59,4 +59,5 @@ + \ No newline at end of file diff --git a/test/output/autoLine.svg b/test/output/autoLine.svg index 0fea073253..4a1d9412d9 100644 --- a/test/output/autoLine.svg +++ b/test/output/autoLine.svg @@ -65,4 +65,5 @@ + \ No newline at end of file diff --git a/test/output/autoLineColor.svg b/test/output/autoLineColor.svg index e3267fd3aa..040c20dec4 100644 --- a/test/output/autoLineColor.svg +++ b/test/output/autoLineColor.svg @@ -1265,4 +1265,5 @@ + \ No newline at end of file diff --git a/test/output/autoLineColorSeries.svg b/test/output/autoLineColorSeries.svg index 71625400fc..58f44896fd 100644 --- a/test/output/autoLineColorSeries.svg +++ b/test/output/autoLineColorSeries.svg @@ -86,4 +86,5 @@ + \ No newline at end of file diff --git a/test/output/autoLineFacet.svg b/test/output/autoLineFacet.svg index 1066a9f09e..f8a087c5e9 100644 --- a/test/output/autoLineFacet.svg +++ b/test/output/autoLineFacet.svg @@ -259,4 +259,20 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/test/output/autoLineHistogram.svg b/test/output/autoLineHistogram.svg index bdbe2b0579..e2266b545a 100644 --- a/test/output/autoLineHistogram.svg +++ b/test/output/autoLineHistogram.svg @@ -71,4 +71,5 @@ + \ No newline at end of file diff --git a/test/output/autoLineMean.svg b/test/output/autoLineMean.svg index e66513489c..2d9608f259 100644 --- a/test/output/autoLineMean.svg +++ b/test/output/autoLineMean.svg @@ -49,4 +49,5 @@ + \ No newline at end of file diff --git a/test/output/autoLineMeanColor.svg b/test/output/autoLineMeanColor.svg index 0ab0482e57..ea7699d075 100644 --- a/test/output/autoLineMeanColor.svg +++ b/test/output/autoLineMeanColor.svg @@ -65,4 +65,5 @@ + \ No newline at end of file diff --git a/test/output/autoLineMeanThresholds.svg b/test/output/autoLineMeanThresholds.svg index 91e9bc938d..09caafd181 100644 --- a/test/output/autoLineMeanThresholds.svg +++ b/test/output/autoLineMeanThresholds.svg @@ -55,4 +55,5 @@ + \ No newline at end of file diff --git a/test/output/autoLineMeanZero.svg b/test/output/autoLineMeanZero.svg index 09fed388cc..4aeac11c28 100644 --- a/test/output/autoLineMeanZero.svg +++ b/test/output/autoLineMeanZero.svg @@ -62,4 +62,5 @@ + \ No newline at end of file diff --git a/test/output/autoLineZero.svg b/test/output/autoLineZero.svg index 911d370189..17fc92f071 100644 --- a/test/output/autoLineZero.svg +++ b/test/output/autoLineZero.svg @@ -91,4 +91,5 @@ + \ No newline at end of file diff --git a/test/output/autoNullReduceContinuous.svg b/test/output/autoNullReduceContinuous.svg index 7ff04232ad..0d787b6a34 100644 --- a/test/output/autoNullReduceContinuous.svg +++ b/test/output/autoNullReduceContinuous.svg @@ -374,4 +374,5 @@ + \ No newline at end of file diff --git a/test/output/autoNullReduceDate.svg b/test/output/autoNullReduceDate.svg index 1393fe90e0..119addad42 100644 --- a/test/output/autoNullReduceDate.svg +++ b/test/output/autoNullReduceDate.svg @@ -11580,4 +11580,5 @@ + \ No newline at end of file diff --git a/test/output/autoNullReduceOrdinal.svg b/test/output/autoNullReduceOrdinal.svg index 355bbe1f78..b3f5abed33 100644 --- a/test/output/autoNullReduceOrdinal.svg +++ b/test/output/autoNullReduceOrdinal.svg @@ -31,4 +31,5 @@ + \ No newline at end of file diff --git a/test/output/autoRectColorReducer.svg b/test/output/autoRectColorReducer.svg index 4ebba9f114..6c6e40576d 100644 --- a/test/output/autoRectColorReducer.svg +++ b/test/output/autoRectColorReducer.svg @@ -75,4 +75,5 @@ + \ No newline at end of file diff --git a/test/output/autoRectStackColor.svg b/test/output/autoRectStackColor.svg index 8ed4fcf340..81526e4f98 100644 --- a/test/output/autoRectStackColor.svg +++ b/test/output/autoRectStackColor.svg @@ -95,4 +95,5 @@ + \ No newline at end of file diff --git a/test/output/autoRuleZero.svg b/test/output/autoRuleZero.svg index 35f7f63579..b7d4cd4662 100644 --- a/test/output/autoRuleZero.svg +++ b/test/output/autoRuleZero.svg @@ -121,4 +121,5 @@ + \ No newline at end of file diff --git a/test/output/bigint1.svg b/test/output/bigint1.svg index 13dc669d1c..46aa0a8b51 100644 --- a/test/output/bigint1.svg +++ b/test/output/bigint1.svg @@ -82,4 +82,5 @@ + \ No newline at end of file