Plotly.animate with scattergl

plotly.js
1

I need to draw a few line charts with many points (~16 charts with around 3000 visible points at any instance in time each, without zoom) that are updated each second, with smooth transitions on update.

I initially started with raw D3 but eventually realized that SVG doesn’t scale to this number of points/charts.

I first tried plotly because of “webgl” but then realized there is much more on offer and desperately want to include these features (awesome work, btw).

When playing around with a couple of examples, I see that there are smooth transitions, but not when “scattergl” is selected. e.g. if I add " type: ‘scattergl’," to https://codepen.io/plotly/pen/GjkZNk then the super smooth transition of the points, when “zoom” is pressed, disappears.

I browsed examples and I did find some streaming examples, but that continuously re-render the whole chart, i.e. the source of the smoothness comes from the continuous “manual” re-rendering. In my case I want to explicitly add a bunch of points every n seconds and then have an animation that smoothly moves the x axis to show the new points.

My questions are:

  • Is there anything I can do to get smooth animations like this with scattergl right now?
  • If not, is this planned for the near future? I realize there’s work going into webgl components.
2

Not really unfortunately. You can try adding “interpolated” frames and decreasing the transition time, but yeah, tweening animation our only available for SVG scatter traces at the moment.

Not in the short term, but yeah it would be a great addition to the library.

3

Thanks for the prompt response.

I see, bummer. Regarding the interpolated frames option. Say that I interpolate something like 30 frames per second of updates, in your (much more informed than mine) opinion, is this no-go perf-wise? or still something to try?

4

@dralves Another option you may have looked into is animating with pointcloud:

5

@jack thanks for the suggestion. Regarding “pointcloud”: Can it draw lines? (I think the name points to the answer but still worth asking).

@etienne regarding the interpolated frames option. would you use Plotly.animate() or just have ad-hoc animation rendering n frames in 1/30 sec intervals and calling window.requestAnimationFrame?

6

Unfortunately, no.

Both techniques should yield similar performance results. It’s just a matter of preference.

7

Ok, I’ll try the interpolated frames option and report back the results. Thanks for the prompt replies @etienne and @jack

1 Like