Visual artifacts when clipping gaps

Hello! Thanks for the great library!

While making a line plot, I’ve noticed visual artifacts between two line segments when separated by a null/missing value. These issues become more noticeable when there is more data in the figure.

I attached an example figure and jsfiddle example. In the example I have alternating horizontal line segments at +1 and -1, separated by null. There should be no line segments connecting the +1 and -1 segments. My guess is that it is due to some rounding issue when it does the clipping?

https://jsfiddle.net/murphycj/s2c5hbkt/13/

Do you think there is an easy fix for this? Thanks!

[leeoniya]

@murphycj thanks, i’ve added a demo with your data here for further discussion/iteration:

https://leeoniya.github.io/uPlot/demos/sparse.html

a few things stand out to me:

1. when drawing raw points without lines it’s:
   1. difficult to asses a change in volatility / noise
   2. easy to miss spikes in mostly-well-behaved regions
   3. easy to completely miss spikes that are off-scale
2. when drawing lines for frequently-sparse datasets like this one you’ll always risk not drawing single points surrounded by gaps, regardless of the method you use. for example, the 10 spike in 1,1,1,null,10,null,1,1,1. the orange trendline in the points demo tries to address this by force-rendering single points surrounded by null values that would necessarily get clipped by adjacent gaps - https://leeoniya.github.io/uPlot/demos/points.html

you can see pretty significant differences in the highlighted region if the attached image.

i’m interested to see your modified moveTo() pathBuilder that does not suffer from this phenomenon at any zoom level. i did a few simple moveTo() prototypes and in each case spikes would randomly appear/disappear at different chart sizes, zoom levels and scale ranges. can you post your modified pathBuilder code (or make a PR against the sparse.html demo for easier dissecting)?

when there are so many gaps, i think the better strategy would be to modify the gaps array in a way that is aware of the scale range, so if you have 16k points in view, it removes gaps that are < 2px wide, which effectively makes it act as a conditional spanGaps. another demo that does custom gap insertion is the bottom chart here: https://leeoniya.github.io/uPlot/demos/missing-data.html

[leeoniya]

first, thanks for the clear and terse bug report with reduced repro code 👍 ❤️

My guess is that it is due to some rounding issue when it does the clipping?

that’s a pretty good guess 😃. it’s because the linear pathbuilder’s gap construction does not expand the gap width to include the line width in order to avoid accidentally also clipping out additional data at the gap edges.

for your type of dataset it may be more appropriate to switch to the stepped pathbuilder (via series.paths) which does account for line width during gap building by default (via {ascDec: false} [1])

https://jsfiddle.net/pk4mtyza/

paths: uPlot.paths.stepped({align: 1})

alternatively, you can mutate the gaps array to expand each gap manually by a pixel amount if you consider this to be safe for your dataset:

https://jsfiddle.net/pk4mtyza/2/

gaps: (u, seriesIdx, idx0, idx1, gaps) => {
  let lineWidth = u.series[seriesIdx].width;
  return gaps.map(([fromPx, toPx]) => [fromPx - lineWidth, toPx + lineWidth]);
},

[1] https://github.com/leeoniya/uPlot/blob/5680d8b81aefc8cc7035eb51ff99b3d1dfc733f6/dist/uPlot.d.ts#L640-L641