observablehq / observablehq/plot
Area plot not working on single point despite strokeLinecap: square
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 5.4k
- Forks
- 244
- PR merge metrics
- No merged PRs in 30d
Description
Describing the bug
As the title implies either I didn't understand the docs for this use case or there is a bug:
Excerpt from the API docs on area marks:
The area mark supports curve options to control interpolation between points. If any of the x1, y1, x2, or y2 values are invalid (undefined, null, or NaN), the baseline and topline will be interrupted, resulting in a break that divides the area shape into multiple segments. (See d3-shape’s area.defined for more.) If an area segment consists of only a single point, it may appear invisible unless rendered with rounded or square line caps. In addition, some curves such as cardinal-open only render a visible segment if it contains multiple points.
Expected behavior
If my plot contains gaps which creates single points, I don't need to do anything else but define the mark option strokeLinecap: 'square' so that I still see an area rendered at this data point.
Steps how to reproduce
Here is my minimal working example in an Observable notebook
data = [
{
"time": 2009,
"value": 74.08,
"lowerBounds": 73.25,
"upperBounds": 74.89,
"age": "A0000",
"sex": 0
}, {
"time": 2010,
"value": 75.17,
"lowerBounds": 74.37,
"upperBounds": 75.96,
"age": "A0000",
"sex": 0
}, {
"time": 2011,
"value": null
}, {
"time": 2012,
"value": 75.95,
"lowerBounds": 75.06,
"upperBounds": 76.82,
"age": "A0000",
"sex": 0
}, {
"time": 2016,
"value": null
}, {
"time": 2022,
"value": 66.4,
"lowerBounds": 63.23,
"upperBounds": 69.44,
"age": "A0000",
"sex": 0
}, {
"time": 2023,
"value": 67.98,
"lowerBounds": 66.23,
"upperBounds": 69.68,
"age": "A0000",
"sex": 0
}
]
Plot.plot({
x: {
interval: 1,
tickFormat: ''
},
y: {
label: 'Proportion of people who have had a dental check-up in the last 12 months',
tickFormat: d => `${d} %`
},
inset: 8,
grid: true,
marks: [
Plot.areaY(data, {x: "time", y1: "lowerBounds", y2: "upperBounds", fill: "#DD1A1E", fillOpacity: 0.2, strokeLinecap: "square"}),
Plot.lineY(data, {x: "time", y: "value", stroke: "#DD1A1E", marker: "circle"})
]
})
This is what it looks like at this point in time:
Only after adding styles to the area (SVG <path> Element) do I see the area for a single point. Is this the desired method?
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 area mark API documentation and reproduce the Observable notebook example using Plot.areaY with gaps and strokeLinecap: "square". Inspect the generated SVG path and compare it with the CSS workaround shown in the report. Done means a single-point area segment is visibly rendered with the documented option, without additional styling.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- d3, javascript
- Domain
- data-visualization
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100