Area plot not working on single point despite strokeLinecap: square

[AidMen]

trafficstars

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?

[mbostock]

The documentation here is wrong because it was copied from the line mark; an area has no fill by default so setting the strokeLinecap has no effect by default. You need to set a stroke if you want a single-point area to be visible.

[AidMen]

Thank you for your support and clarification @mbostock. I am looking forward to see the documentation updated.