Efficient 3D Line Plot in Plotly js?

plotly.js
1

Drawing lines is hard. I am looking for a way to plot a lot of 3D line segments in Plotly without the corresponding colossal time cost, where drawing a lot of segments takes several seconds. I am currently using scatter3d lines.

I understand that limiting the number of traces would help a lot with these scaling concerns, but I don’t think I’m able to limit the number very much because I would like to incorporate 3 other features:

  1. Color coding segments by a value as seamlessly as possible
  2. Giving the 3D lines variable width, which I have not come across a way to do smoothly and so could only be accomplished by small segments with gradual width changes
  3. Drawing a connected line structure that branches off like a tree (complicating any possibility of using a color scale feature for the whole figure)

I’d like to know if there are other ways I could use Plotly more efficiently to draw this 3D line structure.

Here some times that I got running here by myself: (lines: 5, points per line: 1024)
line0: 1.123046875 ms
line1: 0.728271484375 ms
line2: 1.637939453125 ms
line3: 0.58203125 ms
line4: 1.340087890625 ms
allLines: 5.971923828125 ms
plot: 34732.97900390625 ms

2

Well, I just realized that instead of many traces connecting each point in a line, the line itself should be a trace. That reduced a lot the number of traces, cause I managed x: [x0, x1], y: [y0, y1], z: [z0,z1] to be x: [arrayOfAlXValues], y: [arrayOfAlYValues], z: [arrayOfAlZValues]