observablehq / observablehq/plot
CSS classes & SVG export
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 5.4k
- Forks
- 244
- PR merge metrics
- No merged PRs in 30d
Description
- I discern few CSS classes in a Plot:
<svg class="plot " ...
<g class="tick" ...
For now, all texts inherit a generic .plot class (10px, system-ui...) In the following example, there is no visual difference between the axis label and the orange bar label :

It would be useful to tag each chart component with a specific class, especially regarding texts and axes (everything that is not linked to a channel). This would allow us to differentiate and style them with CSS, without having to do it by hand in the form of attributes added to the Plot spec:
- axis labels
- tick labels
- facet labels
- more broadly: title, subtitle and source of the graph, annotations...
An alternative, which is not exclusive, is to specify attributes as in D3, but it seems to me much more elegant, light, standard and extensible to do it in CSS, especially if it is repetitive.
It would also be useful to be able to assign an id to a Plot.
- The SVG export (download SVG) is not of good quality for texts, it does not include relevant CSS classes.

These should be inserted into the SVG. A simple mechanism could also allow custom CSS definitions to be linked to the current Plot, so that they can also be found in the SVG export.
PS: Plot is a great library, very intellectually stimulating, and the 21 beautifully written articles in the https://observablehq.com/collection/@observablehq/plot collection should be read by all data scientists!
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
The request covers Plot component classes, plot ids, and SVG export styling. Review the rendering and download-SVG entry points first; done means distinct CSS hooks and ids are available and exported SVG preserves relevant and custom styling.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, d3, javascript
- Domain
- data-visualization, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100