observablehq / observablehq/plot
Add a "gap" option in the stack transform?
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 5.4k
- Forks
- 244
- PR merge metrics
- No merged PRs in 30d
Description
Inspiration from https://twitter.com/GRSturge/status/1499000981870288914 : the ribbons are separated by gaps of constant height.
I can reproduce without touching Plot's source code with this plugin:
function gapStackY({ y, gap = 0, ...options }) {
let y1, y2;
const ygap = (d, i, e) => {
const v = y(d, i, e);
return v > 0 ? v + 3 * gap : 0;
};
({ y1, y2, ...options } = Plot.stackY({ y: ygap, ...options }));
const { transform: t1 } = y1;
const { transform: t2 } = y2;
y1.transform = () => {
const y1 = t1();
const y2 = t2();
return y1.map((d, i) => d + (y2[i] > y1[i]) * gap);
};
y2.transform = () => {
const y1 = t1();
const y2 = t2();
return y2.map((d, i) => d - (y2[i] > y1[i]) * gap);
};
return { y1, y2, ...options };
}
It's working fine for this use case, even if some options are not fully working (like, y MUST be a function), and I haven't tested with negative values of y. I will research these if you agree it makes sense as an official option.

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 by reading the Plot.stackY transform and use the provided gapStackY plugin as the behavior reference. Determine how an official gap option should handle the shown positive-value case and the untested negative-y case, then verify that the option works beyond the plugin's stated limitations.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- data-visualization
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100