observablehq / observablehq/plot

Area plot not working on single point despite strokeLinecap: square

Open
#2,163 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

documentation
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:

Screenshot_20240906_Observable_plot_area_mark_bug

Only after adding styles to the area (SVG <path> Element) do I see the area for a single point. Is this the desired method?

Screenshot_20240906_Observable_plot_area_mark_css_trick

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.