Issues with faceted violin chart made using Observable Plot

I’m not sure what I’m missing here, but all of my areas and lines are rendering in super short segments. The line issue isn’t as apparent, but you can see the rectangles appearing within the “area” section of the chart. I’ve tried to compare my chart to the examples to figure out where my issue is, but I haven’t been able to find a solution.

Any help would be appreciated!

It’s because of the variable title channel. If the title varies within a line, then Plot has to break the line up into separate segments to produce separate SVG path elements each with their own title element.

This is mentioned (obliquely) in the README, emphasis added:

The stroke defaults to currentColor if the fill is none, and to none otherwise. If the stroke is defined as a channel, the line will be broken into contiguous overlapping segments when the stroke color changes; the stroke color will apply to the interval spanning the current data point and the following data point. This behavior also applies to the fill, fillOpacity, strokeOpacity, strokeWidth, opacity, href, title, and ariaLabel channels.

As an alternative, you might use a dot mark as an overlay on top of the line/area, perhaps even an invisible (transparent) dot if you don’t want the dots to be visible.

Ah! Amazing. Thank you!