From 9f6b7fe2941354202fe619b13db83c61e8f78ba5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Wed, 19 Jul 2023 18:32:39 +0200 Subject: [PATCH 01/10] title, subtitle --- src/plot.d.ts | 32 +++ src/plot.js | 21 +- test/output/title.html | 417 +++++++++++++++++++++++++++++++++++++ test/output/titleHtml.html | 384 ++++++++++++++++++++++++++++++++++ test/plots/index.ts | 1 + test/plots/title.ts | 20 ++ 6 files changed, 866 insertions(+), 9 deletions(-) create mode 100644 test/output/title.html create mode 100644 test/output/titleHtml.html create mode 100644 test/plots/title.ts diff --git a/src/plot.d.ts b/src/plot.d.ts index 48b80a683c..d279ff9841 100644 --- a/src/plot.d.ts +++ b/src/plot.d.ts @@ -107,6 +107,38 @@ export interface PlotOptions extends ScaleDefaults { */ className?: string; + /** + * The figure title. If present, Plot wraps the generated SVG element in an + * HTML figure element with the title in a h2 element, returning the figure. To + * specify an HTML title, consider using the [`html` tagged template + * literal](http://github.com/observablehq/htl); otherwise, the specified + * string represents text that will be escaped as needed. + * + * ```js + * Plot.plot({ + * title: html`

This is a fancy title`, + * marks: … + * }) + * ``` + */ + title?: string | Node | null; + + /** + * The figure subtitle. If present, Plot wraps the generated SVG element in an + * HTML figure element with the subtitle in a h3 element, returning the + * figure. To specify an HTML subtitle, consider using the [`html` tagged + * template literal](http://github.com/observablehq/htl); otherwise, the + * specified string represents text that will be escaped as needed. + * + * ```js + * Plot.plot({ + * subtitle: html`This is a fancy subtitle`, + * marks: … + * }) + * ``` + */ + subtitle?: string | Node | null; + /** * The figure caption. If present, Plot wraps the generated SVG element in an * HTML figure element with a figcaption, returning the figure. To specify an diff --git a/src/plot.js b/src/plot.js index 2cb8d92202..bdaf87dce1 100644 --- a/src/plot.js +++ b/src/plot.js @@ -20,7 +20,7 @@ import {initializer} from "./transforms/basic.js"; import {consumeWarnings, warn} from "./warnings.js"; export function plot(options = {}) { - const {facet, style, caption, ariaLabel, ariaDescription} = options; + const {facet, style, title, subtitle, caption, ariaLabel, ariaDescription} = options; // className for inline styles const className = maybeClassName(options.className); @@ -320,17 +320,20 @@ export function plot(options = {}) { } } - // Wrap the plot in a figure with a caption, if desired. + // Wrap the plot in a figure if there are other elements than the svg. const legends = createLegends(scaleDescriptors, context, options); - if (caption != null || legends.length > 0) { + if (title != null || subtitle != null || caption != null || legends.length > 0) { figure = document.createElement("figure"); figure.style.maxWidth = "initial"; - for (const legend of legends) figure.appendChild(legend); - figure.appendChild(svg); - if (caption != null) { - const figcaption = document.createElement("figcaption"); - figcaption.appendChild(caption?.ownerDocument ? caption : document.createTextNode(caption)); - figure.appendChild(figcaption); + for (const e of [[title, "h2"], [subtitle, "h3"], ...legends, svg, [caption, "figcaption"]]) { + const [contents, tag] = Array.isArray(e) ? e : [e]; + if (contents == null) continue; + if (tag && (!contents.ownerDocument || tag === "figcaption")) { + const c = document.createElement(tag); + if (tag === "h2" || tag === "h3") c.className = `${className}-${tag}`; + c.appendChild(contents.ownerDocument ? contents : document.createTextNode(contents)); + figure.appendChild(c); + } else figure.appendChild(contents); } } diff --git a/test/output/title.html b/test/output/title.html new file mode 100644 index 0000000000..1f80bfe2ab --- /dev/null +++ b/test/output/title.html @@ -0,0 +1,417 @@ +
+

A title about penguins

+

A subtitle about body_mass_g

+
+ + + Adelie + + Chinstrap + + Gentoo +
+ + + + + + + + + + + + 3,000 + 3,500 + 4,000 + 4,500 + 5,000 + 5,500 + 6,000 + + + body_mass_g → + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
\ No newline at end of file diff --git a/test/output/titleHtml.html b/test/output/titleHtml.html new file mode 100644 index 0000000000..15adb712cd --- /dev/null +++ b/test/output/titleHtml.html @@ -0,0 +1,384 @@ +
+

A fancy title about penguins

+ A fancy subtitle + + + + + + + + + + + + 3,000 + 3,500 + 4,000 + 4,500 + 5,000 + 5,500 + 6,000 + + + body_mass_g → + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
\ No newline at end of file diff --git a/test/plots/index.ts b/test/plots/index.ts index 8ae9fa9a02..df3e1abf18 100644 --- a/test/plots/index.ts +++ b/test/plots/index.ts @@ -287,6 +287,7 @@ export * from "./text-overflow.js"; export * from "./this-is-just-to-say.js"; export * from "./time-axis.js"; export * from "./tip.js"; +export * from "./title.js"; export * from "./traffic-horizon.js"; export * from "./travelers-covid-drop.js"; export * from "./travelers-year-over-year.js"; diff --git a/test/plots/title.ts b/test/plots/title.ts new file mode 100644 index 0000000000..2a19918b85 --- /dev/null +++ b/test/plots/title.ts @@ -0,0 +1,20 @@ +import * as Plot from "@observablehq/plot"; +import * as d3 from "d3"; +import {html} from "htl"; + +export async function title() { + const penguins = await d3.csv("data/penguins.csv", d3.autoType); + return Plot.dotX(penguins, {x: "body_mass_g", stroke: "species"}).plot({ + title: "A title about penguins", + subtitle: "A subtitle about body_mass_g", + color: {legend: true} + }); +} + +export async function titleHtml() { + const penguins = await d3.csv("data/penguins.csv", d3.autoType); + return Plot.dotX(penguins, {x: "body_mass_g"}).plot({ + title: html`

A fancy title about penguins

`, + subtitle: html`A fancy subtitle` + }); +} From ab030a859fe74727f26641562ae53a39c85695ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Mon, 7 Aug 2023 16:38:05 +0200 Subject: [PATCH 02/10] better JSDoc links (scoped to this PR) --- src/plot.d.ts | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/plot.d.ts b/src/plot.d.ts index d279ff9841..03b003f6d0 100644 --- a/src/plot.d.ts +++ b/src/plot.d.ts @@ -109,10 +109,10 @@ export interface PlotOptions extends ScaleDefaults { /** * The figure title. If present, Plot wraps the generated SVG element in an - * HTML figure element with the title in a h2 element, returning the figure. To - * specify an HTML title, consider using the [`html` tagged template - * literal](http://github.com/observablehq/htl); otherwise, the specified - * string represents text that will be escaped as needed. + * HTML figure element with the title in a h2 element, returning the figure. + * To specify an HTML title, consider using the [`html` tagged template + * literal][1]; otherwise, the specified string represents text that will be + * escaped as needed. * * ```js * Plot.plot({ @@ -120,6 +120,8 @@ export interface PlotOptions extends ScaleDefaults { * marks: … * }) * ``` + * + * [1]: https://github.com/observablehq/htl */ title?: string | Node | null; @@ -127,8 +129,8 @@ export interface PlotOptions extends ScaleDefaults { * The figure subtitle. If present, Plot wraps the generated SVG element in an * HTML figure element with the subtitle in a h3 element, returning the * figure. To specify an HTML subtitle, consider using the [`html` tagged - * template literal](http://github.com/observablehq/htl); otherwise, the - * specified string represents text that will be escaped as needed. + * template literal][1]; otherwise, the specified string represents text that + * will be escaped as needed. * * ```js * Plot.plot({ @@ -136,6 +138,8 @@ export interface PlotOptions extends ScaleDefaults { * marks: … * }) * ``` + * + * [1]: https://github.com/observablehq/htl */ subtitle?: string | Node | null; From 3236a49c65d8e652991a83202e9a9c584f80cdc7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Mon, 7 Aug 2023 17:22:13 +0200 Subject: [PATCH 03/10] make the figure creation logic more readable (hopefully) --- src/plot.js | 28 ++++++++++++++++++---------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/src/plot.js b/src/plot.js index bdaf87dce1..484ad82cb2 100644 --- a/src/plot.js +++ b/src/plot.js @@ -325,16 +325,10 @@ export function plot(options = {}) { if (title != null || subtitle != null || caption != null || legends.length > 0) { figure = document.createElement("figure"); figure.style.maxWidth = "initial"; - for (const e of [[title, "h2"], [subtitle, "h3"], ...legends, svg, [caption, "figcaption"]]) { - const [contents, tag] = Array.isArray(e) ? e : [e]; - if (contents == null) continue; - if (tag && (!contents.ownerDocument || tag === "figcaption")) { - const c = document.createElement(tag); - if (tag === "h2" || tag === "h3") c.className = `${className}-${tag}`; - c.appendChild(contents.ownerDocument ? contents : document.createTextNode(contents)); - figure.appendChild(c); - } else figure.appendChild(contents); - } + if (title != null) figure.appendChild(createTitleElement(title, "h2", className)); + if (subtitle != null) figure.appendChild(createTitleElement(subtitle, "h3", className)); + figure.append(...legends, svg); + if (caption != null) figure.appendChild(createFigcaption(caption)); } figure.scale = exposeScales(scaleDescriptors); @@ -357,6 +351,20 @@ export function plot(options = {}) { return figure; } +function createTitleElement(contents, tag, className) { + if (contents.ownerDocument) return contents; + const e = document.createElement(tag); + e.className = `${className}-${tag}`; + e.appendChild(document.createTextNode(contents)); + return e; +} + +function createFigcaption(caption) { + const e = document.createElement("figcaption"); + e.appendChild(caption.ownerDocument ? caption : document.createTextNode(caption)); + return e; +} + function plotThis({marks = [], ...options} = {}) { return plot({...options, marks: [...marks, this]}); } From bd4ef70ee32001ce7e349e23ad1afc6421688663 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Wed, 9 Aug 2023 08:48:43 +0200 Subject: [PATCH 04/10] append Co-authored-by: Mike Bostock --- src/plot.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/plot.js b/src/plot.js index 484ad82cb2..03a246a90e 100644 --- a/src/plot.js +++ b/src/plot.js @@ -325,10 +325,10 @@ export function plot(options = {}) { if (title != null || subtitle != null || caption != null || legends.length > 0) { figure = document.createElement("figure"); figure.style.maxWidth = "initial"; - if (title != null) figure.appendChild(createTitleElement(title, "h2", className)); - if (subtitle != null) figure.appendChild(createTitleElement(subtitle, "h3", className)); + if (title != null) figure.append(createTitleElement(title, "h2", className)); + if (subtitle != null) figure.append(createTitleElement(subtitle, "h3", className)); figure.append(...legends, svg); - if (caption != null) figure.appendChild(createFigcaption(caption)); + if (caption != null) figure.append(createFigcaption(caption)); } figure.scale = exposeScales(scaleDescriptors); @@ -355,13 +355,13 @@ function createTitleElement(contents, tag, className) { if (contents.ownerDocument) return contents; const e = document.createElement(tag); e.className = `${className}-${tag}`; - e.appendChild(document.createTextNode(contents)); + e.append(document.createTextNode(contents)); return e; } function createFigcaption(caption) { const e = document.createElement("figcaption"); - e.appendChild(caption.ownerDocument ? caption : document.createTextNode(caption)); + e.append(caption.ownerDocument ? caption : document.createTextNode(caption)); return e; } From 97e79fd7d5b1e63302aa8ab413e17577756de377 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Wed, 9 Aug 2023 09:42:17 +0200 Subject: [PATCH 05/10] use context.document --- src/plot.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/plot.js b/src/plot.js index 03a246a90e..6b7c4a1e18 100644 --- a/src/plot.js +++ b/src/plot.js @@ -325,10 +325,10 @@ export function plot(options = {}) { if (title != null || subtitle != null || caption != null || legends.length > 0) { figure = document.createElement("figure"); figure.style.maxWidth = "initial"; - if (title != null) figure.append(createTitleElement(title, "h2", className)); - if (subtitle != null) figure.append(createTitleElement(subtitle, "h3", className)); + if (title != null) figure.append(createTitleElement(document, title, "h2", className)); + if (subtitle != null) figure.append(createTitleElement(document, subtitle, "h3", className)); figure.append(...legends, svg); - if (caption != null) figure.append(createFigcaption(caption)); + if (caption != null) figure.append(createFigcaption(document, caption)); } figure.scale = exposeScales(scaleDescriptors); @@ -351,7 +351,7 @@ export function plot(options = {}) { return figure; } -function createTitleElement(contents, tag, className) { +function createTitleElement(document, contents, tag, className) { if (contents.ownerDocument) return contents; const e = document.createElement(tag); e.className = `${className}-${tag}`; @@ -359,7 +359,7 @@ function createTitleElement(contents, tag, className) { return e; } -function createFigcaption(caption) { +function createFigcaption(document, caption) { const e = document.createElement("figcaption"); e.append(caption.ownerDocument ? caption : document.createTextNode(caption)); return e; From 6bc100b47ea224ce00a854f0d51426c07a7ddaaf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Wed, 9 Aug 2023 09:42:27 +0200 Subject: [PATCH 06/10] documentation --- docs/.vitepress/theme/custom.css | 2 ++ docs/features/plots.md | 8 ++++++-- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css index 56d88d7854..2d558f8055 100644 --- a/docs/.vitepress/theme/custom.css +++ b/docs/.vitepress/theme/custom.css @@ -154,3 +154,5 @@ a.plot-fork:hover { display: flex; } } + +h2.plot-h2, h3.plot-h3 { margin: 0; } diff --git a/docs/features/plots.md b/docs/features/plots.md index 5cf465401d..85a3fd1e9f 100644 --- a/docs/features/plots.md +++ b/docs/features/plots.md @@ -248,12 +248,16 @@ When using facets, set the *fx* and *fy* scales’ **round** option to false if ## Other options -If a **caption** is specified, Plot.plot wraps the generated SVG element in an HTML figure element with a figcaption, returning the figure. To specify an HTML caption, the caption can be specified as an HTML element, say using the [`html` tagged template literal](http://github.com/observablehq/htl); otherwise, the specified string represents text that will be escaped as needed. +Plot.plot returns an HTML figure element that wraps the figure’s title, subtitle, [legends](./legends.md), chart, and caption — or the chart’s SVG element if there is no other element. + +The top-level **title** , **subtitle** , and **caption** options can be used to specify the corresponding elements. These options accept either a string or an HTML element. If specified as an HTML element, say using the [`html` tagged template literal](http://github.com/observablehq/htl), the title and subtitle are used as given, and the caption is wrapped in a figcaption element; otherwise, the specified string represents text that will be escaped as needed and inserted in an element of type H2, H3, and figcaption, respectively. :::plot https://observablehq.com/@observablehq/plot-caption ```js Plot.plot({ - caption: "Figure 1. A chart with a caption.", + title: "Title", + subtitle: "Subtitle", + caption: "Figure 1. A chart with a title, subtitle, and caption.", marks: [ Plot.frame(), Plot.text(["Hello, world!"], {frameAnchor: "middle"}) From e72b414f9ae64da6ff9cbedc1b5b2f4158554f59 Mon Sep 17 00:00:00 2001 From: Mike Bostock Date: Wed, 9 Aug 2023 10:35:09 -0700 Subject: [PATCH 07/10] figure option; styles --- docs/.vitepress/theme/custom.css | 19 +++++++++++++++++-- docs/components/PlotRender.js | 5 ++++- docs/features/plots.md | 8 ++++---- src/plot.d.ts | 8 ++++++++ src/plot.js | 15 ++++++++------- 5 files changed, 41 insertions(+), 14 deletions(-) diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css index 2d558f8055..123ecb9d66 100644 --- a/docs/.vitepress/theme/custom.css +++ b/docs/.vitepress/theme/custom.css @@ -31,6 +31,23 @@ z-index: 1; } +.vp-doc .plot-figure { + margin: 16px 0; +} + +.vp-doc .plot-figure h2, +.vp-doc .plot-figure h3 { + all: unset; + display: block; +} + +.vp-doc .plot-figure h2 { + line-height: 28px; + font-size: 20px; + font-weight: 600; + letter-spacing: -0.01em; +} + .vp-doc .plot a:hover { text-decoration: initial; } @@ -154,5 +171,3 @@ a.plot-fork:hover { display: flex; } } - -h2.plot-h2, h3.plot-h3 { margin: 0; } diff --git a/docs/components/PlotRender.js b/docs/components/PlotRender.js index 07b6acf171..be06c57e9c 100644 --- a/docs/components/PlotRender.js +++ b/docs/components/PlotRender.js @@ -212,7 +212,10 @@ export default { } if (typeof document !== "undefined") { const plot = Plot[method](options); - const replace = (el) => el.firstChild.replaceWith(plot); + const replace = (el) => { + while (el.lastChild) el.lastChild.remove(); + el.append(plot); + }; return withDirectives(h("span", [toHyperScript(plot)]), [[{mounted: replace, updated: replace}]]); } return h("span", [Plot[method]({...options, document: new Document()}).toHyperScript()]); diff --git a/docs/features/plots.md b/docs/features/plots.md index 85a3fd1e9f..6a07511ce5 100644 --- a/docs/features/plots.md +++ b/docs/features/plots.md @@ -248,15 +248,15 @@ When using facets, set the *fx* and *fy* scales’ **round** option to false if ## Other options -Plot.plot returns an HTML figure element that wraps the figure’s title, subtitle, [legends](./legends.md), chart, and caption — or the chart’s SVG element if there is no other element. +By default, [plot](#plot) returns an SVG element; however, if the plot includes a title, subtitle, [legend](./legends.md), or caption, plot wraps the SVG element with an HTML figure element. You can also force Plot to generate a figure element by setting the **figure** option to true. -The top-level **title** , **subtitle** , and **caption** options can be used to specify the corresponding elements. These options accept either a string or an HTML element. If specified as an HTML element, say using the [`html` tagged template literal](http://github.com/observablehq/htl), the title and subtitle are used as given, and the caption is wrapped in a figcaption element; otherwise, the specified string represents text that will be escaped as needed and inserted in an element of type H2, H3, and figcaption, respectively. +The **title** , **subtitle** , and **caption** options accept either a string or an HTML element. If given an HTML element, say using the [`html` tagged template literal](http://github.com/observablehq/htl), the title and subtitle are used as-is while the caption is wrapped in a figcaption element; otherwise, the specified text will be escaped and wrapped in an H2, H3, or figcaption, respectively. :::plot https://observablehq.com/@observablehq/plot-caption ```js Plot.plot({ - title: "Title", - subtitle: "Subtitle", + title: "For charts, a title assists interpretation", + subtitle: "Tell the reader what’s interesting instead of forcing them to discover it.", caption: "Figure 1. A chart with a title, subtitle, and caption.", marks: [ Plot.frame(), diff --git a/src/plot.d.ts b/src/plot.d.ts index 03b003f6d0..b6019631b1 100644 --- a/src/plot.d.ts +++ b/src/plot.d.ts @@ -161,6 +161,14 @@ export interface PlotOptions extends ScaleDefaults { */ caption?: string | Node | null; + /** + * Whether to wrap the generated SVG element with an HTML figure element. By + * default, this is determined by the presence of non-chart elements such as + * legends, title, subtitle, and caption; if false, these non-chart element + * options are ignored. + */ + figure?: boolean; + /** * The [aria-label attribute][1] on the SVG root. * diff --git a/src/plot.js b/src/plot.js index 6b7c4a1e18..a659b2a924 100644 --- a/src/plot.js +++ b/src/plot.js @@ -320,13 +320,15 @@ export function plot(options = {}) { } } - // Wrap the plot in a figure if there are other elements than the svg. + // Wrap the plot in a figure, if needed. const legends = createLegends(scaleDescriptors, context, options); - if (title != null || subtitle != null || caption != null || legends.length > 0) { + const {figure: figured = title != null || subtitle != null || caption != null || legends.length > 0} = options; + if (figured) { figure = document.createElement("figure"); - figure.style.maxWidth = "initial"; - if (title != null) figure.append(createTitleElement(document, title, "h2", className)); - if (subtitle != null) figure.append(createTitleElement(document, subtitle, "h3", className)); + figure.className = `${className}-figure`; + figure.style.maxWidth = "initial"; // avoid Observable default style + if (title != null) figure.append(createTitleElement(document, title, "h2")); + if (subtitle != null) figure.append(createTitleElement(document, subtitle, "h3")); figure.append(...legends, svg); if (caption != null) figure.append(createFigcaption(document, caption)); } @@ -351,10 +353,9 @@ export function plot(options = {}) { return figure; } -function createTitleElement(document, contents, tag, className) { +function createTitleElement(document, contents, tag) { if (contents.ownerDocument) return contents; const e = document.createElement(tag); - e.className = `${className}-${tag}`; e.append(document.createTextNode(contents)); return e; } From 88ef27410bf62b1d1aa3f6e38966e493488db199 Mon Sep 17 00:00:00 2001 From: Mike Bostock Date: Wed, 9 Aug 2023 12:23:02 -0700 Subject: [PATCH 08/10] tweak example --- docs/features/plots.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/features/plots.md b/docs/features/plots.md index 6a07511ce5..d7240a33ff 100644 --- a/docs/features/plots.md +++ b/docs/features/plots.md @@ -255,12 +255,12 @@ The **title** , **subtitle** Date: Wed, 9 Aug 2023 12:25:42 -0700 Subject: [PATCH 09/10] regenerate snapshots --- docs/features/plots.md | 2 +- test/output/athletesSortNationality.html | 2 +- test/output/athletesSortNullLimit.html | 2 +- test/output/bigintOrdinal.html | 2 +- test/output/caltrain.html | 2 +- test/output/carsHexbin.html | 2 +- test/output/carsJitter.html | 2 +- test/output/colorPiecewiseLinearDomain.html | 2 +- test/output/colorPiecewiseLinearDomainReverse.html | 2 +- test/output/colorPiecewiseLinearRange.html | 2 +- test/output/colorPiecewiseLinearRangeHcl.html | 2 +- test/output/colorPiecewiseLinearRangeReverse.html | 2 +- test/output/decathlon.html | 2 +- test/output/dotSort.html | 14 +++++++------- test/output/energyProduction.html | 2 +- test/output/figcaption.html | 2 +- test/output/figcaptionHtml.html | 2 +- test/output/frameFillCategorical.html | 2 +- test/output/frameFillQuantitative.html | 2 +- test/output/hexbinR.html | 2 +- test/output/hexbinSymbol.html | 2 +- test/output/hexbinZ.html | 2 +- test/output/likertSurvey.html | 2 +- test/output/penguinDensityFill.html | 2 +- test/output/penguinDensityZ.html | 2 +- test/output/penguinFacetDodgeIsland.html | 2 +- test/output/penguinFacetDodgeSymbol.html | 2 +- test/output/penguinQuantileUnknown.html | 2 +- test/output/penguinSizeSymbols.html | 2 +- test/output/penguinSpeciesCheysson.html | 2 +- test/output/rasterVapor2.html | 2 +- test/output/seattleTemperatureAmplitude.html | 2 +- test/output/simpsonsViews.html | 2 +- test/output/tipTransform.html | 2 +- test/output/title.html | 6 +++--- test/output/titleHtml.html | 2 +- test/output/trafficHorizon.html | 2 +- test/output/usCountyChoropleth.html | 2 +- test/output/walmarts.html | 2 +- test/output/warnMisalignedDivergingDomain.html | 2 +- 40 files changed, 48 insertions(+), 48 deletions(-) diff --git a/docs/features/plots.md b/docs/features/plots.md index d7240a33ff..850afa0a62 100644 --- a/docs/features/plots.md +++ b/docs/features/plots.md @@ -250,7 +250,7 @@ When using facets, set the *fx* and *fy* scales’ **round** option to false if By default, [plot](#plot) returns an SVG element; however, if the plot includes a title, subtitle, [legend](./legends.md), or caption, plot wraps the SVG element with an HTML figure element. You can also force Plot to generate a figure element by setting the **figure** option to true. -The **title** , **subtitle** , and **caption** options accept either a string or an HTML element. If given an HTML element, say using the [`html` tagged template literal](http://github.com/observablehq/htl), the title and subtitle are used as-is while the caption is wrapped in a figcaption element; otherwise, the specified text will be escaped and wrapped in an H2, H3, or figcaption, respectively. +The **title** , **subtitle** , and **caption** options accept either a string or an HTML element. If given an HTML element, say using the [`html` tagged template literal](http://github.com/observablehq/htl), the title and subtitle are used as-is while the caption is wrapped in a figcaption element; otherwise, the specified text will be escaped and wrapped in an h2, h3, or figcaption, respectively. :::plot https://observablehq.com/@observablehq/plot-caption ```js diff --git a/test/output/athletesSortNationality.html b/test/output/athletesSortNationality.html index d371b42a1e..15732dce20 100644 --- a/test/output/athletesSortNationality.html +++ b/test/output/athletesSortNationality.html @@ -1,4 +1,4 @@ -
+