observablehq / observablehq/plot
Absolute spacing between facets
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 5.4k
- Forks
- 244
- PR merge metrics
- No merged PRs in 30d
Description
Status Quo
Currently the spacing between facets needs to be set via the implied band scale’s padding option. [1] However, that option only allows adjusting the spacing relative to the band width (or height). [2]
Motivation
For my use case, I’d like to reserve some space between the facets to repeat the x axis between them. Since I know the amount of space the tick labels will need, I’d like to instruct Plot to leave a gap of a certain fixed size.
Problem
With the current API I need to guess the amount of space Plot will use for a single facet and find a fraction that will leave an appropriate amount of space. If Plot decides that a facet should be larger (in the examples below I forced bigger facets), then my space is at risk of being too small or too large.
Examples
The examples are based on [3].
Appropriate spacing
Plot.plot({
fy: {
padding: .15
},
marks: [
Plot.barY(brands, {
x: "name",
y: "value",
fy: (d, i) => i % 3,
}),
Plot.axisX({
facetAnchor: null,
})
],
})
Excessive spacing
Plot.plot({
fy: {
padding: .15
},
marks: [
Plot.barY(brands, {
x: "name",
y: "value",
fy: (d, i) => i % 3,
}),
Plot.axisX({
facetAnchor: null,
})
],
height: 1000,
})
[1] https://observablehq.com/plot/features/facets#facet-scales
[2] https://observablehq.com/plot/features/scales#discrete-scales
[3] https://observablehq.com/@observablehq/plot-vertical-bars-rotated-labels
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
Start with the facet scales and discrete scales documentation linked in the issue, then compare the vertical-bars example using fy.padding at different heights. Define how a fixed-size gap should behave when facet dimensions change, and verify that the repeated x-axis use case preserves the requested space.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- data-visualization
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100