plot icon indicating copy to clipboard operation
plot copied to clipboard

Title and subtitle support

Open martgnz opened this issue 3 years ago • 2 comments

Adding tentative HTML title and subtitle support (live example https://observablehq.com/d/90ecbc9920d7456e). A SVG approach would be better for chart portability (e.g. exporting to Illustrator) but it would mean implementing text wrapping and some lookups for text positioning that could be potentially troublesome.

For titles, we add a h1 element, and for subtitles a h2. We wrap everything in a figure tag, extending the support for captions.

I wonder how minimal we want to go with the styling and which elements we'd want to use. A h1 and h2 make sense for an isolated element but it might be too much for a chart that will be inside a document.

imagen

Closes https://github.com/observablehq/plot/issues/92.

martgnz avatar May 30 '21 14:05 martgnz

I think the use of figcaption to describe the sources is incorrect, per https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption:

[The] Figure Caption element represents a caption or legend describing the rest of the contents of its parent <figure> element.

We'd also need to place signature and sources (or maybe only sources), in a semantically correct way.

Fil avatar May 30 '21 19:05 Fil

The proposed solution is a great improvement, but as @martgnz noted, fixing the style to h1 and h2 is very limiting. Perhaps adding a "header channel" with a list for header-part-name: {part-text, part-style} would work better?

plot.plot({
  header: [ title: {"This is a title in Observable plot", "h3"},  
            subtitle: { "Relative frequency of letters in the English language", "h4"}
            ],
  marks: [plot.barY(data, { y: "frequency", x: "letter", fill: "steelblue" })]
})

Note: I am a newbie in both javascript and Observable notebooks, but going through the Observable Overview tutorial, I came to the lack of title problem when I wanted to indicate which country the data was filtered for in the plot title so that if I wanted to download a picture of that specific plot, the information would not be lost.
I did try this:

label: "price_in_usd: " + country

... but that's really not a title (& neither is a caption)!

CatChenal avatar Jun 05 '22 20:06 CatChenal

superseded by #1761 Thank you for the contribution!

Fil avatar Aug 15 '23 16:08 Fil