How to reduce visual noise?

[Inky-developer]

Question

I am rendering a lot of data points, which leads to a lot of noise:

I could filter the points before passing them to the model producer, but then users would not see full details when zooming in.

Ideally, I would like to define a maximal number of points that are allowed to be displayed. If the data contains more points than allowed, it should automatically show the average of a number of close points, instead of each point individually.
That would allow users to zoom in and still see the full details, if they wish.

Is there a way to achieve that using vico?

Vico version(s)

2.0.0-beta.1

UI framework(s)

Jetpack Compose

[Tyler-Lopez]

Hi there, I am also interested in this! I was thinking about this before your question. I had planned to see how dynamically mutating the data series would be at varying zoom levels. We would have to disable animations to make that not too jarring, I think. I'm not sure if there is a better solution in the current implementation, otherwise.

[Tyler-Lopez]

You know, I would also be curious if a custom PointConnector implementation that refused to connect every other data point at some zoom level could also be fruitful here.

[Gowsky]

Hello, @Tyler-Lopez.

I had planned to see how dynamically mutating the data series would be at varying zoom levels.

Since data updates are processed asynchronously, you wouldn't be able to properly synchronize this.

I'm not sure if there is a better solution in the current implementation, otherwise.

Please see here.

I would also be curious if a custom PointConnector implementation that refused to connect every other data point at some zoom level could also be fruitful here.

This wouldn't affect CartesianMarkers. Also, for scrollable charts, it would be incompatible with the drawing optimization system. The system draws only the visible part of the line, and there's at most one extra point out of the visible bounds. If you skipped some points, the line could get cut off too early.

[Gowsky]

Hello, @Inky-developer. This isn't supported at the moment. I'm moving this to "Ideas" for this reason. For now you can implement this by subclassing LineCartesianLayer.

[Inky-developer]

Hi, I had a quick look at LineCartesianLayer and I think the method drawInternal would have to be overwritten. However, it contains some internal only calls, so that is not really possible. Would it be possible to extract the function call to forEachPointInBounds into a separate function? Then it would be possible to only overwrite this part and filter the points there. Though this function would also somehow need access to the width of the canvas, to figure out whether the graph is too dense

[Gowsky]

However, it contains some internal only calls, so that is not really possible.

Yes, it is possible. These are calls to simple convenience functions, and they can be easily replaced. However, you probably don't have to override drawInternal - the following should be enough.

Would it be possible to extract the function call to forEachPointInBounds into a separate function?

You can simply override it.

Though this function would also somehow need access to the width of the canvas, to figure out whether the graph is too dense

All the information you need is in CartesianDrawingContext.