How can I animate a line chart for Gradient Descent?

Using Streamlit
2

Hey @etzimopoulos,

For this animation task, I expect you will have more luck using Altair to plot the graph rather than Matplotlib. A similar conclusion was reached in this benchmark by another user.

This is primarily due to Streamlit creating, serving and destroying images back and forth on the Server for Matplotlib, but only sending JSON arrays for Altair and letting the browser do the rendering.

You may also try with Plotly but I found the regular remounting of the Plotly plot costly in time compared to Altair, and from memory Streamlit doesn’t take into account Plotly’s update_traces to update part of an existing plot without recreating the whole plot

Other harder ideas to test :

  • hey, that could actually do a pretty good Streamlit Component, an animated Plotly which only runs updates to traces rather than remounting the full graph when receiving new data
  • MAYBE you could try the Streamlit Echarts component, use a key parameter to prevent the component from remounting and send the updated data to animate it (see the end of the README). It’s basically the same idea as the first bullet point but implemented in echarts.

Fanilo

3 Likes