Drawing lines on top/in addition to LineVis

[mguijarr]

First of all, thanks a lot for h5web: I really like the nice visualizations and responsiveness of the graphs, and ease of use. In the field of React plotting librairies, h5web is a very nice open source project which deserves to be more widely known, IMO 👍🏻

I have a question about how to best display derived data in LineVis.

I’m plotting a scatter plot with LineVis, and I then run some calculations on the data, for example fitting a straight line. I know the equation of the fitted line and I’d like to draw it on top of the point cloud, using the same axes.

What I’m aiming for is a line that has a different visual style from the points, spans the full visible plot area (basically an “infinite” line), does not affect axis scaling, and behaves correctly when zooming or panning.

I’ve looked at a few options but I’m not sure what the intended approach is:

• auxiliary data: in principle I only need two points, but they need to always match the current view limits so the line spans the plot without influencing the axes
• annotations: this feels a bit like abusing the feature
• SvgElement: I had a look, but I don’t really understand how it should be used in this context

What would you recommend as the clean way to do this in LineVis?

[axelboc]

Hey @mguijarr 👋 — thanks for the kind words.

LineVis is one of the top-level visualizations of the library. Internally, it uses the DataCurve component, which itself uses the Line component. So you should be able to achieve what you want by passing an extra <Line /> element as a child of LineVis.

A couple more info that may be of interest:

• We have another top-level visualization called ScatterVis which might be easier to work with depending on how you scatter data is structured.
• If LineVis and ScatterVis are too limiting for some reason, you can always go with the bare-bone VisCanvas component to customise the visualization to your exact needs. See the code of LineVis to get an idea of how to use it: https://github.com/silx-kit/h5web/blob/main/packages/lib/src/vis/line/LineVis.tsx

[mguijarr]

Thanks for the quick answer @axelboc

For the moment, LineVis with glyphs only is the more appropriate for me, I suppose. I am dealing with 4000+ points from a
laser profilometer, it is not a lot of data.

About my question : I will try your suggestion with Line as soon as I get back on this activity - one question though: if canvas is zoomed, for example, how do I get the new boundaries to "recalculate" my points ? Or maybe it is not needed ?

I will keep you informed of my progress.

Thanks again!

[axelboc]

You shouldn't need to recalculate anything (unless I've misunderstood something). If you can't make it work, don't hesitate to share code samples, screenshots, etc. and I can have a closer look.