observablehq
Plot title (and signature, sources).
This seems like a reasonable thing to include. I wonder if it should be called a “caption” rather than a “title”, and maybe we should use figure and figcaption to generate it if so.
Possible difficulties with figure/figcaption:
-
unexpected switch from svg to html (could be solved by always wrapping with figure) -
html makes it harder to download the chart as svg/png in observable (and to post-process in Inkscape et al) [EDIT: it works!] - what would the {style: {}, background:…} options apply to? the svg or the figure?
If we use a figure though, it's tempting to use it also when we want a color legend (#23).
Exactly, I thought we might need HTML for color swatches anyway. Although I suppose it wouldn’t be the end of the world to layout the swatches manually by computing text metrics.
According to the usual rules of legibility, a chart should include an informative title, coming first (above the chart), possibly a subtitle, obligatorily a source, at the bottom of the chart, more optionally a copyright (which can also be arranged vertically, e.g. bottom right).
ggplot2 and vega-lite allow you to specify these essential elements, it would be very nice if Plot could as well.
The SVG export of the Plot should allow you to get the whole graphic, with titles and sources.
As vega-lite proposes, specifying a title as an array allows it to be spread over several lines.
The height specified for the graphic should not take these elements into account, but only the central body of the graphic.
For whom is looking for how to add a title, see the caption option: https://github.com/observablehq/plot/pull/320 / https://github.com/observablehq/plot#layout-options
[edit] as mentioned by ericemc3, it's not necessarily a perfect solution, but at least it allows to embed the plot in a figure, with a figcaption element, without additional markup.
Caption, title, source... are different concepts. A title is what appears above a chart, a headline aiming at emphasizing the main takeaway, a caption is what typically appears below a photograph or a scientific diagram, a paragraph more like an explanation or a legend
Just another vote in support of title and subtitle support :). I would take @martgnz 's demo (https://github.com/observablehq/plot/pull/423) right now as it looks good enough and would unblock my need at PLDB. This is the one thing making it hard to build ready-to-share charts in Plot.
At Our World in Data the titles and subtitles are key, and the charts would be shared thousands of times less without them.
Have <title> and aria-labelledby been considered?
[Edit] Food for thought: Comparison of different patterns on smashingmagazine.com.
We haven't considered aria-labelledby for now, because it needs an associated element with a given id, which makes it a bit complicated to handle if we want to be able to have several charts on a single page (they're not supposed to share ids). But we'll definitely consider it if there is a clear use case. Not that this property is usually visible only to screen readers, so I seems to fall under a different category, and might need a separate issue?
I think maybe @kentr’s comment is regarding tooltips—which we already support via the title option; also note that we also already support ariaLabel and ariaDescription options. This issue is primarily regarding a visual title element, i.e., a heading above the chart.
@mbostock @Fil
My comment was regarding a title element for the whole SVG (not tooltips).
I envision markup like this:
<div id="svg-title">Daily new confirmed COVID-19 deaths per million people</div>
<svg aria-labelledby="svg-title" ...>
<g>
...
</g>
</svg>
Originally, I didn't know that this issue was regarding a visual title, so I thought of <title> as a candidate for a non-visual title and aria-labelledby as a candidate for a visual title in an external element.
I'm thinking of explicitly connecting the "title" discussed in this issue to the SVG, for accessibility. For accessible titles, when there is already an element on the page that has the title text, MDN recommends connecting it to the SVG with aria-labelledby.
If an element can be described by visible text, it is recommended to reference that text with an aria-labelledby attribute rather than using the
<title>element.
Plot supports aria-label, but if there's already a title element on the page, why not use that?
But the smashingmagazine.com article suggests that even with the aria-labelledby connection, adding a <title> element to the SVG is better for some browsers.
Using aria-labelledby does require a unique id attribute on the title element, but that seems doable. And having an aria-labelledby option lets the user provide their own value if they already have the title element on the page from something else (for example, when the plots are in a react app and there are already DOM elements with the SVG titles).
frustrated by not able to add a proper title, i ended up cheating by using the following code
Plot.text(['Question: My university has a campus-wide generative AI (e.g. ChatGPT) policy for students.'], {frameAnchor: "Top",dy: -25}),
within my Marks:
I had to add marginTop:50 to make sure my title doesn't get cut off..
frustrated by not able to add a proper title, i ended up cheating by using the following code
Plot.text(['Question: My university has a campus-wide generative AI (e.g. ChatGPT) policy for students.'], {frameAnchor: "Top",dy: -25}),within my Marks:
I had to add marginTop:50 to make sure my title doesn't get cut off..
after some more tweaks..