Can I animate a scatter plot?

[mglerner]

Hi all,
I have data representing a bunch of points in 2D. They move in time. They’re each one of three colors, and they could change to one of the other colors over time. Is there a nice way to animate this with streamlit? Right now, I’m using matplotlib’s scatterplot, with a loop that updates the positions and colors of each point. I didn’t quite see how to do it with one of the more efficient streamlit things like Altair or Pandas, but hopefully I’m missing something obvious. I can easily store the data however would be most useful (numpy array, pandas dataframe, lots of lists, whatever).

Thanks!
-Michael

[Jonathan_Rhone]

Hi @mglerner,

Welcome to the forum

Does this example where we animate an Altair Scatterplot fit your needs?

Appending to scatter chart sub-plots

Hey @dazmundo - In general, to append data to any chart, you use the add_rows function. (You call add_rows on the value returned from the various st. calls.) However, matplotlib charts aren’t “live” (they don’t live in the browser and therefore aren’t interactive; instead, matplotlib renders your chart to a static image which is then sent to the browser.) So add_rows does not work with matplotlib. I’d recommend using Altair to render your scatter chart instead. (Streamlit has good support for…

Here’s another link where we’re animating other kinds of streamlit elements.

How to animate a line chart

import matplotlib.pyplot as plt import numpy as np import streamlit as st import time fig, ax = plt.subplots() max_x = 50 max_rand = 100 frame_count = 100 x = np.arange(0, max_x) ax.set_ylim(0, max_rand) data = np.random.randint(0, max_rand, frame_count+max_x) line, = ax.plot(x, data[0:max_x]) the_plot = st.pyplot(plt) def animate(i): # update the y values (every 1000ms) line.set_ydata(data[i:max_x+i]) the_plot.pyplot(plt) for i in range(frame_count): animate(i) ti…

[mglerner]

Hi,

That first one is almost exactly what I need. Is there a way to delete the old data? I want this to end up looking like a specific number of points are moving around.

FWIW, I tried the animated line chart code and couldn’t get it to work. Streamlit did not give any errors … but I also didn’t see an animated line chart.

Thanks!

[arraydude]

hey @mglerner,

You could do something like this, let me know if this works for you

import streamlit as st
import altair as alt
from vega_datasets import data
import time

source = data.cars()
chart = st.empty()


for i in source.index:
    data_to_be_added = source.iloc[0: i + 1, :]

    x = alt.Chart(data_to_be_added).mark_circle(size=i * 10).encode(
        x='Horsepower',
        y='Miles_per_Gallon',
        color='Origin',
        tooltip=['Name', 'Origin', 'Horsepower', 'Miles_per_Gallon']
    ).interactive()

    time.sleep(0.2)

    chart.altair_chart(x)

[khalido]

Look into plotly express, it makes certain kinds of animations trivial, and provides nice controls.