feat: Ability to draw contours?

[mihailyonchev]

Is ability to draw contours will be available anytime in the near future?

[flekschas]

No but feel free to take a stab at it.

[mihailyonchev]

@flekschas I am open to spending some of my free time to add support for this, however I would appreciate some guidance/ideas on how to achieve this considering your context of the codebase you have. There is multiple means in which this support can be added.

[masalinas]

When you are talking about contour I suppose you are talking about to add a simple black thin contour to any point, as you see in this bokeh scatter plot

With your component is just a little complicated to distinguish the points because not exist any contour arount the points
as you see. Add this contour would be a good feature in my opinion:

[flekschas]

@masalinas I think you're talking about a different feature: point borders. Contours are something different. But @insertmike also didn't provide much context on what he would like to accomplish so I may be wrong here. @insertmike can you clarify when you have the chance?

E.g:

In your example, you can make the points easier to perceive by reducing the point size and/or opacity.

[flekschas]

@insertmike If you're thinking of contour lines as in the example above, here's a rough list of things that you'd have to work on. But basically, I would approach this feature similar to the line connection feature in regl-scatterplot. I.e., it should be optional, and have minimal impact on the library performance.

Rough work items that come to mind:

1. Determine an algorithm for efficiently computing the contour lines.
2. Turn the algorithm into a worker similar to the spline-curve (see https://github.com/flekschas/regl-scatterplot/blob/master/src/spline-curve-worker.js and https://github.com/flekschas/regl-scatterplot/blob/master/src/spline-curve.js)
3. Create a line render called contours in init() similar to pointConnections
4. Add a function called setContours() that calls the worker to compute the contour lines. (similar to setPointConnections())
5. Add a setting and option called showContours to regl-scatterplot (similar to showPointConnections)
6. Add logic to the publicDraw() function for drawing contour
7. Add logic to the render function around line 3530 for drawing the contour lines by called contours.draw(). Keep in mind that during transitions, the contour lines should not be redrawn as lines cannot be interpolated at the moment. See how pointConnections is handled in that function.
8. Add cleanup logic to the destroy() function
9. Add an example to ./example. The example should be simple but allow us to easily test the performance with different number of points.
10. Add tests

Being able to render contour lines would be a fantastic feature. But implementing it is a bit involved. If you want to take a stab at it, please feel free to set up a branch and PR where we can communicate about implementation details. Feel free to ask questions often. It's always best to get answers first before jumping into the implementation phase :)

[masalinas]

@flekschas I tried to reduce the opacity like this, but as you see

You have to zoom in a lot to really start to perceive the contours. Can't you change that color outline from black to something that stands out?

[flekschas]

@masalinas I'm not really sure what the issue is. Maybe you can open a new issue outline the issue in more detail. The issue at hand is not about point borders but about contour lines.

[flekschas]

Drawing contour lines is possible since v1.10.0. All you need is a method to compute the contour lines (e.g., D3's density contour method) and the you can render the actual lines via drawAnnotation. Jupyter Scatter (which uses regl-scatterplot under the hood) implements it that way: https://jupyter-scatter.dev/annotations#contour-line