pythonchartssnowflake-cloud-data-platformscatter-plotstreamlit

How can I set up the inputs to this scatter_chart?


My data looks like this:

Name Date 10% 20% 30% ... 100%
Anne 1/1/24 3 5 1 ... 92
Anne 1/2/24 4 8 2 ... 78
Anne 1/3/24 7 9 6 ... 47

What I would like is to create a Snowflake Streamlit scatterplot with the following information:

I have the following code:

import streamlit as st
df = [...same as table...]
st.scatter_chart(df,
                 x = "DATE",
                 y = ["10%", "20%", "30%", ..., "100%", 
                 color = "DATE")

While the result of running the code outputs no errors, all I see is the "DATE" at the bottom of the chart and everything else is empty. I don't think my inputs are correct, does anyone know what I'm doing wrong?


Solution

  • It looks like I needed to import the altair library as the standard streamlit scatter chart functionality was too simple. I needed to create a melted dataframe and use an altair chart to display the data

    Here's what I did:

    import altair as alt
    
    chart_df = newdf.drop(columns = ['NAME'])
    chart_df = chart_df.astype({col: 'float' for col in chart_df.columns if col != 'DATE'})
    
    numeric_cols = sorted(chart_df.columns[1:].to_list(), key=float)
    
    chart_df = chart_df[['DATE'] + numeric_cols]
    
    chart_df['DATE'] = pd.to_datetime(chart_df['DATE'], format='%Y.%m.%d')
    chart_df = chart_df.melt(id_vars = ['DATE'], var_name = '%age', value_name = 'Output')
    
    chart_df['DATE'] = chart_df['DATE'].dt.strftime('%Y-%m-%d')
    
    #st.write('Melted Dataframe:', chart_df)
    chart = alt.Chart(chart_df).mark_circle(size = 60).encode(alt.X('%age:O', 
                                                                    sort = numeric_cols),
                                                              alt.Y('Output:Q'),
                                                              color='DATE:N',
                                                              tooltip=['DATE:N', '%age:O', 'Output:Q']
                                                             ).properties(width = 600, height = 400)
    st.altair_chart(chart, use_container_width = True)
    

    Let me know if you have any questions about this. It still isn't perfect but gets the job done.